fix: generate elements ids in a consistent manner #1194
Conversation
|
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 10cc1c9:
|
| 'aria-owns': store.getState().isOpen | ||
| ? store | ||
| .getState() | ||
| .collections.map(({ source }) => | ||
| getAutocompleteElementId(props.id, 'list', source) | ||
| ) | ||
| .join(' ') | ||
| : undefined, |
There was a problem hiding this comment.
This is conform to the reference, making Autocomplete the owner of all the sources' lists.
| 'aria-controls': store.getState().isOpen | ||
| ? store | ||
| .getState() | ||
| .collections.map(({ source }) => | ||
| getAutocompleteElementId(props.id, 'list', source) | ||
| ) | ||
| .join(' ') | ||
| : undefined, |
There was a problem hiding this comment.
This gives a comprehensive value of all lists that are controlled by the input (MDN).
| ? store | ||
| .getState() | ||
| .collections.map(({ source }) => | ||
| getAutocompleteElementId(props.id, 'list', source) |
There was a problem hiding this comment.
bit unfortunate that this gets calculated again instead of saved in the collection, but it makes sense
There was a problem hiding this comment.
I didn't create a specific test case for this simple method, because its output is testable on multiple occasions in other integration tests and snapshots.
dhayab
requested review from
a team,
sarahdayan and
aymeric-giraudet
and removed request for
a team
Summary
DOM elements within Autocomplete do not follow a consistent naming scheme for their
id, which broke one accessibility feature making users unable to always view the active item when navigating using the keyboard arrows.This PR ensures all elements of Autocomplete have an
idthat is generated from a single source of truth, making sure they follow a consistent naming scheme.Also in this PR, some
aria-attributes have more meaningful values.Result
Navigating with the keyboard arrows in an Autocomplete panel always scrolls the active element into view.
FX-2619
Closes #1188