Accessibility: Require Alt key for arrow navigation in theme and media modals

Author: Sukhendu2002

src/js/_enqueues/wp/theme.js

@@ -909,7 +909,7 @@ themes.view.Preview = themes.view.Details.extend({
 		'click .devices button': 'previewDevice',
 		'click .previous-theme': 'previousTheme',
 		'click .next-theme': 'nextTheme',
-		'keyup': 'keyEvent',
+		'keydown': 'keyEvent',
 		'click .theme-install': 'installTheme'
 	},
 
@@ -1012,18 +1012,20 @@ themes.view.Preview = themes.view.Details.extend({
 			this.close();
 		}
 
-		// Return if Ctrl + Shift or Shift key pressed
-		if ( event.shiftKey || ( event.ctrlKey && event.shiftKey ) ) {
+		// Arrow key navigation requires Alt key to avoid interfering with screen reader navigation.
+		if ( ! event.altKey || event.repeat ) {
 			return;
 		}
 
 		// The right arrow key, next theme.
 		if ( event.keyCode === 39 ) {
-			_.once( this.nextTheme() );
+			event.preventDefault();
+			this.nextTheme();
 		}
 
 		// The left arrow key, previous theme.
 		if ( event.keyCode === 37 ) {
+			event.preventDefault();
 			this.previousTheme();
 		}
 	},
@@ -1111,7 +1113,7 @@ themes.view.Themes = wp.Backbone.View.extend({
 		} );
 
 		// Bind keyboard events.
-		$( 'body' ).on( 'keyup', function( event ) {
+		$( 'body' ).on( 'keydown.wp-themes', function( event ) {
 			if ( ! self.overlay ) {
 				return;
 			}
@@ -1121,25 +1123,27 @@ themes.view.Themes = wp.Backbone.View.extend({
 				return;
 			}
 
-			// Return if Ctrl + Shift or Shift key pressed
-			if ( event.shiftKey || ( event.ctrlKey && event.shiftKey ) ) {
+			// Pressing the escape key fires a theme:collapse event.
+			if ( event.keyCode === 27 ) {
+				self.overlay.collapse( event );
+			}
+
+			// Arrow key navigation requires Alt key to avoid interfering with screen reader navigation.
+			if ( ! event.altKey || event.repeat ) {
 				return;
 			}
 
-			// Pressing the right arrow key fires a theme:next event.
+			// Pressing Alt + right arrow key fires a theme:next event.
 			if ( event.keyCode === 39 ) {
+				event.preventDefault();
 				self.overlay.nextTheme();
 			}
 
-			// Pressing the left arrow key fires a theme:previous event.
+			// Pressing Alt + left arrow key fires a theme:previous event.
 			if ( event.keyCode === 37 ) {
+				event.preventDefault();
 				self.overlay.previousTheme();
 			}
-
-			// Pressing the escape key fires a theme:collapse event.
-			if ( event.keyCode === 27 ) {
-				self.overlay.collapse( event );
-			}
 		});
 	},
 

src/js/media/views/frame/edit-attachments.js

@@ -247,25 +247,28 @@ EditAttachments = MediaFrame.extend(/** @lends wp.media.view.MediaFrame.EditAtta
 		return ( this.getCurrentIndex() - 1 ) > -1;
 	},
 	/**
-	 * Respond to the keyboard events: right arrow, left arrow, except when
-	 * focus is in a textarea or input field.
+	 * Respond to the keyboard events: Alt + right arrow, Alt + left arrow,
+	 * except when focus is in an interactive field. Requires the Alt modifier
+	 * key to avoid interfering with screen reader navigation.
 	 */
 	keyEvent: function( event ) {
-		if ( ( 'INPUT' === event.target.nodeName || 'TEXTAREA' === event.target.nodeName ) && ! event.target.disabled ) {
+		if ( ( 'INPUT' === event.target.nodeName || 'TEXTAREA' === event.target.nodeName || 'SELECT' === event.target.nodeName || 'BUTTON' === event.target.nodeName || 'A' === event.target.nodeName ) && ! event.target.disabled ) {
 			return;
 		}
 
-		// Return if Ctrl + Shift or Shift key pressed
-		if ( event.shiftKey || ( event.ctrlKey && event.shiftKey ) ) {
+		// Arrow key navigation requires Alt key to avoid interfering with screen reader navigation.
+		if ( ! event.altKey || event.repeat ) {
 			return;
 		}
 
-		// The right arrow key.
+		// Alt + right arrow key.
 		if ( 39 === event.keyCode ) {
+			event.preventDefault();
 			this.nextMediaItem();
 		}
-		// The left arrow key.
+		// Alt + left arrow key.
 		if ( 37 === event.keyCode ) {
+			event.preventDefault();
 			this.previousMediaItem();
 		}
 	},