fix(select): correct markup in option group header

[tomdavies73]

fix #8157

Proposed behaviour

Iinstead 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.

Current behaviour

The option group header label renders as a h4 . This does not adhere with proper HTML semantics and results in an axe issue.

Checklist

• Commits follow our style guide
• Related issues linked in commit messages if required
• Screenshots are included in the PR if useful
• All themes are supported if required
• Unit tests added or updated if required
• Playwright automation tests added or updated if required
• Storybook added or updated if required
• Translations added or updated (including creating or amending translation keys table in storybook) if required
• Typescript d.ts file added or updated if required
• Related docs have been updated if required

QA

• Tested in provided StackBlitz sandbox/Storybook
• Add new Playwright test coverage if required
• Carbon implementation matches Design System/designs
• UI Tests GitHub check reviewed if required

Additional context

Testing instructions

Open a story which includes an option group header on this PR and on master. Open the dropdown and run axe dev tools, on master this will result in a failure due to incorrect children, on this PR it will not.