From a34001f1ca7243145c0f2049e7250d4b16e6dc9b Mon Sep 17 00:00:00 2001
From: "tom.davies" <thomas.davies@sage.com>
Date: Thu, 3 Sep 2026 15:23:28 +0100
Subject: [PATCH] fix(select): correct markup in option group header

instead of rendering the option group header label as a h4 we now render a span instead. This
adheres with proper HTML semantics and resolves an axe issue. Some additional styling has also been
added to make sure there is no visual regression

fix #8157
---
 skills/carbon-react/components/select.md               |  6 +++---
 .../option-group-header.component.tsx                  |  2 +-
 .../option-group-header/option-group-header.style.ts   |  3 ++-
 .../option-group-header/option-group-header.test.tsx   |  2 +-
 .../select/simple-select/components.test-pw.tsx        |  1 +
 src/components/select/simple-select/simple-select.mdx  |  3 ++-
 .../select/simple-select/simple-select.pw.tsx          | 10 ++++++++++
 .../select/simple-select/simple-select.stories.tsx     |  6 +++---
 8 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/skills/carbon-react/components/select.md b/skills/carbon-react/components/select.md
index 575cda16d1..e4f25515c6 100644
--- a/skills/carbon-react/components/select.md
+++ b/skills/carbon-react/components/select.md
@@ -836,20 +836,20 @@ No props metadata found.
         onChange={(ev) => setValue(ev.target.value)}
       >
         <OptionGroupHeader>
-          <Icon type="individual" /> <h4>Group One Composed</h4>
+          <Icon type="individual" /> <span>Group One Composed</span>
         </OptionGroupHeader>
         <Option text="Amber" value="1" />
         <Option text="Black" value="2" />
         <Option text="Blue" value="3" />
         <Option text="Brown" value="4" />
         <OptionGroupHeader>
-          <Icon type="shop" /> <h4>Group Two Composed</h4>
+          <Icon type="shop" /> <span>Group Two Composed</span>
         </OptionGroupHeader>
         <Option text="Green" value="5" />
         <Option text="Orange" value="6" />
         <Option text="Pink" value="7" />
         <OptionGroupHeader>
-          <h4>Group Three Composed</h4>
+          <span>Group Three Composed</span>
         </OptionGroupHeader>
         <Option text="Purple" value="8" />
         <Option text="Red" value="9" />
