further make popup panel more ARIA-friendly (#2072)

gorhill · Nov 8, 2017 · e5afbb2 · e5afbb2
1 parent 9884ff1
commit e5afbb2
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 22 deletions.
diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
@@ -47,11 +47,11 @@
     "message":"Click: disable\/enable uBlock₀ for this site.\n\nCtrl+click: disable uBlock₀ only on this page.",
     "description":"English: Click: disable\/enable uBlock₀ for this site.\n\nCtrl+click: disable uBlock₀ only on this page."
   },
-  "popupPowerSwitchOffInfo":{
+  "popupPowerSwitchInfo1":{
     "message":"Click to disable uBO for this site.\n\nCtrl+click to disable uBO only on this page.",
     "description":"Message to be read by screen readers"
   },
-  "popupPowerSwitchOnInfo":{
+  "popupPowerSwitchInfo2":{
     "message":"Click to enable uBO for this site.",
     "description":"Message to be read by screen readers"
   },
@@ -95,18 +95,50 @@
     "message":"Toggle the blocking of all popups for this site",
     "description":"Tooltip for the no-popups per-site switch"
   },
+  "popupTipNoPopups1":{
+    "message":"Click to block all popups on this site",
+    "description":"Tooltip for the no-popups per-site switch"
+  },
+  "popupTipNoPopups2":{
+    "message":"Click to no longer block all popups on this site",
+    "description":"Tooltip for the no-popups per-site switch"
+  },
   "popupTipNoLargeMedia":{
     "message":"Toggle the blocking of large media elements for this site",
     "description":"Tooltip for the no-large-media per-site switch"
   },
+  "popupTipNoLargeMedia1":{
+    "message":"Click to block large media elements on this site",
+    "description":"Tooltip for the no-large-media per-site switch"
+  },
+  "popupTipNoLargeMedia2":{
+    "message":"Click to no longer block large media elements on this site",
+    "description":"Tooltip for the no-large-media per-site switch"
+  },
   "popupTipNoCosmeticFiltering":{
     "message":"Toggle cosmetic filtering for this site",
     "description":"Tooltip for the no-cosmetic-filtering per-site switch"
   },
+  "popupTipNoCosmeticFiltering1":{
+    "message":"Click to disable cosmetic filtering on this site",
+    "description":"Tooltip for the no-cosmetic-filtering per-site switch"
+  },
+  "popupTipNoCosmeticFiltering2":{
+    "message":"Click to enable cosmetic filtering on this site",
+    "description":"Tooltip for the no-cosmetic-filtering per-site switch"
+  },
   "popupTipNoRemoteFonts":{
     "message":"Toggle the blocking of remote fonts for this site",
     "description":"Tooltip for the no-remote-fonts per-site switch"
   },
+  "popupTipNoRemoteFonts1":{
+    "message":"Click to block remote fonts on this site",
+    "description":"Tooltip for the no-remote-fonts per-site switch"
+  },
+  "popupTipNoRemoteFonts2":{
+    "message":"Click to no longer block remote fonts on this site",
+    "description":"Tooltip for the no-remote-fonts per-site switch"
+  },
   "popupTipGlobalRules":{
     "message":"Global rules: this column is for rules which apply to all sites.",
     "description":"Tooltip when hovering the top-most cell of the global-rules column."

diff --git a/src/js/popup.js b/src/js/popup.js
@@ -506,24 +506,61 @@ var renderPopup = function() {
 //   Use tooltip for ARIA purpose.
 
 var renderTooltips = function(selector) {
-    var elem = uDom.nodeFromId('switch'),
-        off = document.body.classList.contains('off'),
-        text;
-    if ( off ) {
-        text = vAPI.i18n('popupPowerSwitchOnInfo');
-        elem.setAttribute('aria-label', text);
-        elem.setAttribute('data-tip', text);
-    } else {
-        text = vAPI.i18n('popupPowerSwitchOffInfo');
+    var elem, text;
+    for ( var entry of tooltipTargetSelectors ) {
+        if ( selector !== undefined && entry[0] !== selector ) { continue; }
+        text = vAPI.i18n(
+            entry[1].i18n +
+            (uDom.nodeFromSelector(entry[1].state) === null ? '1' : '2')
+        );
+        elem = uDom.nodeFromSelector(entry[0]);
         elem.setAttribute('aria-label', text);
         elem.setAttribute('data-tip', text);
-    }
-    if ( typeof selector === 'string' ) {
-        uDom.nodeFromId('tooltip').textContent =
-            uDom.nodeFromSelector(selector).getAttribute('data-tip');
+        if ( selector !== undefined ) {
+            uDom.nodeFromId('tooltip').textContent =
+                elem.getAttribute('data-tip');
+        }
     }
 };
 
+var tooltipTargetSelectors = new Map([
+    [
+        '#switch',
+        {
+            state: 'body.off',
+            i18n: 'popupPowerSwitchInfo',
+        }
+    ],
+    [
+        '#no-popups',
+        {
+            state: '#no-popups.on',
+            i18n: 'popupTipNoPopups'
+        }
+    ],
+    [
+        '#no-large-media',
+        {
+            state: '#no-large-media.on',
+            i18n: 'popupTipNoLargeMedia'
+        }
+    ],
+    [
+        '#no-cosmetic-filtering',
+        {
+            state: '#no-cosmetic-filtering.on',
+            i18n: 'popupTipNoCosmeticFiltering'
+        }
+    ],
+    [
+        '#no-remote-fonts',
+        {
+            state: '#no-remote-fonts.on',
+            i18n: 'popupTipNoRemoteFonts'
+        }
+    ]
+]);
+
 /******************************************************************************/
 
 // All rendering code which need to be executed only once.
@@ -891,9 +928,7 @@ var revertFirewallRules = function() {
 var toggleHostnameSwitch = function(ev) {
     var target = ev.currentTarget;
     var switchName = target.getAttribute('id');
-    if ( !switchName ) {
-        return;
-    }
+    if ( !switchName ) { return; }
     target.classList.toggle('on');
     messaging.send(
         'popupPanel',
@@ -905,6 +940,7 @@ var toggleHostnameSwitch = function(ev) {
             tabId: popupData.tabId
         }
     );
+    renderTooltips('#' + switchName);
     hashFromPopupData();
 };
 

diff --git a/src/popup.html b/src/popup.html
@@ -33,10 +33,10 @@ <h2 id="dfToggler" data-i18n="popupBlockedRequestPrompt">&nbsp;</h2>
         <h2 data-i18n="popupHitDomainCountPrompt">&nbsp;</h2>
         <p class="statValue" id="popupHitDomainCount">&nbsp;</p>
         <div id="extraTools">
-            <span id="no-popups" class="hnSwitch fa" data-i18n-tip="popupTipNoPopups">&#xf0c5;<span class="badge"></span><span><svg viewBox="0 0 20 20"><path d="M1,1 19,19M1,19 19,1" /></svg></span></span>
-            <span id="no-large-media" class="hnSwitch fa" data-i18n-tip="popupTipNoLargeMedia">&#xf008;<span class="badge"></span><span><svg viewBox="0 0 20 20"><path d="M1,1 19,19M1,19 19,1" /></svg></span></span>
-            <span id="no-cosmetic-filtering" class="hnSwitch fa" data-i18n-tip="popupTipNoCosmeticFiltering">&#xf070;<span class="badge"></span><span><svg viewBox="0 0 20 20"><path d="M1,1 19,19M1,19 19,1" /></svg></span></span>
-            <span id="no-remote-fonts" class="hnSwitch fa" data-i18n-tip="popupTipNoRemoteFonts">&#xf031;<span class="badge"></span><span><svg viewBox="0 0 20 20"><path d="M1,1 19,19M1,19 19,1" /></svg></span></span>
+            <span id="no-popups" class="hnSwitch fa">&#xf0c5;<span class="badge"></span><span><svg viewBox="0 0 20 20"><path d="M1,1 19,19M1,19 19,1" /></svg></span></span>
+            <span id="no-large-media" class="hnSwitch fa">&#xf008;<span class="badge"></span><span><svg viewBox="0 0 20 20"><path d="M1,1 19,19M1,19 19,1" /></svg></span></span>
+            <span id="no-cosmetic-filtering" class="hnSwitch fa">&#xf070;<span class="badge"></span><span><svg viewBox="0 0 20 20"><path d="M1,1 19,19M1,19 19,1" /></svg></span></span>
+            <span id="no-remote-fonts" class="hnSwitch fa">&#xf031;<span class="badge"></span><span><svg viewBox="0 0 20 20"><path d="M1,1 19,19M1,19 19,1" /></svg></span></span>
         </div>
     </div><!-- DO NOT REMOVE --><div class="tooltipContainer">
         <div id="firewallContainer" class="minimized">