Customize moz-toggle for tor-browser.

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

@@ -25,6 +25,10 @@ export default class MozToggle extends MozBaseInputElement {
   static properties = {
     ariaLabel: { type: String, mapped: true },
     pressed: { type: Boolean, reflect: true },
+    // 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" },
   };
 
   get buttonEl() {
@@ -48,6 +52,12 @@ export default class MozToggle extends MozBaseInputElement {
 
   inputTemplate() {
     const { pressed, disabled, 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;
     return html`<button
       id="input"
       part="button"
@@ -58,6 +68,7 @@ export default class MozToggle extends MozBaseInputElement {
       ?disabled=${disabled}
       aria-pressed=${pressed}
       aria-label=${ifDefined(ariaLabel ?? undefined)}
+      aria-description=${ifDefined(ariaDescription ?? undefined)}
       aria-describedby="description"
       accesskey=${ifDefined(this.accessKey)}
       @click=${handleClick}