Accessibility: unread count added to buttons

Simounet · May 13, 2019 · 4eb6ba7 · 4eb6ba7
1 parent a9b59d2
commit 4eb6ba7
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 9 deletions.
diff --git a/css/style.css b/css/style.css
diff --git a/css/style.css.map b/css/style.css.map
diff --git a/index.html b/index.html
@@ -79,7 +79,7 @@ <h2 class="feed-add-title">{function="_t('ADD_FEED')"}</h2>
                 <li class="folder">
                     <div class="folder__item{if="(!isset($currentFolder)) && (!isset($currentFeed))"} selected{/if}">
                         <a href="./" data-link="home" class="sidebar-item">All feeds</a>
-                        <button class="mark-as-read js-mark-as-read js-total-counter" title="{function="_t('LEEDVIBES_MARK_ALL_AS_READ')"}">{$unread['total']}</button>
+                        <button class="mark-as-read js-mark-as-read js-total-counter" title="{function="_t('LEEDVIBES_MARK_ALL_AS_READ')"}"><span data-count="number">{$unread['total']}</span> <span class="sr-only" data-count="text">{function="_t($unread['total'] > 1 ? 'LEEDVIBES_UNREADS' : 'LEEDVIBES_UNREAD')"}</span></button>
                     </div>
                 </li>
                 <!-- [todo] -  Remove order=unread on feeds' links, use the settings instead -->
@@ -101,7 +101,7 @@ <h2 class="feed-add-title">{function="_t('ADD_FEED')"}</h2>
                             <button class="folder__button js-toggle-button{if="!$value->getIsopen()"} folder-closed{/if}" title="Switch dossier"><img src="images/triangle.svg" alt="" /></button>
                             {function="Plugin::callHook("menu_pre_folder_link", array(&$value))"}
                             <a href="./?action=selectedFolder&amp;folder={$value->getId()}" title="{function="_t('READ_FOLDER_ITEMS')"}" class="sidebar-item js-folder-name">{$value->getName()}</a>
-                            <button class="mark-as-read js-mark-as-read js-folder-counter{if="$unreadEventsForFolder === 0"} hidden{/if}" title="{function="_t('MARK_AS_READ_FOLDER_ITEMS',array($unreadEventsForFolder))"}">{$unreadEventsForFolder}</button>
+                            <button class="mark-as-read js-mark-as-read js-folder-counter{if="$unreadEventsForFolder === 0"} hidden{/if}" title="{function="_t('MARK_AS_READ_FOLDER_ITEMS',array($unreadEventsForFolder))"}"><span data-count="number">{$unreadEventsForFolder}</span> <span class="sr-only" data-count="text">{function="_t($unreadEventsForFolder > 1 ? 'LEEDVIBES_UNREADS' : 'LEEDVIBES_UNREAD')"}</span></button>
                             {function="Plugin::callHook("menu_post_folder_link", array(&$value))"}
                         </div>
                         <ul class="feed js-toggle-item{if="!$value->getIsopen()"} feed--closed{/if}">
@@ -113,7 +113,8 @@ <h2 class="feed-add-title">{function="_t('ADD_FEED')"}</h2>
                                             {if="isset($value2['favicon'])"}{$value2['favicon']}{/if}
                                             <span class="sidebar-item-label js-feed-name">{$value2['name']}</span>
                                         </a>
-                                        <button class="mark-as-read js-mark-as-read js-feed-counter{if="! isset($unread[$value2['id']])"} hidden{/if}" title="{function="_t('MARK_AS_READ')"}">{if="isset( $unread[$value2['id']] )"}{$unread[$value2['id']]}{else}0{/if}</button>
+                                        {$feedUnreadCount=isset( $unread[$value2['id']] ) ? $unread[$value2['id']] : 0}
+                                        <button class="mark-as-read js-mark-as-read js-feed-counter{if="! isset($unread[$value2['id']])"} hidden{/if}" title="{function="_t('MARK_AS_READ')"}"><span data-count="number">{$feedUnreadCount}</span> <span class="sr-only" data-count="text">{function="_t($feedUnreadCount > 1 ? 'LEEDVIBES_UNREADS' : 'LEEDVIBES_UNREAD')"}</span></button>
                                 {function="Plugin::callHook("menu_post_feed_link", array(&$value))"}
                                     </li>
                                 {/loop}

diff --git a/js/script.js b/js/script.js
@@ -501,8 +501,12 @@ function feedCounters (feedID, operation, operationNumber) {
 
     for (var i = 0; i < elements.length; ++i) {
         var element = elements[i];
-        var newCount = counterHandler(element);
-        element.html(newCount);
+        var counterEl = element.find('[data-count="number"]');
+        var textEl = element.find('[data-count="text"]');
+        var newCount = counterHandler(counterEl);
+        var newCountTextKey = newCount > 1 ? 'LEEDVIBES_UNREADS' : 'LEEDVIBES_UNREAD';
+        counterEl.html(newCount);
+        textEl.html(_t(newCountTextKey));
         if (newCount === 0) {
             element.addClass('hidden');
         } else {

diff --git a/locale/en.json b/locale/en.json
@@ -11,5 +11,7 @@
   "LEEDVIBES_GET_NEW_EVENTS": "Show new events",
   "LEEDVIBES_MARK_AS_READ": "Mark as read",
   "LEEDVIBES_MARK_AS_UNREAD": "Mark as unread",
-  "LEEDVIBES_GO_TOP": "Go to the top"
+  "LEEDVIBES_GO_TOP": "Go to the top",
+  "LEEDVIBES_UNREAD": "unread",
+  "LEEDVIBES_UNREADS": "unreads"
 }
diff --git a/locale/fr.json b/locale/fr.json
@@ -10,6 +10,8 @@
   "LEEDVIBES_CONNECTION": "Connexion",
   "LEEDVIBES_GET_NEW_EVENTS": "Afficher les nouvelles entrées",
   "LEEDVIBES_MARK_AS_READ": "Marquer comme lu",
-  "LEEDVIBES_MARK_AS_UNREAD": "Marquer comme non-lu",
-  "LEEDVIBES_GO_TOP": "Aller en haut"
+  "LEEDVIBES_MARK_AS_UNREAD": "Marquer comme non lu",
+  "LEEDVIBES_GO_TOP": "Aller en haut",
+  "LEEDVIBES_UNREAD": "non lu",
+  "LEEDVIBES_UNREADS": "non lus"
 }
diff --git a/sass/style.scss b/sass/style.scss
@@ -807,3 +807,14 @@ $shortcut-key-space: 20px;
 .hidden {
     display: none;
 }
+
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0,0,0,0);
+    border: 0;
+}