Bug 1473200: Provide accessibility context for permission controls in the identity popup. r?johannh
The containers are given an ARIA role of group and labels are associated using aria-labelledby.
For example, this allows screen reader users to know which permission each control is associated with.
Otherwise, they might hear only "Clear this permission and ask again button", with no knowledge of what the permission is.
MozReview-Commit-ID: LeiOmz6go9l
--- a/browser/base/content/browser-siteIdentity.js
+++ b/browser/base/content/browser-siteIdentity.js
@@ -984,16 +984,17 @@ var gIdentityHandler = {
this._permissionEmptyHint.setAttribute("hidden", "true");
}
},
_createPermissionItem(aPermission) {
let container = document.createElement("hbox");
container.setAttribute("class", "identity-popup-permission-item");
container.setAttribute("align", "center");
+ container.setAttribute("role", "group");
let img = document.createElement("image");
img.classList.add("identity-popup-permission-icon");
if (aPermission.id == "plugin:flash") {
img.classList.add("plugin-icon");
} else {
img.classList.add(aPermission.id + "-icon");
}
@@ -1016,16 +1017,18 @@ var gIdentityHandler = {
}
});
}
let nameLabel = document.createElement("label");
nameLabel.setAttribute("flex", "1");
nameLabel.setAttribute("class", "identity-popup-permission-label");
nameLabel.textContent = SitePermissions.getPermissionLabel(aPermission.id);
+ let nameLabelId = "identity-popup-permission-label-" + aPermission.id;
+ nameLabel.setAttribute("id", nameLabelId);
let isPolicyPermission = aPermission.scope == SitePermissions.SCOPE_POLICY;
if (aPermission.id == "popup" && !isPolicyPermission) {
let menulist = document.createElement("menulist");
let menupopup = document.createElement("menupopup");
let block = document.createElement("vbox");
block.setAttribute("id", "identity-popup-popup-container");
@@ -1059,36 +1062,40 @@ var gIdentityHandler = {
SitePermissions.set(gBrowser.currentURI,
aPermission.id,
menulist.selectedItem.value);
});
container.appendChild(img);
container.appendChild(nameLabel);
container.appendChild(menulist);
+ container.setAttribute("aria-labelledby", nameLabelId);
block.appendChild(container);
return block;
}
let stateLabel = document.createElement("label");
stateLabel.setAttribute("flex", "1");
stateLabel.setAttribute("class", "identity-popup-permission-state-label");
+ let stateLabelId = "identity-popup-permission-state-label-" + aPermission.id;
+ stateLabel.setAttribute("id", stateLabelId);
let {state, scope} = aPermission;
// If the user did not permanently allow this device but it is currently
// used, set the variables to display a "temporarily allowed" info.
if (state != SitePermissions.ALLOW && aPermission.sharingState) {
state = SitePermissions.ALLOW;
scope = SitePermissions.SCOPE_REQUEST;
}
stateLabel.textContent = SitePermissions.getCurrentStateLabel(state, aPermission.id, scope);
container.appendChild(img);
container.appendChild(nameLabel);
container.appendChild(stateLabel);
+ container.setAttribute("aria-labelledby", nameLabelId + " " + stateLabelId);
/* We return the permission item here without a remove button if the permission is a
SCOPE_POLICY permission. Policy permissions cannot be removed/changed for the duration
of the browser session. */
if (isPolicyPermission) {
return container;
}
--- a/browser/components/controlcenter/content/panel.inc.xul
+++ b/browser/components/controlcenter/content/panel.inc.xul
@@ -104,17 +104,18 @@
accesskey="&trackingProtection.block4.accesskey;"
oncommand="TrackingProtection.enableForCurrentPage();" />
</vbox>
</hbox>
<!-- Permissions Section -->
<hbox class="identity-popup-section"
when-connection="not-secure secure secure-ev secure-cert-user-overridden file extension">
- <vbox id="identity-popup-permissions-content" flex="1">
+ <vbox id="identity-popup-permissions-content" flex="1" role="group"
+ aria-labelledby="identity-popup-permissions-headline">
<hbox>
<label id="identity-popup-permissions-headline"
class="identity-popup-headline"
flex="1"
value="&identity.permissions;"/>
<toolbarbutton id="identity-popup-permission-preferences-button"
class="identity-popup-preferences-button subviewbutton"
tooltiptext="&identity.permissionsPreferences.tooltip;"