Bug 1473200: Provide accessibility context for permission controls in the identity popup. r?johannh draft
authorJames Teh <jteh@mozilla.com>
Wed, 04 Jul 2018 12:13:51 +1000
changeset 813886 36a0deca706a28e3226b6349a44108ace9af7329
parent 813837 987ea0d6a000b95cf93928b25a74a7fb1dfe37b2
push id115037
push userbmo:jteh@mozilla.com
push dateWed, 04 Jul 2018 02:18:27 +0000
reviewersjohannh
bugs1473200
milestone63.0a1
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;"