Skip to content

Commit e5afbb2

Browse files
gorhillgorhill
committed
further make popup panel more ARIA-friendly (gorhill#2072)
1 parent 9884ff1 commit e5afbb2

3 files changed

Lines changed: 90 additions & 22 deletions

File tree

‎src/_locales/en/messages.json‎

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,11 +47,11 @@
4747
"message":"Click: disable\/enable uBlock₀ for this site.\n\nCtrl+click: disable uBlock₀ only on this page.",
4848
"description":"English: Click: disable\/enable uBlock₀ for this site.\n\nCtrl+click: disable uBlock₀ only on this page."
4949
},
50-
"popupPowerSwitchOffInfo":{
50+
"popupPowerSwitchInfo1":{
5151
"message":"Click to disable uBO for this site.\n\nCtrl+click to disable uBO only on this page.",
5252
"description":"Message to be read by screen readers"
5353
},
54-
"popupPowerSwitchOnInfo":{
54+
"popupPowerSwitchInfo2":{
5555
"message":"Click to enable uBO for this site.",
5656
"description":"Message to be read by screen readers"
5757
},
@@ -95,18 +95,50 @@
9595
"message":"Toggle the blocking of all popups for this site",
9696
"description":"Tooltip for the no-popups per-site switch"
9797
},
98+
"popupTipNoPopups1":{
99+
"message":"Click to block all popups on this site",
100+
"description":"Tooltip for the no-popups per-site switch"
101+
},
102+
"popupTipNoPopups2":{
103+
"message":"Click to no longer block all popups on this site",
104+
"description":"Tooltip for the no-popups per-site switch"
105+
},
98106
"popupTipNoLargeMedia":{
99107
"message":"Toggle the blocking of large media elements for this site",
100108
"description":"Tooltip for the no-large-media per-site switch"
101109
},
110+
"popupTipNoLargeMedia1":{
111+
"message":"Click to block large media elements on this site",
112+
"description":"Tooltip for the no-large-media per-site switch"
113+
},
114+
"popupTipNoLargeMedia2":{
115+
"message":"Click to no longer block large media elements on this site",
116+
"description":"Tooltip for the no-large-media per-site switch"
117+
},
102118
"popupTipNoCosmeticFiltering":{
103119
"message":"Toggle cosmetic filtering for this site",
104120
"description":"Tooltip for the no-cosmetic-filtering per-site switch"
105121
},
122+
"popupTipNoCosmeticFiltering1":{
123+
"message":"Click to disable cosmetic filtering on this site",
124+
"description":"Tooltip for the no-cosmetic-filtering per-site switch"
125+
},
126+
"popupTipNoCosmeticFiltering2":{
127+
"message":"Click to enable cosmetic filtering on this site",
128+
"description":"Tooltip for the no-cosmetic-filtering per-site switch"
129+
},
106130
"popupTipNoRemoteFonts":{
107131
"message":"Toggle the blocking of remote fonts for this site",
108132
"description":"Tooltip for the no-remote-fonts per-site switch"
109133
},
134+
"popupTipNoRemoteFonts1":{
135+
"message":"Click to block remote fonts on this site",
136+
"description":"Tooltip for the no-remote-fonts per-site switch"
137+
},
138+
"popupTipNoRemoteFonts2":{
139+
"message":"Click to no longer block remote fonts on this site",
140+
"description":"Tooltip for the no-remote-fonts per-site switch"
141+
},
110142
"popupTipGlobalRules":{
111143
"message":"Global rules: this column is for rules which apply to all sites.",
112144
"description":"Tooltip when hovering the top-most cell of the global-rules column."

‎src/js/popup.js‎

Lines changed: 52 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -506,24 +506,61 @@ var renderPopup = function() {
506506
// Use tooltip for ARIA purpose.
507507

508508
var renderTooltips = function(selector) {
509-
var elem = uDom.nodeFromId('switch'),
510-
off = document.body.classList.contains('off'),
511-
text;
512-
if ( off ) {
513-
text = vAPI.i18n('popupPowerSwitchOnInfo');
514-
elem.setAttribute('aria-label', text);
515-
elem.setAttribute('data-tip', text);
516-
} else {
517-
text = vAPI.i18n('popupPowerSwitchOffInfo');
509+
var elem, text;
510+
for ( var entry of tooltipTargetSelectors ) {
511+
if ( selector !== undefined && entry[0] !== selector ) { continue; }
512+
text = vAPI.i18n(
513+
entry[1].i18n +
514+
(uDom.nodeFromSelector(entry[1].state) === null ? '1' : '2')
515+
);
516+
elem = uDom.nodeFromSelector(entry[0]);
518517
elem.setAttribute('aria-label', text);
519518
elem.setAttribute('data-tip', text);
520-
}
521-
if ( typeof selector === 'string' ) {
522-
uDom.nodeFromId('tooltip').textContent =
523-
uDom.nodeFromSelector(selector).getAttribute('data-tip');
519+
if ( selector !== undefined ) {
520+
uDom.nodeFromId('tooltip').textContent =
521+
elem.getAttribute('data-tip');
522+
}
524523
}
525524
};
526525

526+
var tooltipTargetSelectors = new Map([
527+
[
528+
'#switch',
529+
{
530+
state: 'body.off',
531+
i18n: 'popupPowerSwitchInfo',
532+
}
533+
],
534+
[
535+
'#no-popups',
536+
{
537+
state: '#no-popups.on',
538+
i18n: 'popupTipNoPopups'
539+
}
540+
],
541+
[
542+
'#no-large-media',
543+
{
544+
state: '#no-large-media.on',
545+
i18n: 'popupTipNoLargeMedia'
546+
}
547+
],
548+
[
549+
'#no-cosmetic-filtering',
550+
{
551+
state: '#no-cosmetic-filtering.on',
552+
i18n: 'popupTipNoCosmeticFiltering'
553+
}
554+
],
555+
[
556+
'#no-remote-fonts',
557+
{
558+
state: '#no-remote-fonts.on',
559+
i18n: 'popupTipNoRemoteFonts'
560+
}
561+
]
562+
]);
563+
527564
/******************************************************************************/
528565

529566
// All rendering code which need to be executed only once.
@@ -891,9 +928,7 @@ var revertFirewallRules = function() {
891928
var toggleHostnameSwitch = function(ev) {
892929
var target = ev.currentTarget;
893930
var switchName = target.getAttribute('id');
894-
if ( !switchName ) {
895-
return;
896-
}
931+
if ( !switchName ) { return; }
897932
target.classList.toggle('on');
898933
messaging.send(
899934
'popupPanel',
@@ -905,6 +940,7 @@ var toggleHostnameSwitch = function(ev) {
905940
tabId: popupData.tabId
906941
}
907942
);
943+
renderTooltips('#' + switchName);
908944
hashFromPopupData();
909945
};
910946

‎src/popup.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,10 @@ <h2 id="dfToggler" data-i18n="popupBlockedRequestPrompt">&nbsp;</h2>
3333
<h2 data-i18n="popupHitDomainCountPrompt">&nbsp;</h2>
3434
<p class="statValue" id="popupHitDomainCount">&nbsp;</p>
3535
<div id="extraTools">
36-
<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>
37-
<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>
38-
<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>
39-
<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>
36+
<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>
37+
<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>
38+
<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>
39+
<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>
4040
</div>
4141
</div><!-- DO NOT REMOVE --><div class="tooltipContainer">
4242
<div id="firewallContainer" class="minimized">

0 commit comments

Comments
 (0)