Customize moz-toggle for tor-browser.

toolkit/content/widgets/moz-toggle/moz-toggle.mjs

@@ -34,6 +34,10 @@ export default class MozToggle extends MozLitElement {
     description: { type: String },
     ariaLabel: { type: String, attribute: "aria-label" },
     accessKey: { type: String, attribute: "accesskey" },
+    // Extension for tor-browser. Used for tor-browser#41333.
+    title: { type: String, attribute: "title" },
+    // Extension for tor-browser. Used for tor-browser#40837.
+    labelAlignAfter: { type: Boolean, attribute: "label-align-after" },
   };
 
   static get queries() {
@@ -111,9 +115,19 @@ export default class MozToggle extends MozLitElement {
 
   render() {
     const { pressed, disabled, description, ariaLabel, handleClick } = this;
+    // For tor-browser, if we have a title we use it as the aria-description.
+    // Used for tor-browser#41333.
+    // Only set the description using the title if it differs from the
+    // accessible name derived from the label.
+    const label = ariaLabel || this.label;
+    const ariaDescription = label === this.title ? undefined : this.title;
+    // For tor-browser, we want to be able to place the label after the toggle
+    // as well.
+    // Used for the enable-bridges switch tor-browser#40837.
+    const labelAlignAfter = this.labelAlignAfter;
     return html`
       <link rel="stylesheet" href=${this.constructor.stylesheetUrl} />
-      ${this.labelTemplate()}
+      ${labelAlignAfter ? "" : this.labelTemplate()}
       <button
         id="moz-toggle-button"
         part="button"
@@ -122,11 +136,13 @@ export default class MozToggle extends MozLitElement {
         ?disabled=${disabled}
         aria-pressed=${pressed}
         aria-label=${ifDefined(ariaLabel ?? undefined)}
+        aria-description=${ifDefined(ariaDescription ?? undefined)}
         aria-describedby=${ifDefined(
           description ? "moz-toggle-description" : undefined
         )}
         @click=${handleClick}
       ></button>
+      ${labelAlignAfter ? this.labelTemplate() : ""}
       ${this.descriptionTemplate()}
     `;
   }