Bug 1506382 - Make the new "about:config" page more easily navigable with accessibility technology. r=Jamie,flod

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

--HG--
extra : rebase_source : ce4e4a18b019d825c9bd32e52c1109337503c5fa

browser/components/aboutconfig/content/aboutconfig.css

@@ -70,16 +70,19 @@ body.config-warning {
   background-size: 16px 16px;
 }
 
-#prefs > tr > td {
+#prefs > tr > td,
+#prefs > tr > th {
   padding: 4px;
   width: 50%;
+  font-weight: inherit;
 }
 
-#prefs > tr > td.cell-name {
+#prefs > tr > th {
+  text-align: unset;
   padding-inline-start: 30px;
 }
 
-#prefs > tr.deleted > td.cell-name {
+#prefs > tr.deleted > th {
   font-weight: bold;
   opacity: 0.4;
 }

browser/components/aboutconfig/content/aboutconfig.js

@@ -90,7 +90,7 @@ class PrefRow {
 
   _setupElement() {
     this.element.textContent = "";
-    let nameCell = document.createElement("td");
+    let nameCell = document.createElement("th");
     this.element.append(
       nameCell,
       this.valueCell = document.createElement("td"),
@@ -102,7 +102,7 @@ class PrefRow {
     );
     delete this.resetButton;
 
-    nameCell.className = "cell-name";
+    nameCell.setAttribute("scope", "row");
     this.valueCell.className = "cell-value";
     this.editCell.className = "cell-edit";
 
@@ -125,8 +125,18 @@ class PrefRow {
       // text copied to the clipboard includes all whitespace.
       let span = document.createElement("span");
       span.textContent = this.value;
+      // We additionally need to wrap this with another "span" element to convey
+      // the state to screen readers without affecting the visual presentation.
+      span.setAttribute("aria-hidden", "true");
+      let outerSpan = document.createElement("span");
+      let spanL10nId = this.hasUserValue
+                       ? "about-config-pref-accessible-value-custom"
+                       : "about-config-pref-accessible-value-default";
+      document.l10n.setAttributes(outerSpan, spanL10nId,
+                                  { value: "" + this.value });
+      outerSpan.appendChild(span);
       this.valueCell.textContent = "";
-      this.valueCell.append(span);
+      this.valueCell.append(outerSpan);
       if (this.type == "Boolean") {
         document.l10n.setAttributes(this.editButton, "about-config-pref-toggle");
         this.editButton.className = "button-toggle";

browser/components/aboutconfig/content/aboutconfig.notftl

@@ -19,3 +19,14 @@ about-config-pref-edit = Edit
 about-config-pref-save = Save
 about-config-pref-reset = Reset
 about-config-pref-delete = Delete
+
+## Preferences with a non-default value are differentiated visually, and at the
+## same time the state is made accessible to screen readers using an aria-label
+## that won't be visible or copied to the clipboard.
+##
+## Variables:
+##   $value (String): The full value of the preference.
+about-config-pref-accessible-value-default =
+    .aria-label = { $value } (default)
+about-config-pref-accessible-value-custom =
+    .aria-label = { $value } (custom)

browser/components/aboutconfig/test/browser/browser.ini

@@ -3,6 +3,7 @@ skip-if = asan # Bug 1520398
 support-files =
   head.js
 
+[browser_accessibility.js]
 [browser_basic.js]
 [browser_clipboard.js]
 skip-if = debug # Bug 1507747

browser/components/aboutconfig/test/browser/browser_accessibility.js

@@ -0,0 +1,26 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+add_task(async function setup() {
+  await SpecialPowers.pushPrefEnv({
+    set: [
+      ["test.aboutconfig.added", true],
+    ],
+  });
+});
+
+add_task(async function test_accessible_value() {
+  await AboutConfigTest.withNewTab(async function() {
+    for (let [name, expectHasUserValue] of [
+      [PREF_BOOLEAN_DEFAULT_TRUE, false],
+      [PREF_BOOLEAN_USERVALUE_TRUE, true],
+      ["test.aboutconfig.added", true],
+    ]) {
+      let span = this.getRow(name).valueCell.querySelector("span");
+      let expectedL10nId = expectHasUserValue
+          ? "about-config-pref-accessible-value-custom"
+          : "about-config-pref-accessible-value-default";
+      Assert.equal(span.getAttribute("data-l10n-id"), expectedL10nId);
+    }
+  });
+});

browser/components/aboutconfig/test/browser/head.js

@@ -34,7 +34,7 @@ class AboutConfigRowTest {
   }
 
   get nameCell() {
-    return this.querySelector("td");
+    return this.querySelector("th");
   }
 
   get name() {