feat(autocomplete): generate component props for keyboard navigation and accessibility #6749
Conversation
…and accessibility
|
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 f3ff03d:
|
dhayab
requested review from
a team,
Haroenv,
aymeric-giraudet and
shaejaz
and removed request for
a team
| getPanelProps, | ||
| getRootProps, | ||
| updateStore, | ||
| } = useAutocomplete(); |
There was a problem hiding this comment.
if we'd use connectautocomplete at the level inside the index component, it could have the information and no need for a new store concept. The inconsistent part is then of course that the connector would know about the dom (unless there's a separate function that turns an autocomplete state into props. What do you think?
There was a problem hiding this comment.
I'm now using connectAutocomplete to create the items store and refine, and I'll migrate most of the state in the connector in a next PR, as well as move the prop getters to a shared part (probably ui components).
| }; | ||
| }, [rootRef]); | ||
|
|
||
| const getNextActiveDescendent = (key: string): string | undefined => { |
There was a problem hiding this comment.
this function could be declared outside of the bode of useAutocomplete if it received the state as a prop. Not sure if it would be better though.
| getItemProps, | ||
| getPanelProps, | ||
| getRootProps, | ||
| } = useAutocomplete({ indices }); |
There was a problem hiding this comment.
I don't really get why we're using connectAutocomplete at this level and not inside the isolated index. now it seems to be scoped differently and we can't use the refine of this useautocomplete for the state of the search input
There was a problem hiding this comment.
we can still merge this as-is I think, but change the logic more similar to https://github.com/algolia/instantsearch/pull/6745/files#diff-72e19c3c03bca3c661398212a729b91256cd437421db19378e02020e8905128dR298-R303 later
| (itemsAcc, index) => { | ||
| const indexItems = | ||
| connectorIndices | ||
| .find(({ indexName }) => index.indexName === indexName) |
There was a problem hiding this comment.
ideally this can be avoided if autocomplete connector is used inside the isolated index.
There was a problem hiding this comment.
Yes, I'll switch this in a future PR to align JS + React implementations.
2 participants
Summary
This PR sets up a
useAutocomplete()hook that:It centralizes keyboard support, accessibility and manages a basic state for the Autocomplete.
Keyboard navigation is based on the Editable Combobox with Grid Popup Example from WAI. This prepares us for horizontal navigation on item actions later.
Result
Preview sandbox↗️