fixup! Bug 31286: Implementation of bridge, proxy, and firewall settings in...

fixup! Bug 31286: Implementation of bridge, proxy, and firewall settings in about:preferences#connection

Bug 42446: Improve accessible description of built-in radio options.

browser/components/torpreferences/content/builtinBridgeDialog.js

@@ -57,18 +57,27 @@ const gBuiltinBridgeDialog = {
       const type = radio.value;
       optionEl.hidden = !TorSettings.builtinBridgeTypes.includes(type);
       radio.label = typeStrings[type].label;
-      optionEl.querySelector(
+      const descriptionEl = optionEl.querySelector(
         ".builtin-bridges-option-description"
-      ).textContent = typeStrings[type].descr;
-      optionEl.querySelector(
+      );
+      descriptionEl.textContent = typeStrings[type].descr;
+      const currentBadge = optionEl.querySelector(".bridge-status-badge");
+      if (type === currentBuiltinType) {
+        const currentLabelEl = optionEl.querySelector(
           ".torPreferences-current-bridge-label"
-      ).textContent = TorStrings.settings.currentBridge;
-      optionEl
-        .querySelector(".bridge-status-badge")
-        .classList.toggle(
-          "bridge-status-current-built-in",
-          type === currentBuiltinType
         );
+        // Described by both the current badge and the full description.
+        // These will be concatenated together in the screen reader output.
+        radio.setAttribute(
+          "aria-describedby",
+          `${currentLabelEl.id} ${descriptionEl.id}`
+        );
+        // Make visible.
+        currentBadge.classList.add("bridge-status-current-built-in");
+      } else {
+        // No visible badge.
+        radio.setAttribute("aria-describedby", descriptionEl.id);
+      }
     }
 
     if (currentBuiltinType) {

browser/components/torpreferences/content/builtinBridgeDialog.xhtml

@@ -9,6 +9,10 @@
   xmlns:html="http://www.w3.org/1999/xhtml"
 >
   <dialog id="torPreferences-builtinBridge-dialog" buttons="accept,cancel">
+    <linkset>
+      <html:link rel="localization" href="browser/tor-browser.ftl" />
+    </linkset>
+
     <script src="chrome://browser/content/torpreferences/builtinBridgeDialog.js" />
 
     <description id="torPreferences-builtinBridge-description"> </description>
@@ -18,15 +22,13 @@
           <!-- The radio option is described by both the "Current bridge" label
           - and the full description. If the "Connected" label is hidden, then
            - only the latter description should contribute. -->
-          <radio
-            aria-describedby="obfs-bridges-current obfs-bridges-description"
-            value="obfs4"
-          />
+          <radio value="obfs4" />
           <html:span class="bridge-status-badge">
             <html:div class="bridge-status-icon"></html:div>
             <html:span
               id="obfs-bridges-current"
               class="torPreferences-current-bridge-label"
+              data-l10n-id="built-in-dialog-current-bridge-label"
             >
             </html:span>
           </html:span>
@@ -39,15 +41,13 @@
       </vbox>
       <vbox class="builtin-bridges-option">
         <hbox>
-          <radio
-            aria-describedby="snowflake-bridges-current snowflake-bridges-description"
-            value="snowflake"
-          />
+          <radio value="snowflake" />
           <html:span class="bridge-status-badge">
             <html:div class="bridge-status-icon"></html:div>
             <html:span
               id="snowflake-bridges-current"
               class="torPreferences-current-bridge-label"
+              data-l10n-id="built-in-dialog-current-bridge-label"
             >
             </html:span>
           </html:span>
@@ -60,15 +60,13 @@
       </vbox>
       <vbox class="builtin-bridges-option">
         <hbox>
-          <radio
-            aria-describedby="meek-bridges-current meek-bridges-description"
-            value="meek-azure"
-          />
+          <radio value="meek-azure" />
           <html:span class="bridge-status-badge">
             <html:div class="bridge-status-icon"></html:div>
             <html:span
               id="meek-bridges-current"
               class="torPreferences-current-bridge-label"
+              data-l10n-id="built-in-dialog-current-bridge-label"
             >
             </html:span>
           </html:span>