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

feat(Dropdown): allow selecting an item when pressing the spacebar #3702

Merged

Conversation

@nelsonleite
Copy link
Contributor

nelsonleite commented Jul 12, 2019

Due to accessibility matters (and similarity to the native ), this adds the possibility to select an item via Spacebar and not only with Enter

Due to accessibility matters (and similarity to the native <select>), this adds the possibility to select an item via Spacebar and not only with Enter
@welcome

This comment has been minimized.

Copy link

welcome bot commented Jul 12, 2019

💖 Thanks for opening this pull request! 💖

Here is a list of things that will help get it across the finish line:

  • Run yarn lint locally to catch formatting errors. This will fix some errors automatically, commit and push any changes.
  • Run yarn test locally to catch errors. This ensures all components still behave as they should.
  • Run yarn start to run the doc site locally and try a few pages, ensuring everything is in good working order.
  • Include tests when adding/changing behavior.

We get a lot of pull requests on this repo, so please be patient and we will get back to you as soon as we can.

@codecov-io

This comment has been minimized.

Copy link

codecov-io commented Jul 12, 2019

Codecov Report

Merging #3702 into master will decrease coverage by <.01%.
The diff coverage is 100%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #3702      +/-   ##
==========================================
- Coverage   99.83%   99.83%   -0.01%     
==========================================
  Files         175      175              
  Lines        3124     3121       -3     
==========================================
- Hits         3119     3116       -3     
  Misses          5        5
Impacted Files Coverage Δ
src/modules/Dropdown/Dropdown.js 100% <100%> (ø) ⬆️
src/modules/Popup/Popup.js 98.68% <0%> (-0.04%) ⬇️
src/modules/Checkbox/Checkbox.js 100% <0%> (ø) ⬆️
src/modules/Transition/Transition.js 100% <0%> (ø) ⬆️
src/views/Feed/FeedContent.js 100% <0%> (ø) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f595fc2...a4a7563. Read the comment docs.

@layershifter

This comment has been minimized.

Copy link
Member

layershifter commented Jul 17, 2019

native <select />

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select
Value is not selectable by Spacebar.

listbox, combobox, menubutton

https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html
https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html
https://www.w3.org/TR/wai-aria-practices-1.1/examples/menu-button/menu-button-links.html

No Spacebar, too.

Due to accessibility matters (and similarity to the native )

Can you please clarify to which accessibility pattern you're referring?

@nelsonleite

This comment has been minimized.

Copy link
Contributor Author

nelsonleite commented Jul 18, 2019

The native select selects the value with the spacebar at least in Chrome and Safari. There is no specific a11y pattern that specifies this spacebar usage, but I was trying to mimic the behaviour in some browsers 🙂

@layershifter

This comment has been minimized.

Copy link
Member

layershifter commented Aug 4, 2019

@nelsonleite I have discussed this change also with Stardust UI team as there is also Dropdown component. I will follow up the discussion again, but I think that your PR will be included to next SUIR release 👍 🎉 🚀

@layershifter layershifter merged commit 9bcc76a into Semantic-Org:master Aug 7, 2019
1 check passed
1 check passed
ci/circleci Your tests passed on CircleCI!
Details
@welcome

This comment has been minimized.

Copy link

welcome bot commented Aug 7, 2019

Congrats on merging your first pull request! 🎉🎉🎉

robot victory dance

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.