From d1ff39e88502b5af625ac77868f1864550c03ec8 Mon Sep 17 00:00:00 2001
From: Tim Giles <tgiles@mozilla.com>
Date: Wed, 26 Jun 2024 20:03:04 +0000
Subject: [PATCH] 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                        |  1 -
 .../tests/widgets/test_moz_radio_group.html   |  4 ++--
 .../moz-radio-group/moz-radio-group.css       | 19 -------------------
 .../moz-radio-group/moz-radio-group.mjs       | 18 +++++++++---------
 4 files changed, 11 insertions(+), 31 deletions(-)
 delete mode 100644 toolkit/content/widgets/moz-radio-group/moz-radio-group.css

diff --git a/toolkit/content/jar.mn b/toolkit/content/jar.mn
index dcdc237d626f..2dedc0ffdef1 100644
--- a/toolkit/content/jar.mn
+++ b/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)
diff --git a/toolkit/content/tests/widgets/test_moz_radio_group.html b/toolkit/content/tests/widgets/test_moz_radio_group.html
index 661b7f4f6062..40d6d8e77c17 100644
--- a/toolkit/content/tests/widgets/test_moz_radio_group.html
+++ b/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."
       );
diff --git a/toolkit/content/widgets/moz-radio-group/moz-radio-group.css b/toolkit/content/widgets/moz-radio-group/moz-radio-group.css
deleted file mode 100644
index 8b3469e6db3c..000000000000
--- a/toolkit/content/widgets/moz-radio-group/moz-radio-group.css
+++ /dev/null
@@ -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);
-}
diff --git a/toolkit/content/widgets/moz-radio-group/moz-radio-group.mjs b/toolkit/content/widgets/moz-radio-group/moz-radio-group.mjs
index 3b6e56d5346f..f33981dae3a6 100644
--- a/toolkit/content/widgets/moz-radio-group/moz-radio-group.mjs
+++ b/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>
     `;
   }
 }