Accessibilité sans images (expérimentation)

Expérimentation : utilisation de vraies images à la place des icônes
générées en CSS.
Permet de fournir un texte alternatif affiché en cas de non-chargement
de l'image (par choix ou problème réseau par exemple).
Meilleure sémantique (plutôt que le tag i détourné).
Implémente https://github.com/marienfressinaud/FreshRSS/issues/284
Il est toujours possible de changer d'icônes selon les thèmes grâce à
RSSThemes.php

app/models/RSSThemes.php

@@ -82,7 +82,7 @@ class RSSThemes extends Model {
 		$url = isset(self::$themeIcons[$url]) ? (self::$themeIconsUrl . $url) :
 			(self::$defaultIconsUrl . $url);
 
-		return '<i class="icon i_' . $name . '">' . $alts[$name] . '</i>';
-		//return '<img class="icon" src="' . Url::display($url) . '" alt="' . $alts[$name] . '" />';
+		//return '<i class="icon i_' . $name . '">' . $alts[$name] . '</i>';
+		return '<img class="icon" src="' . Url::display($url) . '" alt="' . $alts[$name] . '" />';
 	}
 }

public/scripts/main.js

@@ -286,7 +286,15 @@ function init_column_categories() {
 		return;
 	}
 	$('#aside_flux').on('click', '.category>a.dropdown-toggle', function () {
-		$(this).children().toggleClass("i_down").toggleClass("i_up").text($(this).hasClass("i_up") ? "△" : "▽");
+		$(this).children().each(function() {
+			if (this.alt === '▽') {
+				this.src = this.src.replace('/icons/down.', '/icons/up.');
+				this.alt = '△';
+			} else {
+				this.src = this.src.replace('/icons/up.', '/icons/down.');
+				this.alt = '▽';
+			}
+		});
 		$(this).parent().next(".feeds").slideToggle();
 		return false;
 	});

public/themes/default/freshrss.css

@@ -18,6 +18,7 @@
 		}
 			.logo {
 				display: inline-block;
+				font-size: 48px;
 				height: 32px;
 				width: 32px;
 				padding: 10px;
@@ -253,7 +254,6 @@
 		.item.manage {
 			width: 40px;
 			white-space: nowrap;
-			font-size: 0px;
 			text-align: center;
 		}
 		.flux_header .item.website {

public/themes/default/global.css

@@ -480,92 +480,9 @@ input, select, textarea {
 
 /* ICÔNES */
 .icon {
-	font-size: 0;
 	display: inline-block;
 	width: 16px;
 	height: 16px;
 	vertical-align: middle;
 	line-height: 16px;
-	background: center center no-repeat;
 }
-	.i_refresh {
-		background-image: url("../icons/refresh.svg");
-	}
-	.i_bookmark {
-		background-image: url("../icons/starred.svg");
-	}
-	.i_not_bookmark {
-		background-image: url("../icons/unstarred.svg");
-	}
-	.i_read {
-		background-image: url("../icons/read.svg");
-	}
-	.i_unread {
-		background-image: url("../icons/unread.svg");
-	}
-	.i_all {
-		background-image: url("../icons/all.svg");
-	}
-	.i_close {
-		background-image: url("../icons/close.svg");
-	}
-	.i_search {
-		background-image: url("../icons/search.svg");
-	}
-	.i_configure {
-		background-image: url("../icons/configure.svg");
-	}
-	.i_login {
-		background-image: url("../icons/login.svg");
-	}
-	.i_logout {
-		background-image: url("../icons/logout.svg");
-	}
-	.i_add {
-		background-image: url("../icons/add.svg");
-	}
-	.i_link {
-		background-image: url("../icons/link.svg");
-	}
-	.i_down {
-		background-image: url("../icons/down.svg");
-	}
-	.i_up {
-		background-image: url("../icons/up.svg");
-	}
-	.i_next {
-		background-image: url("../icons/next.svg");
-	}
-	.i_prev {
-		background-image: url("../icons/prev.svg");
-	}
-	.i_help {
-		background-image: url("../icons/help.svg");
-	}
-	.i_note {
-		background-image: url("../icons/note.svg");
-	}
-	.i_note_empty {
-		background-image: url("../icons/note_empty.svg");
-	}
-	.i_category {
-		background-image: url("../icons/category.svg");
-	}
-	.i_category-white {
-		background-image: url("../icons/category-white.svg");
-	}
-	.i_rss {
-		background-image: url("../icons/rss.svg");
-	}
-	.i_share {
-		background-image: url("../icons/share.svg");
-	}
-	.i_starred {
-		background-image: url("../icons/starred.svg");
-	}
-	.i_non-starred {
-		background-image: url("../icons/non-starred.svg");
-	}
-	.i_tag {
-		background-image: url("../icons/tag.svg");
-	}

public/themes/flat-design/freshrss.css

@@ -21,6 +21,7 @@ body {
 		}
 			.logo {
 				display: inline-block;
+				font-size: 48px;
 				height: 32px;
 				width: 32px;
 				padding: 10px;
@@ -236,7 +237,6 @@ body {
 		.item.manage {
 			width: 40px;
 			white-space: nowrap;
-			font-size: 0px;
 			text-align: center;
 		}
 		.flux_header .item.website {

public/themes/flat-design/global.css

@@ -472,86 +472,9 @@ input, select, textarea {
 
 /* ICÔNES */
 .icon {
-	font-size: 0;
 	display: inline-block;
 	width: 16px;
 	height: 16px;
 	vertical-align: middle;
 	line-height: 16px;
-	background: center center no-repeat;
 }
-	.i_refresh {
-		background-image: url("icons/refresh.svg");
-	}
-	.i_bookmark {
-		background-image: url("../icons/starred.svg");
-	}
-	.i_not_bookmark {
-		background-image: url("../icons/unstarred.svg");
-	}
-	.i_read {
-		background-image: url("../icons/read.svg");
-	}
-	.i_unread {
-		background-image: url("../icons/unread.svg");
-	}
-	.i_all {
-		background-image: url("icons/all.svg");
-	}
-	.i_close {
-		background-image: url("icons/close.svg");
-	}
-	.i_search {
-		background-image: url("icons/search.svg");
-	}
-	.i_configure {
-		background-image: url("icons/configure.svg");
-	}
-	.i_login {
-		background-image: url("../icons/login.svg");
-	}
-	.i_logout {
-		background-image: url("../icons/logout.svg");
-	}
-	.i_add {
-		background-image: url("icons/add.svg");
-	}
-	.i_link {
-		background-image: url("../icons/link.svg");
-	}
-	.i_down {
-		background-image: url("icons/down.svg");
-	}
-	.i_up {
-		background-image: url("icons/up.svg");
-	}
-	.i_next {
-		background-image: url("icons/next.svg");
-	}
-	.i_prev {
-		background-image: url("icons/prev.svg");
-	}
-	.i_help {
-		background-image: url("../icons/help.svg");
-	}
-	.i_category {
-		background-image: url("../icons/category-white.svg");
-	}
-	.i_category-white {
-		background-image: url("../icons/category-white.svg");
-	}
-	.i_rss {
-		background-image: url("../icons/rss.svg");
-	}
-	.i_share {
-		background-image: url("../icons/share.svg");
-	}
-	.i_starred {
-		background-image: url("../icons/starred.svg");
-	}
-	.i_non-starred {
-		background-image: url("../icons/non-starred.svg");
-	}
-	.i_tag {
-		background-image: url("../icons/tag.svg");
-	}