Skip to content

Bug - ToolbarToggleGroup - a11y error gets flagged due to aria-controls having invalid value #9827

@thatblindgeye

Description

@thatblindgeye

Describe the problem
Before an update made in #9621 which conditionally renders the aria-controls attribute, some demos were getting a11y errors raised due to the fact that the value passed into the aria-controls prop was an invalid id (whatever element was meant to have that id wasn't rendered in the DOM, and aria-controls needs to be passed a valid id).

Per discussion with @jenny-s51 conditionally rendering aria-controls offers a (possibly temporary) fix to the a11y issue, but we should investigate whether or not that is a suitable fix long term. Ideally it may be better to have aria-controls always pointing to a valid element rather than conditionally applying the attribute.

How do you reproduce the problem?
Provide steps to reproduce. A codesandbox demonstrating the problem is appreciated.

Expected behavior
A clear and concise description of the expected behavior.

Is this issue blocking you?
List the workaround if there is one.

Screenshots
If applicable, add screenshots to help explain the issue.

What is your environment?

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

What is your product and what release date are you targeting?

Any other information?

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    Projects

    Status

    Done

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions