Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(multiselect): listbox hidden when closed #11944

Merged
merged 4 commits into from
Aug 26, 2022

Conversation

jnm2377
Copy link
Contributor

@jnm2377 jnm2377 commented Aug 11, 2022

Closes #11341

Changelog

  • make listbox menu hidden in the a11y tree when multiselect is closed

Testing / Reviewing

  • go to multiselect storybook and run the a11y checker on the closed menu

    • this a11y warning should no longer appear
    Screen Shot 2022-08-11 at 4 28 39 PM
  • ensure all tests are passing and component is working as expected

@netlify
Copy link

netlify bot commented Aug 11, 2022

Deploy Preview for carbon-components-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 9678f70
🔍 Latest deploy log https://app.netlify.com/sites/carbon-components-react/deploys/6308cde42f98f90008172d60
😎 Deploy Preview https://deploy-preview-11944--carbon-components-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Aug 11, 2022

Deploy Preview for carbon-elements ready!

Name Link
🔨 Latest commit 9678f70
🔍 Latest deploy log https://app.netlify.com/sites/carbon-elements/deploys/6308cde4fc20160008edbae7
😎 Deploy Preview https://deploy-preview-11944--carbon-elements.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@jnm2377 jnm2377 marked this pull request as ready for review August 11, 2022 22:23
@jnm2377 jnm2377 requested a review from a team as a code owner August 11, 2022 22:23
@tw15egan
Copy link
Collaborator

I seem to be still seeing the issue when the Multiselect is open

Screen Shot 2022-08-12 at 10 05 31 AM

Go to the MultiSelect default storybook
Open the MultiSelect (use inspect element on one of the entry to open DevTools without closing the menu)
Scan with IBM Equal Access Accessibility Checker (while the MultiSelect is opened)
You get the following accessibility violation:
2.1.1 Keyboard: The descendent <div> element with "option" role has no focusable child element

@jnm2377
Copy link
Contributor Author

jnm2377 commented Aug 25, 2022

@tw15egan @dakahn this is ready for re-review. I added a tab index of -1 to the listbox menu item component bc the same accessibility error was present in Dropdown which also uses this component. ComboBox uses it as well, however, we added tabIndex -1 to that component so it wasn't failing a11y checker. So this change just adds it to all menu items by default. The components should all still work as expected.

Copy link
Collaborator

@tw15egan tw15egan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not seeing the violation anymore, nice work 🔥

@kodiakhq kodiakhq bot merged commit 0d5d193 into carbon-design-system:main Aug 26, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

[a11y]: MultiSelect - The descendent <div> element with "option" role has no focusable child element
3 participants