tor-browser

commit cfb3ee7287daca75e9343f1fbf513250d74b5bcc
parent dc4ff7339a8ac466d1cc9c3d5445daf5795c0384
Author: Anna Kulyk <akulyk@mozilla.com>
Date:   Mon, 10 Nov 2025 17:35:42 +0000

Bug 1996748 - Fix margin-top in moz-fieldset when no headingLevel is set r=mstriemer,desktop-theme-reviewers

Differential Revision: https://phabricator.services.mozilla.com/D270357

Diffstat:
M
toolkit/content/tests/widgets/test_moz_fieldset.html
 | 
9
+++++++++
M
toolkit/content/widgets/moz-fieldset/moz-fieldset.css
 | 
6
+++---
M
toolkit/content/widgets/moz-fieldset/moz-fieldset.mjs
 | 
36
++++++++++++++++++++++++++++++++++--

3 files changed, 46 insertions(+), 5 deletions(-)
diff --git a/toolkit/content/tests/widgets/test_moz_fieldset.html b/toolkit/content/tests/widgets/test_moz_fieldset.html
@@ -225,6 +225,10 @@
         fieldset.headingLevel = 7;
         await fieldset.updateComplete;
 
+        ok(
+          !fieldset.hasAttribute("hasheading"),
+          "hasheading attribute isn't set when headingLevel is invalid"
+        );
         is(legendEl.childElementCount, 0, "The legend has no child elements");
         is(legendEl.innerText, "Test label", "The legend text is correct");
 
@@ -239,6 +243,11 @@
           fieldset.headingLevel = i;
           await fieldset.updateComplete;
 
+          ok(
+            fieldset.hasAttribute("hasheading"),
+            "hasheading attribute is set when headingLevel is valid"
+          );
+
           is(legendEl.childElementCount, 1, "The legend has a child");
           is(legendEl.innerText, "Test label", "The legend text is correct");
           headingEl = legendEl.firstElementChild;
diff --git a/toolkit/content/widgets/moz-fieldset/moz-fieldset.css b/toolkit/content/widgets/moz-fieldset/moz-fieldset.css
@@ -68,10 +68,10 @@ h6 {
 
   :is(legend, #description) ~ & {
     margin-top: var(--space-small);
-  }
 
-  :host([headinglevel]) :is(legend, #description) ~ & {
-    margin-top: var(--space-large);
+    :host([hasheading]) & {
+      margin-top: var(--space-large);
+    }
   }
 }
 
diff --git a/toolkit/content/widgets/moz-fieldset/moz-fieldset.mjs b/toolkit/content/widgets/moz-fieldset/moz-fieldset.mjs
@@ -5,7 +5,10 @@
 import { html, ifDefined } from "../vendor/lit.all.mjs";
 import { MozLitElement } from "../lit-utils.mjs";
 
-// Functions to wrap a string in a heading.
+/**
+ * Functions to wrap a string in a heading.
+ * @type {Record<number, (label: string) => ReturnType<typeof html>>}
+ */
 const HEADING_LEVEL_TEMPLATES = {
   1: label => html`<h1>${label}</h1>`,
   2: label => html`<h2>${label}</h2>`,
@@ -33,16 +36,31 @@ export default class MozFieldset extends MozLitElement {
     supportPage: { type: String, attribute: "support-page" },
     ariaLabel: { type: String, fluent: true, mapped: true },
     ariaOrientation: { type: String, mapped: true },
-    headingLevel: { type: Number, reflect: true },
+    headingLevel: { type: Number },
     disabled: { type: Boolean, reflect: true },
     iconSrc: { type: String },
   };
 
   constructor() {
     super();
+
+    /** @type {number} */
     this.headingLevel = -1;
+
+    /** @type {boolean} */
     this.disabled = false;
+
+    /** @type {string} */
     this.iconSrc = "";
+
+    /**@type {string | undefined} */
+    this.label = undefined;
+
+    /**@type {string | undefined} */
+    this.description = undefined;
+
+    /**@type {string | undefined} */
+    this.supportPage = undefined;
   }
 
   updated(changedProperties) {
@@ -50,6 +68,20 @@ export default class MozFieldset extends MozLitElement {
     if (changedProperties.has("disabled")) {
       this.#updateChildDisabledState();
     }
+    if (
+      changedProperties.has("headingLevel") ||
+      changedProperties.has("label")
+    ) {
+      this.toggleAttribute("hasheading", this.hasHeading);
+    }
+  }
+
+  /**
+   * Returns true when the fieldset should render its label as a heading element.
+   * @returns {boolean}
+   */
+  get hasHeading() {
+    return !!this.label && !!HEADING_LEVEL_TEMPLATES[this.headingLevel];
   }
 
   #updateChildDisabledState() {