diff --git a/src/components/select/option-group-header/option-group-header.component.tsx b/src/components/select/option-group-header/option-group-header.component.tsx
index ca7dd63380..671428020b 100644
--- a/src/components/select/option-group-header/option-group-header.component.tsx
+++ b/src/components/select/option-group-header/option-group-header.component.tsx
@@ -52,7 +52,7 @@ const OptionGroupHeader = React.forwardRef(
         {children || (
           <>
             {icon && <Icon type={icon} />}
-            <h4>{label}</h4>
+            <span data-role="option-group-header-label">{label}</span>
           </>
         )}
       </StyledOptionGroupHeader>
diff --git a/src/components/select/option-group-header/option-group-header.style.ts b/src/components/select/option-group-header/option-group-header.style.ts
index b7caf38fbc..71d7d749c5 100644
--- a/src/components/select/option-group-header/option-group-header.style.ts
+++ b/src/components/select/option-group-header/option-group-header.style.ts
@@ -11,7 +11,8 @@ const StyledOptionGroupHeader = styled.div`
   align-items: center;
   width: 100%;
 
-  h4 {
+  span:not(${StyledIcon}) {
+    font-weight: 500;
     font-size: 12px;
     text-transform: uppercase;
     line-height: 18px;
diff --git a/src/components/select/option-group-header/option-group-header.test.tsx b/src/components/select/option-group-header/option-group-header.test.tsx
index 1e75c86450..d50d94a04d 100644
--- a/src/components/select/option-group-header/option-group-header.test.tsx
+++ b/src/components/select/option-group-header/option-group-header.test.tsx
@@ -5,7 +5,7 @@ import OptionGroupHeader from ".";
 test("should render the `label` and `icon` when no children are provided", () => {
   render(<OptionGroupHeader label="foo" icon="shop" />);
 
-  expect(screen.getByRole("heading", { name: "foo", level: 4 })).toBeVisible();
+  expect(screen.getByTestId("option-group-header-label")).toBeVisible();
   expect(screen.getByTestId("icon")).toBeVisible();
 });
 
diff --git a/src/components/select/simple-select/components.test-pw.tsx b/src/components/select/simple-select/components.test-pw.tsx
index 72da9d1818..9592d6761a 100644
--- a/src/components/select/simple-select/components.test-pw.tsx
+++ b/src/components/select/simple-select/components.test-pw.tsx
@@ -238,6 +238,7 @@ export const SelectWithOptionGroupHeader = () => {
   return (
     <Box p={10}>
       <Select
+        label="with option group header"
         placeholder="Scroll does not reach the last option"
         value={value}
         onChange={onChangeHandler}
diff --git a/src/components/select/simple-select/simple-select.mdx b/src/components/select/simple-select/simple-select.mdx
index d6231524e7..7777aad4a3 100644
--- a/src/components/select/simple-select/simple-select.mdx
+++ b/src/components/select/simple-select/simple-select.mdx
@@ -139,7 +139,8 @@ The `text` value will be used as the displayed value in the input field when sel
 
 It is also possible to use the `children` prop to pass a composed layout to the
 `OptionGroupHeader`. It should be noted it will override any values passed to the
-`icon` and `label` props.
+`icon` and `label` props. When using the `children` prop, it is recommended to 
+wrap any text in a `<span>` element which will apply the specific styling defined for the `OptionGroupHeader`.
 
 <Canvas of={SimpleSelectStories.OptionGroupsWithComposedChildren} />
 
diff --git a/src/components/select/simple-select/simple-select.pw.tsx b/src/components/select/simple-select/simple-select.pw.tsx
index c2e6ea789a..47ec0d06bf 100644
--- a/src/components/select/simple-select/simple-select.pw.tsx
+++ b/src/components/select/simple-select/simple-select.pw.tsx
@@ -681,6 +681,16 @@ test.describe("Accessibility tests for SimpleSelect component", () => {
     await checkAccessibility(page, undefined, "scrollable-region-focusable");
   });
 
+  test("should pass accessibility tests with option group headers", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<SelectWithOptionGroupHeader />);
+
+    await dropdownButton(page).click();
+    await checkAccessibility(page, undefined, "color-contrast");
+  });
+
   test("should pass accessibility tests when nested in a dialog", async ({
     mount,
     page,
diff --git a/src/components/select/simple-select/simple-select.stories.tsx b/src/components/select/simple-select/simple-select.stories.tsx
index 5e5df0addf..3ec30ca5b7 100644
--- a/src/components/select/simple-select/simple-select.stories.tsx
+++ b/src/components/select/simple-select/simple-select.stories.tsx
@@ -744,20 +744,20 @@ export const OptionGroupsWithComposedChildren: Story = () => {
         onChange={(ev) => setValue(ev.target.value)}
       >
         <OptionGroupHeader>
-          <Icon type="individual" /> <h4>Group One Composed</h4>
+          <Icon type="individual" /> <span>Group One Composed</span>
         </OptionGroupHeader>
         <Option text="Amber" value="1" />
         <Option text="Black" value="2" />
         <Option text="Blue" value="3" />
         <Option text="Brown" value="4" />
         <OptionGroupHeader>
-          <Icon type="shop" /> <h4>Group Two Composed</h4>
+          <Icon type="shop" /> <span>Group Two Composed</span>
         </OptionGroupHeader>
         <Option text="Green" value="5" />
         <Option text="Orange" value="6" />
         <Option text="Pink" value="7" />
         <OptionGroupHeader>
-          <h4>Group Three Composed</h4>
+          <span>Group Three Composed</span>
         </OptionGroupHeader>
         <Option text="Purple" value="8" />
         <Option text="Red" value="9" />