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

Handle End and Home Keys in list navigation #646

Merged
merged 2 commits into from
Jan 8, 2019
Merged

Handle End and Home Keys in list navigation #646

merged 2 commits into from
Jan 8, 2019

Conversation

silviuaavram
Copy link
Collaborator

What:
This PR aims to improve kb navigation inside the listbox by adding support for Home and End. These keys should highlight first / last element, if the listbox is visible.

Why:
Improves the component by adding another ARIA specification regarding kb navigation.

How:
Added event listeners for keydown on both Home and End, and added handlers for each, in which I've used variations for the setHighlightedIndex function. Also added event names for both kets.

Also added UTs for these changes, and planning to add E2E Cypress tests too. These are already written, however Cypress does not support Home and End at the moment. I've created a PR for implementing this in their repo here. Those tests are currently commented.

Checklist:

  • Documentation
  • Tests
  • Ready to be merged
  • Added myself to contributors table

kentcdodds
kentcdodds previously approved these changes Jan 7, 2019
Copy link
Member

@kentcdodds kentcdodds left a comment

Choose a reason for hiding this comment

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

Cool! 👍 I love this.

@kentcdodds
Copy link
Member

Ah, looks like we're just shy of our coverage threshold. Could you give that a look please?

@silviuaavram
Copy link
Collaborator Author

sure, will take a look tomorrow and come back to you. Thanks for the feedback!

@silviuaavram
Copy link
Collaborator Author

I updated a unit test to check that navigation keys (up, down, home, end) do nothing if list is empty. It should maintain the coverage now. You can check :)

Copy link
Member

@kentcdodds kentcdodds left a comment

Choose a reason for hiding this comment

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

Fantastic. Thank you!

@kentcdodds kentcdodds merged commit 0773ffe into downshift-js:master Jan 8, 2019
@kentcdodds
Copy link
Member

Hey @silviuavram, would you be at all interested in being a primary maintainer of the project? Of everyone I feel really comfortable handing this project to you. See #647

@kentcdodds
Copy link
Member

🎉 This PR is included in version 3.1.11 🎉

The release is available on:

Your semantic-release bot 📦🚀

@silviuaavram
Copy link
Collaborator Author

silviuaavram commented Jan 9, 2019 via email

@kentcdodds
Copy link
Member

Sounds awesome! Could you shoot me an email and we'll chat about what needs to happen for this to work :) kent@doddsfamily.us

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

Successfully merging this pull request may close these issues.

2 participants