Bug 1242856 - Add accessibility semantics to the computed styles view, r=gl

This patch does the following:

1. Adds a semantic document role to the computed styles pane. This causes screen readers to treat it as something they can use their reading commands on for better navigation and efficiency.
2. Gives the expansion twisties a button role and a label. I am reusing the labels introduced in an earlier patch.
3. Turns the name portion of each property into a heading so screen reader users can quickly skip between them, regardless of their expanded status or not.
4. Explicitly displays the status for each rule match with visually hidden text because screen readers do not pick up text from titles on simple span elements.

Differential Revision: https://phabricator.services.mozilla.com/D79673

devtools/client/inspector/computed/computed.js

@@ -1082,12 +1082,21 @@ PropertyView.prototype = {
     // Build the twisty expand/collapse
     this.matchedExpander = doc.createElementNS(HTML_NS, "div");
     this.matchedExpander.className = "computed-expander theme-twisty";
+    this.matchedExpander.setAttribute("role", "button");
+    this.matchedExpander.setAttribute(
+      "aria-label",
+      STYLE_INSPECTOR_L10N.getStr("rule.twistyExpand.label")
+    );
     this.matchedExpander.addEventListener("click", this.onMatchedToggle);
     nameContainer.appendChild(this.matchedExpander);
 
     // Build the style name element
     this.nameNode = doc.createElementNS(HTML_NS, "span");
     this.nameNode.classList.add("computed-property-name", "theme-fg-color3");
+
+    // Give it a heading role for screen readers.
+    this.nameNode.setAttribute("role", "heading");
+
     // Reset its tabindex attribute otherwise, if an ellipsis is applied
     // it will be reachable via TABing
     this.nameNode.setAttribute("tabindex", "");
@@ -1160,6 +1169,10 @@ PropertyView.prototype = {
       this.matchedSelectorsContainer.parentNode.hidden = true;
       this.matchedSelectorsContainer.textContent = "";
       this.matchedExpander.removeAttribute("open");
+      this.matchedExpander.setAttribute(
+        "aria-label",
+        STYLE_INSPECTOR_L10N.getStr("rule.twistyExpand.label")
+      );
       return;
     }
 
@@ -1208,6 +1221,10 @@ PropertyView.prototype = {
 
           this._buildMatchedSelectors();
           this.matchedExpander.setAttribute("open", "");
+          this.matchedExpander.setAttribute(
+            "aria-label",
+            STYLE_INSPECTOR_L10N.getStr("rule.twistyCollapse.label")
+          );
           this.tree.inspector.emit("computed-view-property-expanded");
         })
         .catch(console.error);
@@ -1215,6 +1232,10 @@ PropertyView.prototype = {
 
     this.matchedSelectorsContainer.innerHTML = "";
     this.matchedExpander.removeAttribute("open");
+    this.matchedExpander.setAttribute(
+      "aria-label",
+      STYLE_INSPECTOR_L10N.getStr("rule.twistyExpand.label")
+    );
     this.tree.inspector.emit("computed-view-property-collapsed");
     return promise.resolve(undefined);
   },
@@ -1252,6 +1273,14 @@ PropertyView.prototype = {
         title: selector.statusText,
       });
 
+      // Add an explicit status text span for screen readers.
+      // They won't pick up the title from the status span.
+      createChild(status, "span", {
+        dir: "ltr",
+        class: "visually-hidden",
+        textContent: selector.statusText + " ",
+      });
+
       createChild(status, "div", {
         class: "fix-get-selection",
         textContent: selector.sourceText,

devtools/client/inspector/index.xhtml

@@ -135,7 +135,7 @@
                  data-localization="content=inspector.browserStyles.label"></label>
         </div>
 
-        <div id="computed-container">
+        <div id="computed-container" role="document">
           <div id="computed-container-focusable" tabindex="-1">
             <div id="computed-property-container" class="devtools-monospace" tabindex="0" dir="ltr"></div>
             <div id="computed-no-results" class="devtools-sidepanel-no-result" hidden="" data-localization="content=inspector.noProperties"></div>