hydrogen icon indicating copy to clipboard operation
hydrogen copied to clipboard
verified publisher icon Shopify

add keyboard navigation support to Listbox

Open therealchrisrock opened this issue 1 year ago • 2 comments

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

  • [x] I've read the Contributing Guidelines
  • [x] 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 avatar Feb 03 '24 21:02 therealchrisrock

I have signed the CLA!

therealchrisrock avatar Feb 03 '24 22:02 therealchrisrock

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

therealchrisrock avatar Feb 04 '24 08:02 therealchrisrock

therealchrisrock since we move demo store to a different repo. I am going to close this. Feel free to open again on https://github.com/Shopify/hydrogen-demo-store (I truly wish github have a feature where I can move it over 🙏 )

michenly avatar May 29 '24 18:05 michenly