Accessibility: feed list button title toggle

Simounet · May 13, 2019 · 23922a0 · 23922a0
1 parent 09d5c29
commit 23922a0
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -100,7 +100,7 @@ <h2 class="feed-add-title">{function="_t('ADD_FEED')"}</h2>
                         <div class="folder__item js-folder__item{if="$folderSelected"} selected{/if}">
                             <button
                                 class="folder__button js-toggle-button{if="!$value->getIsopen()"} folder-closed{/if}"
-                                title="Switch dossier"
+                                title="{function="_t($value->getIsopen() ? 'LEEDVIBES_FOLDER_TOGGLE_ON' : 'LEEDVIBES_FOLDER_TOGGLE_OFF')"} {$value->getName()}"
                                 aria-expanded="{if="$value->getIsopen()"}true{else}false{/if}"
                             >
                                 <img src="images/triangle.svg" alt="" />

diff --git a/js/script.js b/js/script.js
@@ -459,20 +459,23 @@ function toggleFolder (button) {
     'use strict';
     var folderBloc = button.parents('.js-folder');
     var feedBloc = folderBloc.find('.js-toggle-item');
-    var newAriaExpanded = button.attr('aria-expanded') === "true" ?
+    var folderNameEl = folderBloc.find('.js-folder-name');
+    var folderNameText = folderNameEl.text();
+    var isAriaExpanded = button.attr('aria-expanded') === "true";
+    var newAriaExpanded = isAriaExpanded ?
         "false" : "true";
     button.attr('aria-expanded', newAriaExpanded);
-
-    var open = 0;
-    if (feedBloc.css('display') === 'none') {
-        open = 1;
-    }
+    var buttonTitle = isAriaExpanded ?
+        'LEEDVIBES_FOLDER_TOGGLE_OFF' : 'LEEDVIBES_FOLDER_TOGGLE_ON';
+    button.prop('title', _t(buttonTitle) + ' ' + folderNameText);
 
     feedBloc.slideToggle(200, function () {
         $(this).toggleClass('hidden');
     });
     button.toggleClass('folder-closed');
 
+    var open = isAriaExpanded ?
+        0 : 1;
     $.ajax({
         url: './action.php?action=changeFolderState',
         data: { id: folderBloc.data('id'), isopen: open }

diff --git a/locale/en.json b/locale/en.json
@@ -1,6 +1,8 @@
 {
   "LEEDVIBES_ALL_FEEDS": "All feeds",
   "LEEDVIBES_CONNECTION": "Connection",
+  "LEEDVIBES_FOLDER_TOGGLE_OFF": "Show the feed list of the folder",
+  "LEEDVIBES_FOLDER_TOGGLE_ON": "Hide the feed list of the folder",
   "LEEDVIBES_GET_NEW_EVENTS": "Show new events",
   "LEEDVIBES_GO_TOP": "Go to the top",
   "LEEDVIBES_IN_THE_FUTURE": "In the future",

diff --git a/locale/fr.json b/locale/fr.json
@@ -1,6 +1,8 @@
 {
   "LEEDVIBES_ALL_FEEDS": "Tous les flux",
   "LEEDVIBES_CONNECTION": "Connexion",
+  "LEEDVIBES_FOLDER_TOGGLE_OFF": "Montrer la liste des flux du dossier",
+  "LEEDVIBES_FOLDER_TOGGLE_ON": "Masquer la liste des flux du dossier",
   "LEEDVIBES_GET_NEW_EVENTS": "Afficher les nouvelles entrées",
   "LEEDVIBES_GO_TOP": "Aller en haut",
   "LEEDVIBES_IN_THE_FUTURE": "Dans le futur",