Bug 1897549 - Use moz-fieldset in moz-radio-group. r=reusable-components-reviewers,desktop-theme-reviewers,dao,mstriemer

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

toolkit/content/jar.mn

@@ -110,7 +110,6 @@ toolkit.jar:
    content/global/elements/moz-message-bar.css    (widgets/moz-message-bar/moz-message-bar.css)
    content/global/elements/moz-message-bar.mjs    (widgets/moz-message-bar/moz-message-bar.mjs)
    content/global/elements/moz-radio.css          (widgets/moz-radio-group/moz-radio.css)
-   content/global/elements/moz-radio-group.css    (widgets/moz-radio-group/moz-radio-group.css)
    content/global/elements/moz-radio-group.mjs    (widgets/moz-radio-group/moz-radio-group.mjs)
    content/global/elements/moz-support-link.mjs    (widgets/moz-support-link/moz-support-link.mjs)
    content/global/elements/moz-toggle.css      (widgets/moz-toggle/moz-toggle.css)

toolkit/content/tests/widgets/test_moz_radio_group.html

@@ -38,14 +38,14 @@
       let { radioGroup, radioButtons } = await renderRadioElements();
 
       is(
-        radioGroup.legend.innerText,
+        radioGroup.fieldset.label,
         "Radio group label",
         "Radio group label text is set."
       );
       radioGroup.label = TEST_LABEL;
       await radioGroup.updateComplete;
       is(
-        radioGroup.legend.innerText,
+        radioGroup.fieldset.label,
         TEST_LABEL,
         "Radio group label text is updated."
       );

toolkit/content/widgets/moz-radio-group/moz-radio-group.css

@@ -1,19 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-@import url("chrome://global/skin/design-system/text-and-typography.css");
-
-fieldset {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-medium);
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-legend {
-  padding: 0;
-  margin-block-end: var(--space-small);
-}

toolkit/content/widgets/moz-radio-group/moz-radio-group.mjs

@@ -6,6 +6,8 @@ import { html } from "../vendor/lit.all.mjs";
 import { MozLitElement } from "../lit-utils.mjs";
 // eslint-disable-next-line import/no-unassigned-import
 import "chrome://global/content/elements/moz-label.mjs";
+// eslint-disable-next-line import/no-unassigned-import
+import "chrome://global/content/elements/moz-fieldset.mjs";
 
 const NAVIGATION_FORWARD = "forward";
 const NAVIGATION_BACKWARD = "backward";
@@ -55,8 +57,7 @@ export class MozRadioGroup extends MozLitElement {
 
   static queries = {
     defaultSlot: "slot:not([name])",
-    fieldset: "fieldset",
-    legend: "legend",
+    fieldset: "moz-fieldset",
   };
 
   set value(newValue) {
@@ -193,17 +194,16 @@ export class MozRadioGroup extends MozLitElement {
 
   render() {
     return html`
-      <link
-        rel="stylesheet"
-        href="chrome://global/content/elements/moz-radio-group.css"
-      />
-      <fieldset role="radiogroup" ?disabled=${this.disabled}>
-        <legend class="heading-medium">${this.label}</legend>
+      <moz-fieldset
+        role="radiogroup"
+        ?disabled=${this.disabled}
+        label=${this.label}
+      >
         <slot
           @slotchange=${this.syncStateToRadioButtons}
           @change=${this.handleChange}
         ></slot>
-      </fieldset>
+      </moz-fieldset>
     `;
   }
 }