tor-browser

commit e4ed992a475e14d3711aa438c0a197b1159851e4
parent c48418f1b78042a73feedf5df747028fb4f036de
Author: Henry Wilkes <henry@torproject.org>
Date:   Wed, 23 Aug 2023 17:33:46 +0100

Customize moz-toggle for tor-browser.

Diffstat:
M
toolkit/content/widgets/lit-utils.mjs
 | 
8
++++++--
M
toolkit/content/widgets/moz-input-common.css
 | 
10
+++++++++-
M
toolkit/content/widgets/moz-toggle/moz-toggle.mjs
 | 
22
+++++++++++++++++++---

3 files changed, 34 insertions(+), 6 deletions(-)
diff --git a/toolkit/content/widgets/lit-utils.mjs b/toolkit/content/widgets/lit-utils.mjs
@@ -262,6 +262,9 @@ export class MozBaseInputElement extends MozLitElement {
     parentDisabled: { type: Boolean, state: true },
     ariaLabel: { type: String, mapped: true },
     ariaDescription: { type: String, mapped: true },
+    // label-align-before is a customisation for the moz-toggle in about:tor.
+    // See tor-browser#43727.
+    labelAlignBefore: { type: Boolean, attribute: "label-align-before" },
   };
   /** @type {"inline" | "block"} */
   static inputLayout = "inline";
@@ -448,9 +451,10 @@ export class MozBaseInputElement extends MozLitElement {
           part="label"
           for="input"
           shownaccesskey=${ifDefined(this.accessKey)}
-          >${this.isInlineLayout
+          >${this.labelAlignBefore ? this.labelTemplate() : ""}${this
+            .isInlineLayout
             ? this.inputTemplate()
-            : ""}${this.labelTemplate()}</label
+            : ""}${this.labelAlignBefore ? "" : this.labelTemplate()}</label
         >${this.hasDescription ? "" : this.supportLinkTemplate()}
       </span>
       ${this.descriptionTemplate()}
diff --git a/toolkit/content/widgets/moz-input-common.css b/toolkit/content/widgets/moz-input-common.css
@@ -12,6 +12,7 @@
     --input-margin-block-adjust: calc((1lh - var(--input-height)) / 2);
     --icon-margin-block-adjust: calc((1lh - var(--icon-size)) / 2);
     --input-margin-inline-start-adjust: calc(-1 * var(--input-space-offset));
+    --input-margin-inline-adjust: var(--input-margin-inline-start-adjust) var(--space-small);
   }
 
   :host(:not(:state(has-label))) {
@@ -35,6 +36,13 @@
     display: inline-block;
   }
 
+  :host([label-align-before]) {
+    /* The label is before the input, so we need the input to only have a
+     * starting gap between it and the label. */
+    --input-space-offset: 0;
+    --input-margin-inline-adjust: var(--space-small) 0;
+  }
+
   @media (forced-colors) {
     :host(:state(disabled)) {
       color: GrayText;
@@ -82,7 +90,7 @@
     line-height: inherit;
     vertical-align: top;
     margin-block: var(--input-margin-block-adjust);
-    margin-inline: var(--input-margin-inline-start-adjust) var(--space-small);
+    margin-inline: var(--input-margin-inline-adjust);
 
     :host(:not(:state(has-label))) & {
       margin-inline-end: 0;
diff --git a/toolkit/content/widgets/moz-toggle/moz-toggle.mjs b/toolkit/content/widgets/moz-toggle/moz-toggle.mjs
@@ -24,6 +24,8 @@ import "chrome://global/content/elements/moz-label.mjs";
 export default class MozToggle extends MozBaseInputElement {
   static properties = {
     pressed: { type: Boolean, reflect: true },
+    // Extension for tor-browser. Used for tor-browser#41333.
+    title: { type: String, attribute: "title" },
   };
 
   static activatedProperty = "pressed";
@@ -49,6 +51,22 @@ export default class MozToggle extends MozBaseInputElement {
 
   inputTemplate() {
     const { pressed, disabled, ariaLabel, handleClick } = this;
+    let ariaDescription = undefined;
+    if (!this.hasDescription) {
+      ariaDescription = this.ariaDescription;
+      if (
+        !ariaDescription &&
+        this.title &&
+        this.title !== (ariaLabel || this.label)
+      ) {
+        // 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 (ariaLabel || this.label).
+        ariaDescription = this.title;
+      }
+    }
+
     return html`<button
       id="input"
       part="button"
@@ -60,9 +78,7 @@ export default class MozToggle extends MozBaseInputElement {
       aria-pressed=${pressed}
       aria-label=${ifDefined(ariaLabel ?? undefined)}
       aria-describedby="description"
-      aria-description=${ifDefined(
-        this.hasDescription ? undefined : this.ariaDescription
-      )}
+      aria-description=${ifDefined(ariaDescription)}
       accesskey=${ifDefined(this.accessKey)}
       @click=${handleClick}
     ></button>`;