Accessibilité : Quelques alternative Unicode aux icônes

FreshRSS est maintenant utilisable en bonne partie sans CSS.
Ce patch inclut un caractère Unicode approprié en plus de certaines
icônes définies en tant qu'image en CSS.
Contribue à https://github.com/marienfressinaud/FreshRSS/issues/284
Il manque encore certaines icônes, et les alternatives Unicode ne sont
pour l'instant pas montrées si la CSS est chargée mais que les images ne
le sont pas.

app/layout/aside_flux.phtml

@@ -6,7 +6,7 @@
 		<li>
 			<div class="stick">
 				<a class="btn btn-important" href="<?php echo _url ('configure', 'feed'); ?>"><?php echo Translate::t ('subscription_management'); ?></a>
-				<a class="btn btn-important" href="<?php echo _url ('configure', 'categorize'); ?>"><i class="icon i_category"></i></a>
+				<a class="btn btn-important" href="<?php echo _url ('configure', 'categorize'); ?>" title="<?php echo Translate::t ('categories_management'); ?>"><i class="icon i_category">☷</i></a>
 			</div>
 		</li>
 		<?php } elseif (login_is_conf ($this->conf)) { ?>
@@ -16,7 +16,7 @@
 		<li>
 			<div class="category all">
 				<a data-unread="<?php echo $this->nb_not_read; ?>" class="btn<?php echo $this->get_c == 'all' ? ' active' : ''; ?>" href="<?php echo _url ('index', 'index'); ?>">
-					<i class="icon i_all"></i>
+					<i class="icon i_all">☰</i>
 					<?php echo Translate::t ('all_feeds'); ?>
 				</a>
 			</div>
@@ -25,7 +25,7 @@
 		<li>
 			<div class="category favorites">
 				<a data-unread="<?php echo $this->nb_favorites['unread']; ?>" class="btn<?php echo $this->get_c == 'favoris' ? ' active' : ''; ?>" href="<?php echo _url ('index', 'index', 'get', 'favoris'); ?>">
-					<i class="icon i_bookmark"></i>
+					<i class="icon i_bookmark">★</i>
 					<?php echo Translate::t ('favorite_feeds', $this->nb_favorites['all']); ?>
 				</a>
 			</div>

app/views/configure/display.phtml

@@ -162,8 +162,8 @@
 				<thead>
 					<tr>
 						<th> </th>
-						<th><a class="read" title="<?php echo Translate::t ('mark_read'); ?>"> </span></th>
-						<th><a class="bookmark" title="<?php echo Translate::t ('mark_favorite'); ?>"> </span></th>
+						<th><a class="read" title="<?php echo Translate::t ('mark_read'); ?>">✉</a></th>
+						<th><a class="bookmark" title="<?php echo Translate::t ('mark_favorite'); ?>">★</a></th>
 						<th><?php echo Translate::t ('sharing'); ?></th>
 						<th><?php echo Translate::t ('related_tags'); ?></th>
 						<th><?php echo Translate::t ('publication_date'); ?></th>

app/views/helpers/view/normal_view.phtml

@@ -37,19 +37,28 @@ if (isset ($this->entryPaginator) && !$this->entryPaginator->isEmpty ()) {
 	<?php $display_others = false; } ?>
 
 	<div class="flux<?php echo !$item->isRead () ? ' not_read' : ''; ?><?php echo $item->isFavorite () ? ' favorite' : ''; ?>" id="flux_<?php echo $item->id (); ?>">
-		<ul class="horizontal-list flux_header">
-			<?php if (!login_is_conf ($this->conf) || is_logged ()) { ?>
-				<?php if ($this->conf->toplineRead ()) { ?><li class="item manage"><a class="read" href="<?php echo _url ('entry', 'read', 'id', $item->id (), 'is_read', $item->isRead () ? 0 : 1); ?>"> </a></li><?php } ?>
-				<?php if ($this->conf->toplineFavorite ()) { ?><li class="item manage"><a class="bookmark" href="<?php echo _url ('entry', 'bookmark', 'id', $item->id (), 'is_favorite', $item->isFavorite () ? 0 : 1); ?>"> </a></li><?php } ?>
-			<?php
+		<ul class="horizontal-list flux_header"><?php
+			if (!login_is_conf ($this->conf) || is_logged ()) {
+				if ($this->conf->toplineRead ()) {
+					?><li class="item manage"><?php
+						?><a class="read" href="<?php echo _url ('entry', 'read', 'id', $item->id (), 'is_read', $item->isRead () ? 0 : 1); ?>"><?php
+							echo $item->isRead () ? '☑' : '✉'; ?></a><?php
+					?></li><?php
 				}
-				$feed = HelperCategory::findFeed($this->cat_aside, $item->feed ());	//We most likely already have the feed object in cache
-				if (empty($feed)) $feed = $item->feed (true);
+				if ($this->conf->toplineFavorite ()) {
+					 ?><li class="item manage"><?php
+						?><a class="bookmark" href="<?php echo _url ('entry', 'bookmark', 'id', $item->id (), 'is_favorite', $item->isFavorite () ? 0 : 1); ?>"><?php
+							echo $item->isFavorite () ? '★' : '☆'; ?></a><?php
+					?></li><?php
+				}
+			}
+			$feed = HelperCategory::findFeed($this->cat_aside, $item->feed ());	//We most likely already have the feed object in cache
+			if (empty($feed)) $feed = $item->feed (true);
 			?>
 			<li class="item website"><a href="<?php echo _url ('index', 'index', 'get', 'f_' . $feed->id ()); ?>"><img class="favicon" src="<?php echo $feed->favicon (); ?>" alt="✇" /> <span><?php echo $feed->name(); ?></span></a></li>
 			<li class="item title"><a target="_blank" href="<?php echo $item->link (); ?>"><?php echo $item->title (); ?></a></li>
 			<?php if ($this->conf->toplineDate ()) { ?><li class="item date"><?php echo $item->date (); ?> </li><?php } ?>
-			<?php if ($this->conf->toplineLink ()) { ?><li class="item link"><a target="_blank" href="<?php echo $item->link (); ?>"> </a></li><?php } ?>
+			<?php if ($this->conf->toplineLink ()) { ?><li class="item link"><a target="_blank" href="<?php echo $item->link (); ?>">↗</a></li><?php } ?>
 		</ul>
 
 		<div class="flux_content">
@@ -65,11 +74,21 @@ if (isset ($this->entryPaginator) && !$this->entryPaginator->isEmpty ()) {
 					}
 				?>
 			</div>
-			<ul class="horizontal-list bottom">
-				<?php if (!login_is_conf ($this->conf) || is_logged ()) { ?>
-					<?php if ($this->conf->bottomlineRead ()) { ?><li class="item manage"><a class="read" href="<?php echo _url ('entry', 'read', 'id', $item->id (), 'is_read', $item->isRead () ? 0 : 1); ?>"> </a></li><?php } ?>
-					<?php if ($this->conf->bottomlineFavorite ()) { ?><li class="item manage"><a class="bookmark" href="<?php echo _url ('entry', 'bookmark', 'id', $item->id (), 'is_favorite', $item->isFavorite () ? 0 : 1); ?>"> </a></li><?php } ?>
-				<?php } ?>
+			<ul class="horizontal-list bottom"><?php
+				if (!login_is_conf ($this->conf) || is_logged ()) {
+					if ($this->conf->bottomlineRead ()) {
+						?><li class="item manage"><?php
+							?><a class="read" href="<?php echo _url ('entry', 'read', 'id', $item->id (), 'is_read', $item->isRead () ? 0 : 1); ?>"><?php
+								echo $item->isRead () ? '☑' : '☐'; ?></a><?php
+						?></li><?php
+					}
+					if ($this->conf->bottomlineFavorite ()) {
+						?><li class="item manage"><?php
+							?><a class="bookmark" href="<?php echo _url ('entry', 'bookmark', 'id', $item->id (), 'is_favorite', $item->isFavorite () ? 0 : 1); ?>"><?php
+								echo $item->isFavorite () ? '★' : '☆'; ?></a><?php
+						?></li><?php
+					}
+				} ?>
 				<li class="item">
 					<?php
 						if ($this->conf->bottomlineSharing ()) {

public/scripts/main.js

@@ -39,15 +39,15 @@ function mark_read(active, only_not_read) {
 		url: url,
 		data : { ajax: true }
 	}).done(function (data) {
-		var res = $.parseJSON(data);
-
-		active.find("a.read").attr("href", res.url);
-
-		var inc = 0;
+		var res = $.parseJSON(data),
+			$r = active.find("a.read").attr("href", res.url),
+			inc = 0;
 		if (active.hasClass("not_read")) {
+			$r.text('☑');
 			active.removeClass("not_read");
 			inc--;
 		} else if (only_not_read !== true || active.hasClass("not_read")) {
+			$r.text('☐');
 			active.addClass("not_read");
 			inc++;
 		}
@@ -109,15 +109,16 @@ function mark_favorite(active) {
 		url: url,
 		data : { ajax: true }
 	}).done(function (data) {
-		var res = $.parseJSON(data);
-
-		active.find("a.bookmark").attr("href", res.url);
-		var inc = 0;
+		var res = $.parseJSON(data),
+			$b = active.find("a.bookmark").attr("href", res.url),
+			inc = 0;
 		if (active.hasClass("favorite")) {
+			$b.text('☆');
 			active.removeClass("favorite");
 			inc--;
 		} else {
-			active.addClass("favorite");
+			$b.text('★');
+			active.addClass("favorite").find('.bookmark');
 			inc++;
 		}
 

public/themes/default/global.css

@@ -477,8 +477,9 @@ input, select, textarea {
 		color: #844;
 	}
 
-/* ICONES */
+/* ICÔNES */
 .icon {
+	font-size: 0;
 	display: inline-block;
 	width: 16px;
 	height: 16px;

public/themes/flat-design/global.css

@@ -469,8 +469,9 @@ input, select, textarea {
 		color: #844;
 	}
 
-/* ICONES */
+/* ICÔNES */
 .icon {
+	font-size: 0;
 	display: inline-block;
 	width: 16px;
 	height: 16px;