fix(select): correct markup in option group header

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" />

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>

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;

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();
 });
 

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}

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} />
 

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,

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" />