Accessibility: add global event handler for anchors with button role triggering the click on spacebar keydown (#59578)

kmanijak · web-flow · commit 92ce56d156b0 · 2025-07-10T18:53:08.000+02:00
* Add global keydown event handler to anchors with button role

* Remove specific event handlers duplicating global one

* Remove specific event handler duplicating the global one in add-to-cart.js

* Add changelog

* Remove unnecessary comment and bring back previous styling

* Replace jQuery code with vanilla JS
diff --git a/plugins/woocommerce/changelog/wooplug-4953-accessibility-javascript-needed-for-adding-spacebar-support b/plugins/woocommerce/changelog/wooplug-4953-accessibility-javascript-needed-for-adding-spacebar-support
@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+Accessibility: add global event handler for anchors with button role triggering the click on spacebar keydown
diff --git a/plugins/woocommerce/client/legacy/js/frontend/add-to-cart.js b/plugins/woocommerce/client/legacy/js/frontend/add-to-cart.js
@@ -17,7 +17,6 @@ jQuery( function( $ ) {
 		$( document.body )
 			.on( 'click', '.add_to_cart_button:not(.wc-interactive)', { addToCartHandler: this }, this.onAddToCart )
 			.on( 'click', '.remove_from_cart_button', { addToCartHandler: this }, this.onRemoveFromCart )
-			.on( 'keydown', '.remove_from_cart_button', this.onKeydownRemoveFromCart )
 			.on( 'added_to_cart', { addToCartHandler: this }, this.onAddedToCart )
 			.on( 'removed_from_cart', { addToCartHandler: this }, this.onRemovedFromCart )
 			.on( 'ajax_request_not_sent.adding_to_cart', this.updateButton );
@@ -170,18 +169,6 @@ jQuery( function( $ ) {
 		});
 	};
 
-	/**
-	 * Handle when pressing the Space key on the remove item link.
-	 * This is necessary because the link got the role="button" attribute
-	 * and needs to act like a button.
-	 */
-	AddToCartHandler.prototype.onKeydownRemoveFromCart = function( event ) {
-		if ( event.key === ' ' ) {
-			event.preventDefault();
-			$( this ).trigger( 'click' );
-		}
-	};
-
 	/**
 	 * Update cart page elements after add to cart events.
 	 */
diff --git a/plugins/woocommerce/client/legacy/js/frontend/woocommerce.js b/plugins/woocommerce/client/legacy/js/frontend/woocommerce.js
@@ -14,6 +14,19 @@ jQuery( function ( $ ) {
 		}
 	} );
 
+	// Global accessibility handler for all links with role="button"
+	// This ensures both spacebar and enter keypresses trigger click events, as per ARIA specification
+	document.body.addEventListener( 'keydown', function ( event ) {
+		if ( ! event.target.matches( 'a[role="button"]' ) ) {
+			return;
+		}
+
+		if ( event.key === ' ' || event.key === 'Enter' ) {
+			event.preventDefault();
+			event.target.click();
+		}
+	} );
+
 	var noticeID = $( '.woocommerce-store-notice' ).data( 'noticeId' ) || '',
 		cookieName = 'store_notice' + noticeID;
 
@@ -22,31 +35,22 @@ jQuery( function ( $ ) {
 		$( '.woocommerce-store-notice' ).hide();
 	} else {
 		$( '.woocommerce-store-notice' ).show();
-		/**
-		 * After adding the role="button" attribute to the 
-		 * .woocommerce-store-notice__dismiss-link element, 
-		 * we need to add the keydown event listener to it.
-		 */
-		function store_notice_keydown_handler( event ) {
-			if ( ['Enter', ' '].includes( event.key ) ) {
-				event.preventDefault();
-				$( '.woocommerce-store-notice__dismiss-link' ).click();
-			}
-		}
 
 		// Set a cookie and hide the store notice when the dismiss button is clicked
 		function store_notice_click_handler( event ) {
 			Cookies.set( cookieName, 'hidden', { path: '/' } );
 			$( '.woocommerce-store-notice' ).hide();
 			event.preventDefault();
-			$( '.woocommerce-store-notice__dismiss-link' )
-				.off( 'click', store_notice_click_handler )
-				.off( 'keydown', store_notice_keydown_handler );
+			$( '.woocommerce-store-notice__dismiss-link' ).off(
+				'click',
+				store_notice_click_handler
+			);
 		}
-		
-		$( '.woocommerce-store-notice__dismiss-link' )
-			.on( 'click', store_notice_click_handler )
-			.on( 'keydown', store_notice_keydown_handler );
+
+		$( '.woocommerce-store-notice__dismiss-link' ).on(
+			'click',
+			store_notice_click_handler
+		);
 	}
 
 	// Make form field descriptions toggle on focus.
@@ -182,27 +186,12 @@ jQuery( function ( $ ) {
 		} );
 	} );
 
-	// If the "Enable AJAX add to cart buttons on archives" setting is disabled
-	// the add-to-cart.js file won't be loaded, so we need to add the event listener here.
-	if ( typeof wc_add_to_cart_params === 'undefined') {
-		$( document.body ).on( 'keydown', '.remove_from_cart_button', on_keydown_remove_from_cart );
-	}
-
-	$( document.body ).on( 'item_removed_from_classic_cart updated_wc_div', focus_populate_live_region );
+	$( document.body ).on(
+		'item_removed_from_classic_cart updated_wc_div',
+		focus_populate_live_region
+	);
 } );
 
-/**
- * Handle when pressing the Space key on the remove item link.
- * This is necessary because the link has the role="button" attribute
- * and needs to act like a button.
- */
-function on_keydown_remove_from_cart( event ) {
-	if ( event.key === ' ' ) {
-		event.preventDefault();
-		event.currentTarget.click();
-	}
-}
-
 /**
  * Focus on the first notice element on the page.
  *
@@ -248,10 +237,10 @@ function refresh_sorted_by_live_region() {
 
 	if ( sorted_by_live_region ) {
 		var text = sorted_by_live_region.innerHTML;
-		sorted_by_live_region.setAttribute('aria-hidden', 'true');
-		
+		sorted_by_live_region.setAttribute( 'aria-hidden', 'true' );
+
 		var sorted_by_live_region_id = setTimeout( function () {
-			sorted_by_live_region.setAttribute('aria-hidden', 'false');
+			sorted_by_live_region.setAttribute( 'aria-hidden', 'false' );
 			sorted_by_live_region.innerHTML = '';
 			sorted_by_live_region.innerHTML = text;
 			clearTimeout( sorted_by_live_region_id );
