Accessability Violation : The element with role "button" contains descendants with roles "menu" which are ignored by browsers

[Thejashwini123]

[Akshat55]

@Thejashwini123

I cannot merge your PR without more context, you need to provide more information than just the accessibility issue. What are you creating?

There are only 2 components in CCA that have role="button"; fileuploader & combobox. Neither of which contain descendants with role menu.

[Thejashwini123]

Hi Akshat,

Thanks for the feedback!

I’m contributing this fix based on an accessibility violation surfaced via the IBM Equal Access Accessibility Checker (Please refer the screenshot above). The issue specifically flags the use of role="button" having a descendant with role="menu", which is not valid per ARIA specifications.

Context of the Issue:
• This came up while using the ComboBox component from Carbon.
• When the dropdown is opened, it dynamically injects a descendant element with role="menu", which violates ARIA rules because role="button" cannot have descendants with role="menu" (they’re ignored by browsers and screen readers).
• The component also used aria-owns, which exposes those descendants even when they’re not visible or not yet rendered. This seemed to contribute to the violation.

What I did:
• Replaced aria-owns with aria-controls, which is more appropriate in this case.
• aria-controls provides a hint to assistive technologies about a relationship only when the controlled element is rendered, avoiding premature or incorrect exposure.
• This change resolved the accessibility violation without breaking behavior.

[Akshat55]

Hey @Thejashwini123,

In the detail you provided, you mention combobox, but the fix is for dialog which is used for overflow menu... 🤔