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

[a11y] Allow button to be focused and toggle dropdown with space/enter. #59

Merged
merged 1 commit into from
Jan 27, 2021

Conversation

drnic
Copy link
Contributor

@drnic drnic commented Jan 24, 2021

Users can also focus on the dropdown button if tabindex="0" is included.

They can toggle the dropdown with Space or Enter if the attribute data-dropdown-target="button" is included on the button.

Demo video of the feature and DOM changes https://share.getcloudapp.com/wbu9jn1G

I have tested this manually against the docs/index.html app locally. I tried shipping the built dist/ in the PR to make the demo work but it didn't. Not sure what's going on there. So this PR is just the change, but not dist/.

src/dropdown.js Show resolved Hide resolved
@drnic drnic changed the title [a11y] Allow button to be focused and toggle dropdown with space/enter. WIP: [a11y] Allow button to be focused and toggle dropdown with space/enter. Jan 24, 2021
@drnic drnic changed the title WIP: [a11y] Allow button to be focused and toggle dropdown with space/enter. [a11y] Allow button to be focused and toggle dropdown with space/enter. Jan 24, 2021
@excid3 excid3 merged commit bc2784b into excid3:master Jan 27, 2021
@excid3
Copy link
Owner

excid3 commented Jan 27, 2021

Great job on this @drnic! Definitely need to pay closer attention to a11y. 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants