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

Fix product tile button keyboard accessibility #721

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

Conversation

spencercanner
Copy link
Contributor

@spencercanner spencercanner commented Sep 9, 2020

  • Add support for clicking the product tile button using the space key
  • Change the event listener on the product tile button to keydown so it is not triggered after closing the modal using the keyboard
    • This also makes it consistent with other keyboard event handlers
  • Linting prefers an early return, so the keydown event handler was refactored

To 🎩 :

  • Create a buy button where isButton is set to true for the product component, and the button destination is modal
  • Tab to the product tile button
  • Verify that button can be clicked using the enter key
  • Close the modal by pressing the enter key when focused on the close button, and verify that the modal does not re-open
  • Verify that the product tile button can be opened using the space key
  • Close the modal by pressing the space key when focused on the close button, and verify that the modal does not re-open
  • Sanity check that add to cart, and checkout button destinations still function as expected when isButton is set to true

Browsers:

  • Safari - Mac
  • Chrome - Mac
  • Firefox - Mac
    • Firefox has a bug where preventDefault does not work on space keydown events. This causes the cart/modal to close right after it is opened using the space key.
    • Firefox also prevents popups from being initiated through keyboard clicks, so pressing space or enter on the checkout product tile button won't work
  • Edge - Mac
  • Legacy Edge - Windows
  • Edge - Windows
  • Chrome - Windows
  • Firefox - Windows
    • Same limitations as Mac Firefox

@spencercanner spencercanner force-pushed the product-button-space-click branch from 267e383 to dae9e22 Compare September 9, 2020 17:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant