Customize moz-toggle for tor-browser.

    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() {

  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"

        ?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()}

    `;

  }