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

Accessibility: Change address button on cart page cannot be triggered with space bar #43620

Closed
5 tasks done
amberhinds opened this issue Jan 15, 2024 · 0 comments · Fixed by #47460
Closed
5 tasks done
Assignees
Labels
focus: accessibility The issue/PR is related to accessibility. focus: cart Issues related to the cart. team: Rubik Store API checkout endpoints, Mini-Cart, Cart and Checkout related issues type: community contribution

Comments

@amberhinds
Copy link

Prerequisites

  • I have carried out troubleshooting steps and I believe I have found a bug.
  • I have searched for similar bugs in both open and closed issues and cannot find a duplicate.

Describe the bug

The "Change Address" link on the cart page has been correctly marked as a button with ARIA; however, it cannot be triggered with the space bar.

Relevant code:
https://github.com/woocommerce/woocommerce/blob/758df4854d7b627fc26eb5c0860dc492dea6a06e/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/shipping/calculator-button.tsx#L18C1-L18C1

Expected behavior

Buttons should be able to be triggered with the space bar and Tab key. When turning a link into a button with ARIA, you need to add JavaScript keyboard handlers so that it can be triggered with the space bar.

See the MDN docs for additional information and example code.

Actual behavior

Hitting the space bar on the Change Address button does not reveal the fields to change the address and instead scrolls users down the page.

Steps to reproduce

On the cart page, focus on the "Change Address" button via the Tab key, then hit the space bar.

WordPress Environment

N/A

Isolating the problem

  • I have deactivated other plugins and confirmed this bug occurs when only WooCommerce plugin is active.
  • This bug happens with a default WordPress theme active, or Storefront.
  • I can reproduce this bug consistently using the steps above.
@adimoldovan adimoldovan added focus: accessibility The issue/PR is related to accessibility. focus: cart Issues related to the cart. team: Rubik Store API checkout endpoints, Mini-Cart, Cart and Checkout related issues labels Jan 15, 2024
@senadir senadir self-assigned this May 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
focus: accessibility The issue/PR is related to accessibility. focus: cart Issues related to the cart. team: Rubik Store API checkout endpoints, Mini-Cart, Cart and Checkout related issues type: community contribution
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants