Bug 1473200: Provide accessibility context for permission controls in the identity popup. r=johannh
authorJames Teh <jteh@mozilla.com>
Wed, 04 Jul 2018 12:13:51 +1000
changeset 425276 13c926e6695891fe6a2a7145468e38b7eb08bc70
parent 425275 4caf4cf4cf374868e722b7e02d8c8c9cc759c8ad
child 425277 4fd60abd9726046598d302b473106f7df33e66f1
push id66004
push userjteh@mozilla.com
push dateThu, 05 Jul 2018 23:14:11 +0000
treeherderautoland@13c926e66958 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjohannh
bugs1473200
milestone63.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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
browser/base/content/browser-siteIdentity.js
browser/components/controlcenter/content/panel.inc.xul
--- 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;"