Add aria-activedescendant support in autocomplete #47
Conversation
| <div | ||
| key={index} | ||
| className={className} | ||
| id={`${cssClasses.option}-${index}`} |
There was a problem hiding this comment.
I'm not sure that we should use cssClasses.option here because those are css classes and not ids. With some of the new CSS injection work, the CSS class could be a tailwind class, and that wouldn't make sense to use here. Maybe instead we add an optionId prop which is a function which takes in the index as a number and returns a string which represents the id? Potentially the InputDropdown would have this prop as well
There was a problem hiding this comment.
ah right. In the case, what do you think about an optionIdPrefix instead? so it would be id = optionIdPrefix-index. It's simpler and a function might not be necessary, but it would allow a bit more flexibility. I'm fine with either way so if you think a function is better I could make that change!
There was a problem hiding this comment.
An optionIdPrefix sounds good to me
aria-activedescedantbased on selected autocomplete option using UP/DOWN key.J=SLAP-1650
TEST=manual
see that search bar input contains aria-activedescendant with id of the selected autocomplete
see that search bar input remains in focus when moving through the autocomplete option
tab over components and see that autocomplete options is not registered individually
see that aria-activedescedant is removed when move back to input element + when hit enter/click submit