-
Notifications
You must be signed in to change notification settings - Fork 6.3k
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: Improve keyboard interactions in searchbox #6537
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Lighthouse Results
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Cool improvement
While implementing the feedbacks I've improved the feature a little bit further by bounding the selection (no overflowing now) and adding a scrollIntoView effect |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM ! Super cool first contribution 🎉
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We shouldn't use JavaScript to achieve this. This can easily be done with pure HTML and the proper aria-* tags (and other attributes such as tabindex, role, etc)
I appreciate the invested time in this, but unfortunately we shouldn't try to solve accessibility with JavaScript.
Do you mean that we shouldn't have this behaviour at all? MDN Web Docs has this feature (With all the proper accessibility tags) and it does not work without js In that case I can revert the feature and just leave the fix of the |
Interesting. My understanding is that navigation via tab key is sufficient for the a11y standard. That's because, to my understanding, there's no sense of what is left and right, up and down. I believe if we make navigation through tab keys work (which is possible with plain html) we could content with that. Navigation with arrow keys indeed requires JavaScript, but I wonder if we should even address that. If that is indeed the goal, I still believe the proposed patch can be simplified and no Math calculations are needed. You can do it with a simple state that stores the current index (default 0) And have an if statement (if the next index < length of results) then update the state, otherwise do nothing. |
I've updated the PR with the simplified logic you suggested and imitated the searchbox behaviour of MDN (which I found out that implements the combobox pattern) 👍🏻 |
Appreciate it! Reviewing now 👀 |
4477475
to
1d3cca5
Compare
Happy to contribute 😄
I've now update the tabs to include a "secondaryLabel" option, similar to the previous style
I've removed the empty ("Search something...") state, but I'm not sure if the results will actually show on production because they depend on how the search with an empty term will behave (locally I've use mock data to develop the feature).
|
@micheleriva is there a way folks can have a test database locally? 🤔 |
I also guess you can always wait for the Vercel deployment to test things out :pokerface: |
@ovflowd you can set the environment variables for local development! |
That is not the issue. I don't want to share our api keys publicly. Is there a way folks can test things locally without using our keys? |
@ovflowd I understand, but keep in mind that |
Description
This PR is improving the UX of the searchbox by adding interactivity with the up/down arrows and enter keys, to mimic the behaviour of similar searchboxes.
While developing the feature I've also found a bug in the
useKeyboardCommands
(the eventListener wasn't properly cleaned) that was causing issues to my addition.Validation
I've validated it locally by setting some random search results from prod into the react state, a video of the feature in action is available here
Check List
npx turbo format
to ensure the code follows the style guide.npx turbo test
to check if all tests are passing.npx turbo build
to check if the website builds without errors.