Accessibility: Change address button on cart page cannot be triggered with space bar #43620
Closed
5 tasks done
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
Prerequisites
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
The text was updated successfully, but these errors were encountered: