feat(SelectDropdown): updated aria-live to be assertive and added aria-selected attribute to SelectDropdown #2869
Conversation
|
|
| useEffect(() => { | ||
| if (inputId) { | ||
| const inputelemet = document.getElementById(inputId); | ||
| inputelemet?.setAttribute('aria-activedescendant', highlightedOption); | ||
| } | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [highlightedOption]); |
There was a problem hiding this comment.
could you just pass the aria-activedescendant via inputProps (passing the highlightedOption as the value) to avoid direct dom manipulation?
There was a problem hiding this comment.
yup, I did tried that out but it seems react-select uses an internal component called DummyInput when search is disabled. The inputProps are not passed down to this component. Unfortunately, this makes customization of input element impossible without dom manipulation.
Here is the link for the react-select code snippet with DummyInput usage
There was a problem hiding this comment.
normally that's the case, but i overrode that behavior with a CustomContainer that always shows an input element that receives inputProps -- it's in elements here
There was a problem hiding this comment.
okay, yes I think this element can be updated to reflect required aria attributes. Will check this out!!
There was a problem hiding this comment.
great, let me know if you have any questions or want to pair!
There was a problem hiding this comment.
Hey Cassie, I was able to find a fix without usage of aria-activedescendant altogether. I see that we are already setting up ariaLiveMessages for the react-select component so I have updated aria-live to be assertive. This helps screenreader in instantly recognizing and notifying any changes made as per user action.
| export const SelectDropdownOption = (props: OptionProps) => { | ||
| const { setHighlightedOption } = useContext(SelectDropdownContext); | ||
| const { isFocused, innerProps } = props; | ||
|
|
||
| if (isFocused) { | ||
| setHighlightedOption(innerProps.id); | ||
| } | ||
|
|
||
| return ( | ||
| <Option | ||
| {...props} | ||
| innerProps={{ ...innerProps, 'aria-selected': isFocused }} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
There was a problem hiding this comment.
love this, works great. i'm also doing some SelectDropdown a11y work so this is timed nicely
palak-gupta-codecademy
changed the title
📬Published Alpha Packages:@codecademy/[email protected] |
|
🚀 Styleguide deploy preview ready! |
Overview
As part of this PR, the aria-live attribute for SelectDropDown is made assertive. This will help screenreader in identifying changes in option selection done be user and thereby notify without any delay.
Updated aria-live to be assertive.
Adds aria-selected attribute to option focused/highlighted
PR Checklist
Testing Instructions
Don't make me tap the sign.
PR Links and Envs