Mirrors
/
uBlock
mirror of https://github.com/gorhill/uBlock.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
gorhill 2017-11-08 07:34:22 -05:00
parent 9884ff115a
commit e5afbb2ed7
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
3 changed files with 90 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/_locales/en/messages.json
View File

@ -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."

66
src/js/popup.js
View File

@ -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');
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);
} else {
text = vAPI.i18n('popupPowerSwitchOffInfo');
elem.setAttribute('aria-label', text);
elem.setAttribute('data-tip', text);
}
if ( typeof selector === 'string' ) {
if ( selector !== undefined ) {
uDom.nodeFromId('tooltip').textContent =
uDom.nodeFromSelector(selector).getAttribute('data-tip');
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();
};

8
src/popup.html
View File

@ -33,10 +33,10 @@
<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">