You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
Accessability Violation : The element with role "button" contains descendants with roles "menu" which are ignored by browsers · Issue #3126 · carbon-design-system/carbon-components-angular
Activity
Akshat55 commentedon Apr 22, 2025
@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 commentedon May 12, 2025
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 commentedon May 13, 2025
Hey @Thejashwini123,
In the detail you provided, you mention
combobox
, but the fix is fordialog
which is used for overflow menu... 🤔