Commit 5a032fa5 authored by henry's avatar henry Committed by Pier Angelo Vendrame
Browse files

Customize moz-toggle for tor-browser.

parent 1377e402

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

+18 −1
Original line number Diff line number Diff line
@@ -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() {
@@ -86,6 +90,12 @@ export default class MozToggle extends MozLitElement { 


  buttonTemplate() {

    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;

    return html`

      <button

        id="moz-toggle-button"
@@ -95,6 +105,7 @@ 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

        )}
@@ -104,6 +115,11 @@ export default class MozToggle extends MozLitElement { 
  }



  render() {

    // 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"
@@ -118,11 +134,12 @@ export default class MozToggle extends MozLitElement { 
              for="moz-toggle-button"

              accesskey=${ifDefined(this.accessKey)}

            >

              ${labelAlignAfter ? this.buttonTemplate() : ""}

              <span>

                ${this.label}

                ${!this.description ? this.supportLinkTemplate() : ""}

              </span>

              ${this.buttonTemplate()}

              ${labelAlignAfter ? "" : this.buttonTemplate()}

            </label>

          `

        : this.buttonTemplate()}