Select + Grouped Options - Critical AXE issue: ARIA roles contain invalid children

[justin-rankin]

Description

For Carbon Select dropdown menu with grouped Options: AXE DevTools correctly displays what is flagged as a critical accessibility issue:

"Certain ARIA roles must contain particular children"

---

This critical issue is being caused by Carbon's rendering of the <h4> tag in the DOM, as a sibling to of the list of (correct) <li> node, that are the only valid children of the parent <ul> tag...

<ul>
  <h4>Group - A</h4> <!--- 👈🏼 invalid child DOM node --> 
  <li>Option A1</li>
  <li>Option A2</li>
  <li>Option A3</li>
  <h4>Group - B</h4> <!--- 👈🏼 invalid child DOM node --> 
  <li>Option B1</li>
  <li>Option B2</li>
  <li>Option b3</li>
</ul>

---

Even if <h4> is wrapped inside of a <li> tag, AXE still gives an accessibility warning about semantical order of the heading <h1...h5 /> tags, though the warning level which is no longer critical.

---

Reproduction

https://carbon.sage.com/?path=/docs/select--docs#option-groups

Steps to reproduce

This is produced simply by using the documented <OptionGroupHeader /> component among the array of <Option /> components, when implementing the <Select />, which purpose is to visually and group options via a bold non-option, non-clickable heading..

JIRA ticket numbers (Sage only)

SBS-92771

Suggested solution

In order to avoid this AXE warning, perhaps the <OptionGroupHeader /> component could:

• wrap the heading in a <li> tag, to ensure all direct children of <ui> are correctly <li>
• for the heading text, using a strong, heavier weight without actually using <h4> to avoid the semantic ordering issue (check accessibility guidelines for this)

Carbon version

v134.0.0 (latest, and older versions)

Design tokens version

No response

Relevant browsers

Firefox, Chrome, Safari, Microsoft Edge

Relevant OSs

MacOS, Windows, Linux

Additional context

No response

Confidentiality

• [X] I confirm there is no confidential or commercially sensitive information included.

[nineteen88]

FE-6571

[DipperTheDan]

I'll be addressing this as part of the work in ticket FE-6285.