Product Gallery: Add keyboard access (#11373)

* Product Gallery: Add keyboard access

* Add optional chaining to guard against undefines and update delay logic

* Use enums for key codes

Author: roykho

assets/js/blocks/product-gallery/frontend.tsx

@@ -30,6 +30,12 @@ interface Actions {
 		thumbnails: {
 			handleClick: ( context: Context ) => void;
 		};
+		handlePreviousImageButtonClick: {
+			( store: Store ): void;
+		};
+		handleNextImageButtonClick: {
+			( store: Store ): void;
+		};
 	};
 }
 
@@ -41,10 +47,63 @@ interface Store {
 	ref?: HTMLElement;
 }
 
+interface Event {
+	keyCode: number;
+}
+
 type SelectorsStore = Pick< Store, 'context' | 'selectors' | 'ref' >;
 
+enum Keys {
+	ESC = 27,
+	LEFT_ARROW = 37,
+	RIGHT_ARROW = 39,
+}
+
 interactivityApiStore( {
 	state: {},
+	effects: {
+		woocommerce: {
+			keyboardAccess: ( store: Store ) => {
+				const { context, actions } = store;
+				let allowNavigation = true;
+
+				const handleKeyEvents = ( event: Event ) => {
+					if (
+						! allowNavigation ||
+						! context.woocommerce?.isDialogOpen
+					) {
+						return;
+					}
+
+					// Disable navigation for a brief period to prevent spamming.
+					allowNavigation = false;
+
+					requestAnimationFrame( () => {
+						allowNavigation = true;
+					} );
+
+					// Check if the esc key is pressed.
+					if ( event.keyCode === Keys.ESC ) {
+						context.woocommerce.isDialogOpen = false;
+					}
+
+					// Check if left arrow key is pressed.
+					if ( event.keyCode === Keys.LEFT_ARROW ) {
+						actions.woocommerce.handlePreviousImageButtonClick(
+							store
+						);
+					}
+
+					// Check if right arrow key is pressed.
+					if ( event.keyCode === Keys.RIGHT_ARROW ) {
+						actions.woocommerce.handleNextImageButtonClick( store );
+					}
+				};
+
+				document.addEventListener( 'keydown', handleKeyEvents );
+			},
+		},
+	},
 	selectors: {
 		woocommerce: {
 			isSelected: ( { context }: Store ) => {

src/BlockTypes/ProductGallery.php

@@ -77,7 +77,7 @@ function( $carry, $item ) {
 
 		$gallery_dialog = strtr(
 			'
-		<div class="wc-block-product-gallery-dialog__overlay" hidden data-wc-bind--hidden="!selectors.woocommerce.isDialogOpen">
+		<div class="wc-block-product-gallery-dialog__overlay" hidden data-wc-bind--hidden="!selectors.woocommerce.isDialogOpen" data-wc-effect="effects.woocommerce.keyboardAccess">
 			<dialog data-wc-bind--open="selectors.woocommerce.isDialogOpen">
 			<div class="wc-block-product-gallery-dialog__header">
 			<div class="wc-block-product-galler-dialog__header-right">