fix(ChoiceGroup): the label now renders as a div by default

It was rendering as an h4, causing problems with heading hierarchies
kiwicom · Feb 27, 2025 · e7119b9 · e7119b9
1 parent 86a167f
commit e7119b9
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 20 deletions.
diff --git a/packages/orbit-components/src/ChoiceGroup/ChoiceGroup.stories.tsx b/packages/orbit-components/src/ChoiceGroup/ChoiceGroup.stories.tsx
@@ -30,7 +30,6 @@ const meta: Meta<ChoiceGroupPropsAndCustomArgs> = {
     label: "What was the reason for your cancellation?",
     onlySelectionText: "Only",
     labelSize: LABEL_SIZES.NORMAL,
-    labelAs: LABEL_ELEMENTS.H4,
     error: "",
     filter: false,
     onChange: action("onChange"),
@@ -59,9 +58,9 @@ type Story = StoryObj<ChoiceGroupPropsAndCustomArgs>;
 export const Default: Story = {
   render: args => (
     <ChoiceGroup {...args}>
-      <Radio label="Reason one" value="one" />
-      <Radio label="Reason two" value="two" />
-      <Radio label="Reason three" value="three" />
+      <Radio name="reason" label="Reason one" value="one" />
+      <Radio name="reason" label="Reason two" value="two" />
+      <Radio name="reason" label="Reason three" value="three" />
     </ChoiceGroup>
   ),
 
@@ -104,9 +103,9 @@ export const Filter: Story = {
 export const WithError: Story = {
   render: args => (
     <ChoiceGroup {...args}>
-      <Radio label="Reason one" value="one" />
-      <Radio label="Reason two" value="two" />
-      <Radio label="Reason three" value="three" />
+      <Radio name="reason" label="Reason one" value="one" />
+      <Radio name="reason" label="Reason two" value="two" />
+      <Radio name="reason" label="Reason three" value="three" />
     </ChoiceGroup>
   ),
 
@@ -153,7 +152,7 @@ export const RenderProp: Story = {
               }}
             >
               <Item>
-                <Radio label={`Option ${index}`} value={index} />
+                <Radio name="reason" label={`Option ${index}`} value={index} />
               </Item>
             </div>
           )}
@@ -176,9 +175,9 @@ export const RenderProp: Story = {
 export const Playground: Story = {
   render: args => (
     <ChoiceGroup {...args}>
-      <Radio label="Reason one" value="one" />
-      <Radio label="Reason two" value="two" />
-      <Radio label="Reason three" value="three" />
+      <Radio name="reason" label="Reason one" value="one" />
+      <Radio name="reason" label="Reason two" value="two" />
+      <Radio name="reason" label="Reason three" value="three" />
     </ChoiceGroup>
   ),
 
@@ -191,9 +190,9 @@ export const Rtl: Story = {
   render: args => (
     <RenderInRtl>
       <ChoiceGroup {...args}>
-        <Radio label="Reason one" value="one" />
-        <Radio label="Reason two" value="two" />
-        <Radio label="Reason three" value="three" />
+        <Radio name="reason" label="Reason one" value="one" />
+        <Radio name="reason" label="Reason two" value="two" />
+        <Radio name="reason" label="Reason three" value="three" />
       </ChoiceGroup>
     </RenderInRtl>
   ),

diff --git a/packages/orbit-components/src/ChoiceGroup/index.tsx b/packages/orbit-components/src/ChoiceGroup/index.tsx
@@ -6,7 +6,7 @@ import cx from "clsx";
 import Heading from "../Heading";
 import type { Type } from "../Heading/types";
 import Stack from "../Stack";
-import { LABEL_SIZES, LABEL_ELEMENTS } from "./consts";
+import { LABEL_SIZES } from "./consts";
 import Feedback from "./components/Feedback";
 import FilterWrapper from "./components/FilterWrapper";
 import useRandomId from "../hooks/useRandomId";
@@ -45,7 +45,7 @@ const ChoiceGroup = React.forwardRef<HTMLDivElement, Props>(
       id,
       label,
       labelSize = LABEL_SIZES.NORMAL,
-      labelAs = LABEL_ELEMENTS.H4,
+      labelAs = "div",
       error,
       children,
       filter,
@@ -82,14 +82,18 @@ const ChoiceGroup = React.forwardRef<HTMLDivElement, Props>(
         )}
       >
         {label && (
-          <Heading id={groupID} type={getHeadingSize(labelSize)} as={labelAs} spaceAfter="medium">
+          <Heading
+            id={groupID}
+            type={getHeadingSize(labelSize)}
+            as={labelAs}
+            role={undefined}
+            spaceAfter="medium"
+          >
             {label}
           </Heading>
         )}
         {typeof children === "function" ? (
           children({
-            // for now a plain <div> is all we need, but we're reserving this space in the API
-            // in case we'll need something more in the future
             Container: "div",
             Item: ItemContainer({ filter, onOnlySelection, onlySelectionText, itemProps }),
             spacing: filter ? "0px" : theme.orbit.space200,

diff --git a/packages/orbit-components/src/ChoiceGroup/types.d.ts b/packages/orbit-components/src/ChoiceGroup/types.d.ts
@@ -6,7 +6,7 @@ import type * as React from "react";
 import type * as Common from "../common/types";
 
 export type Size = "normal" | "large";
-type Element = "h2" | "h3" | "h4" | "h5" | "h6";
+type Element = "h2" | "h3" | "h4" | "h5" | "h6" | "div";
 
 export interface Props extends Common.Globals {
   readonly children: