Skip to content

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

Open
@Thejashwini123

Description

@Thejashwini123
Image

Activity

Akshat55

Akshat55 commented on Apr 22, 2025

@Akshat55
Contributor

@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

Thejashwini123 commented on May 12, 2025

@Thejashwini123
Author

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

Akshat55 commented on May 13, 2025

@Akshat55
Contributor

Hey @Thejashwini123,

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Participants

      @Akshat55@Thejashwini123

      Issue actions

        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