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

add keyboard navigation support to Listbox #1726

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

therealchrisrock
Copy link
Contributor

WHY are these changes introduced?

These changes are introduced to improve accessibility and UX for the product options Listbox.

  1. Adds support for selecting items in the Listbox using keyboard navigation.
  2. Reduces first input delay by updating the listbox state immediately rather than waiting for the navigation event.

WHAT is this pull request doing?

  1. Separates the listbox code into a separate JSX component.
  2. removes Link and onClick handler, in favour of the Listbox's onChange handler, providing native support for keyboard navigation.
  3. Removes closeRef and manages the Listbox state with useState, allowing selected option in the Listbox button to update immediately rather than after the route change has occurred. Maybe this should instead be handled optimistically but I am not sure..

If there is anything that you'd like to see done differently, please let me know and I will update the change accordingly.

HOW to test your changes?

  1. Go to any product with a Listbox element; i.e a product with a product option that has more than 7 possible values. For example, The Hydrogen Snowboard (/products/snowboard).
  2. Select new options for the Listbox using both keyboard navigation and clicks.
  3. Observe route change; add products to cart and review that new selected option is added to the cart.

Checklist

  • I've read the Contributing Guidelines
  • I've considered possible cross-platform impacts (Mac, Linux, Windows)
  • I've added a changeset if this PR contains user-facing or noteworthy changes
  • I've added tests to cover my changes
  • I've added or updated the documentation

@therealchrisrock
Copy link
Contributor Author

I have signed the CLA!

@therealchrisrock
Copy link
Contributor Author

On second thought, maybe I should limit the scope of changes to adding support for keyboard navigation.. Remove the other stuff.

It's nice that the listbox is responds instantly to the user's selection but it should probably just update alongside the other variants and price.

Separating the listbox into a separate component is also probably an unnecessary abstraction here.

Updating the PR now

@michenly michenly requested a review from a team February 20, 2024 15:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants