Skip to content

fix(core): use updated aria control attribute for root element#1278

Merged
dhayab merged 1 commit intonextfrom
fix/rootprops-aria-controls-attribute
Oct 14, 2024
Merged

fix(core): use updated aria control attribute for root element#1278
dhayab merged 1 commit intonextfrom
fix/rootprops-aria-controls-attribute

Conversation

@dhayab
Copy link
Copy Markdown
Member

@dhayab dhayab commented Oct 14, 2024

Summary

This PR updates getRootProps() to return aria-controls instead of aria-owns, following the latest ARIA specs.

From MDN:

When a combobox's popup is displayed, ensure the aria-controls attribute on the combobox element is set to the id of the popup listbox, tree, grid, or dialog element. This is how the relationship between the element with the combobox role and the popup it controls is indicated. (Note: In older ARIA specs, this was aria-owns rather than aria-controls, so you may see aria-owns in older combobox implementations. The aria-owns in the code should be updated to aria-controls!)

Result

Assistive technologies correctly link the combobox with the listbox it controls. Accessibility tools like WAVE and axe stop reporting errors relevant to this.

Closes #1271

@dhayab dhayab requested review from a team, aymeric-giraudet and sarahdayan and removed request for a team October 14, 2024 12:40
@codesandbox-ci
Copy link
Copy Markdown

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 34bd1df:

Sandbox Source
@algolia/autocomplete-example-github-repositories-custom-plugin Configuration
@algolia/autocomplete-example-instantsearch Configuration
@algolia/autocomplete-example-playground Configuration
@algolia/autocomplete-example-preview-panel-in-modal Configuration
@algolia/autocomplete-example-starter-algolia Configuration
@algolia/autocomplete-example-starter Configuration
@algolia/autocomplete-example-reshape Configuration
@algolia/autocomplete-example-vue Configuration

Copy link
Copy Markdown
Member

@sarahdayan sarahdayan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

A good improvement for the future would be to include automated Axe Core tests in our CI to flag those issues.

@dhayab dhayab merged commit f64497b into next Oct 14, 2024
@dhayab dhayab deleted the fix/rootprops-aria-controls-attribute branch October 14, 2024 14:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

The aria-controls attribute isn't returned by getRootProps

2 participants