Commit 2a72140f authored by henry's avatar henry Committed by morgan
Browse files

TB 45143: Modify moz-fieldset.

parent d064e421

toolkit/content/widgets/moz-fieldset/moz-fieldset.css

+4 −0
Original line number Diff line number Diff line
@@ -46,6 +46,10 @@ h4, 
h5,

h6 {

  margin: 0;



  &[tabindex]:focus-visible {

    outline-offset: var(--focus-outline-offset);

  }

}



.description {

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

+35 −7
Original line number Diff line number Diff line
@@ -11,12 +11,24 @@ import { MozLitElement } from "../lit-utils.mjs"; 
 * @type {Record<number, (label: string) => ReturnType<typeof html>>}

 */

const HEADING_LEVEL_TEMPLATES = {

  1: label => html`<h1 class="text-box-trim-start">${label}</h1>`,

  2: label => html`<h2 class="text-box-trim-start">${label}</h2>`,

  3: label => html`<h3 class="text-box-trim-start">${label}</h3>`,

  4: label => html`<h4>${label}</h4>`,

  5: label => html`<h5>${label}</h5>`,

  6: label => html`<h6>${label}</h6>`,

  1: (label, tabindex) =>

    html`<h1 class="text-box-trim-start" tabindex=${ifDefined(tabindex)}>

      ${label}

    </h1>`,

  2: (label, tabindex) =>

    html`<h2 class="text-box-trim-start" tabindex=${ifDefined(tabindex)}>

      ${label}

    </h2>`,

  3: (label, tabindex) =>

    html`<h3 class="text-box-trim-start" tabindex=${ifDefined(tabindex)}>

      ${label}

    </h3>`,

  4: (label, tabindex) =>

    html`<h4 tabindex=${ifDefined(tabindex)}>${label}</h4>`,

  5: (label, tabindex) =>

    html`<h5 tabindex=${ifDefined(tabindex)}>${label}</h5>`,

  6: (label, tabindex) =>

    html`<h6 tabindex=${ifDefined(tabindex)}>${label}</h6>`,

};



/**
@@ -42,6 +54,9 @@ export default class MozFieldset extends MozLitElement { 
    disabled: { type: Boolean, reflect: true },

    iconSrc: { type: String },

    badge: { type: String },

    // Allows the heading to be focusable, but not part of the Tab focus cycle.

    // See tor-browser#45143.

    focusableHeading: { type: Boolean, attribute: "focusable-heading" },

  };



  constructor() {
@@ -132,12 +147,25 @@ export default class MozFieldset extends MozLitElement { 


  legendTemplate() {

    let label =

      HEADING_LEVEL_TEMPLATES[this.headingLevel]?.(this.label) || this.label;

      HEADING_LEVEL_TEMPLATES[this.headingLevel]?.(

        this.label,

        this.focusableHeading ? "-1" : undefined

      ) || this.label;

    return html`<legend part="label">

      ${this.iconTemplate()}${label}${this.badgeTemplate()}

    </legend>`;

  }



  /**

   * Move the user's focus to the heading, if it is focusable.

   */

  focusHeading() {

    if (!this.focusableHeading) {

      return;

    }

    this.shadowRoot.querySelector("h1,h2,h3,h4,h5,h6")?.focus();

  }



  iconTemplate() {

    if (!this.iconSrc) {

      return "";