Add aria-label to dropdown component #1110
Conversation
| @@ -70,6 +70,7 @@ export const DesktopDropdown = <T extends OptionType>({ | |||
| aria-haspopup="menu" | |||
| role="button" | |||
| ref={initialFocus} | |||
| aria-label="dropdown" | |||
There was a problem hiding this comment.
Would we want aria-label to refer to the dropdown as a whole or the specific option label that's currently in focus? aria-label={currentOption ? currentOption.label : 'dropdown'}
Is this Cypress failure somewhere on CI (or on the Cypress dashboard) where I could take a look, or is it local dev? |
The error is occurring locally. I'm pushing up the tests now so you can take a look but it seems to pass fine in CI. Interesting because the accessibility tab in Radiance for the dropdown component also points out the exact same issues I was seeing locally. Heres the PR |
There was a problem hiding this comment.
I think there's room for improvement in our component definition, especially for ways to encourage happy path a11y behavior (and enforce it in our Storybook environment to prevent the issues it is reporting), but a fix for your issue can be found in userland: https://github.com/curology/PocketDerm/pull/14014/files#r684494367
|
Closing in favor of the fix in userland mentioned above ^^^^ I've merged in #1117 to fix some misleading accessibility violations in our Storybook app, which includes mention of 3 new issues to fix the remaining issues, at least a couple of which are legitimate a11y issues in the library. |
This dropdown component was causing 'Accessibility check failed!' errors in my cypress tests. Below is a screenshot of the produced error. Simple fix was just to add an aria-label to the component.
