refactor: replace deprecated 'keyCode' with 'key' in key event handling

src/js/_enqueues/admin/common.js

@@ -1803,11 +1803,11 @@ $( function() {
 				if ( ! $wpwrap.hasClass( 'wp-responsive-open' ) ) {
 				    return;
 				}
-				if ( 27 === event.keyCode ) {
+				if ( "Escape" === event.key ) {
 					$( toggleButton ).trigger( 'click.wp-responsive' );
 					$( toggleButton ).find( 'a' ).trigger( 'focus' );
 				} else {
-					if ( 9 === event.keyCode ) {
+					if ( "Tab" === event.key ) {
 						var sidebar        = $( '#adminmenuwrap' )[0];
 						var focusedElement = event.relatedTarget || document.activeElement;
 						// A brief delay is required to allow focus to switch to another element.

src/js/_enqueues/admin/post.js

@@ -589,7 +589,7 @@ jQuery( function($) {
 
 		// On [Enter] submit the taxonomy.
 		$('#new' + taxonomy).on( 'keypress', function(event){
-			if( 13 === event.keyCode ) {
+			if( "Enter" === event.key ) {
 				event.preventDefault();
 				$('#' + taxonomy + '-add-submit').trigger( 'click' );
 			}

src/js/_enqueues/admin/tags-suggest.js

@@ -107,11 +107,11 @@
 
 				$element.val( tags.join( separator + ' ' ) );
 
-				if ( $.ui.keyCode.TAB === event.keyCode ) {
+				if ( "Tab" === event.key ) {
 					// Audible confirmation message when a tag has been selected.
 					window.wp.a11y.speak( wp.i18n.__( 'Term selected.' ), 'assertive' );
 					event.preventDefault();
-				} else if ( $.ui.keyCode.ENTER === event.keyCode ) {
+				} else if ( "Enter" === event.key ) {
 					// If we're in the edit post Tags meta box, add the tag.
 					if ( window.tagBox ) {
 						window.tagBox.userAction = 'add';

src/js/_enqueues/lib/image-edit.js

@@ -319,9 +319,9 @@
 			$next = 0;
 		}
 		var target = false;
-		if ( event.keyCode === 40 ) {
+		if ( "ArrowDown" === event.key ) {
 			target = $collection.get( $next );
-		} else if ( event.keyCode === 38 ) {
+		} else if ( "ArrowUp" === event.key ) {
 			target = $collection.get( $prev );
 		}
 		if ( target ) {

src/js/_enqueues/lib/link.js

@@ -550,11 +550,11 @@
 			var fn, id;
 
 			// Escape key.
-			if ( 27 === event.keyCode ) {
+			if ( "Escape" === event.key ) {
 				wpLink.close();
 				event.stopImmediatePropagation();
 			// Tab key.
-			} else if ( 9 === event.keyCode ) {
+			} else if ( "Tab" === event.key ) {
 				id = event.target.id;
 
 				// wp-link-submit must always be the last focusable element in the dialog.
@@ -569,7 +569,7 @@
 			}
 
 			// Up Arrow and Down Arrow keys.
-			if ( event.shiftKey || ( 38 !== event.keyCode && 40 !== event.keyCode ) ) {
+			if ( event.shiftKey || ( "ArrowUp" !== event.key && "ArrowDown" !== event.key ) ) {
 				return;
 			}
 
@@ -579,7 +579,7 @@
 			}
 
 			// Up Arrow key.
-			fn = 38 === event.keyCode ? 'prev' : 'next';
+			fn = ( 'ArrowUp' === event.key ) ? 'prev' : 'next';
 			clearInterval( wpLink.keyInterval );
 			wpLink[ fn ]();
 			wpLink.keyInterval = setInterval( wpLink[ fn ], wpLink.keySensitivity );
@@ -588,7 +588,7 @@
 
 		keyup: function( event ) {
 			// Up Arrow and Down Arrow keys.
-			if ( 38 === event.keyCode || 40 === event.keyCode ) {
+			if ( "ArrowUp" === event.key || "ArrowDown" === event.key ) {
 				clearInterval( wpLink.keyInterval );
 				event.preventDefault();
 			}

src/js/_enqueues/vendor/jquery/ui/datepicker.js

@@ -727,7 +727,7 @@ $.extend( Datepicker.prototype, {
 						break; // +1 week on ctrl or command +down
 				default: handled = false;
 			}
-		} else if ( event.keyCode === 36 && event.ctrlKey ) { // display the date picker on ctrl+home
+		} else if ( event.key === "Home" && event.ctrlKey ) { // display the date picker on ctrl+home
 			$.datepicker._showDatepicker( this );
 		} else {
 			handled = false;

src/js/_enqueues/vendor/tinymce/plugins/wordpress/plugin.js

@@ -400,7 +400,7 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
 				$wrap.on( 'keydown', function( event ) {
 					// Prevent use of: page up, page down, end, home, left arrow, up arrow, right arrow, down arrow
 					// in the dialog keydown handler.
-					if ( event.keyCode >= 33 && event.keyCode <= 40 ) {
+					if ( event.key >= 'PageUp' && event.key <= 'ArrowDown' ) {
 						event.stopPropagation();
 					}
 				});
@@ -1048,7 +1048,7 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
 			} );
 
 			toolbar.on( 'keydown', function( event ) {
-				if ( event.keyCode === 27 ) {
+				if ( event.key === 'Escape' ) {
 					this.hide();
 					editor.focus();
 				}

src/js/_enqueues/vendor/tinymce/plugins/wpemoji/plugin.js

@@ -62,7 +62,7 @@
 			 * Thankfully it sets keyCode 231 when the onscreen keyboard inserts any emoji.
 			 */
 			editor.on( 'keyup', function( event ) {
-				if ( event.keyCode === 231 ) {
+				if ( event.key === 'ç' ) {
 					parseNode( editor.selection.getNode() );
 				}
 			} );

src/js/_enqueues/vendor/tinymce/plugins/wplink/plugin.js

@@ -363,7 +363,7 @@
 		// When doing undo and redo with keyboard shortcuts (Ctrl|Cmd+Z, Ctrl|Cmd+Shift+Z, Ctrl|Cmd+Y),
 		// set a flag to not focus the inline dialog. The editor has to remain focused so the users can do consecutive undo/redo.
 		editor.on( 'keydown', function( event ) {
-			if ( event.keyCode === 27 ) { // Esc
+			if ( event.key === 'Escape' ) { // Esc
 				editor.execCommand( 'wp_link_cancel' );
 			}
 
@@ -373,7 +373,7 @@
 				return;
 			}
 
-			if ( event.keyCode === 89 || event.keyCode === 90 ) { // Y or Z
+			if ( event.key === 'y' || event.key === 'z' ) {
 				doingUndoRedo = true;
 
 				window.clearTimeout( doingUndoRedoTimer );
@@ -440,7 +440,7 @@
 							$input.val( ui.item.permalink );
 							$( element.firstChild.nextSibling.nextSibling ).val( ui.item.title );
 
-							if ( 9 === event.keyCode && typeof window.wpLinkL10n !== 'undefined' ) {
+							if ( 'Tab' === event.key && typeof window.wpLinkL10n !== 'undefined' ) {
 								// Audible confirmation message when a link has been selected.
 								speak( window.wpLinkL10n.linkSelected );
 							}
@@ -521,7 +521,7 @@
 				}
 
 				tinymce.$( input ).on( 'keydown', function( event ) {
-					if ( event.keyCode === 13 ) {
+					if ( event.key === 'Enter' ) {
 						editor.execCommand( 'wp_link_apply' );
 						event.preventDefault();
 					}

src/js/_enqueues/wp/customize/controls.js

@@ -1778,17 +1778,17 @@
 				}
 
 				// Pressing the right arrow key fires a theme:next event.
-				if ( 39 === event.keyCode ) {
+				if ( "ArrowRight" === event.key ) {
 					section.nextTheme();
 				}
 
 				// Pressing the left arrow key fires a theme:previous event.
-				if ( 37 === event.keyCode ) {
+				if ( "ArrowLeft" === event.key ) {
 					section.previousTheme();
 				}
 
 				// Pressing the escape key fires a theme:collapse event.
-				if ( 27 === event.keyCode ) {
+				if ( "Escape" === event.key ) {
 					if ( section.$body.hasClass( 'modal-open' ) ) {
 
 						// Escape from the details modal.
@@ -2637,7 +2637,7 @@
 
 				// Return if it's not the tab key
 				// When navigating with prev/next focus is already handled.
-				if ( 9 !== event.keyCode ) {
+				if ( "Tab" !== event.key ) {
 					return;
 				}
 

src/js/_enqueues/wp/editor/dfw.js

@@ -1446,7 +1446,7 @@
 		 * @return {void}
 		 */
 		function toggleViaKeyboard( event ) {
-			if ( event.altKey && event.shiftKey && 87 === event.keyCode ) {
+			if ( event.altKey && event.shiftKey && 'W' === event.key ) {
 				toggle();
 			}
 		}

src/js/_enqueues/wp/theme.js

@@ -742,7 +742,7 @@ themes.view.Details = wp.Backbone.View.extend({
 
 		// Detect if the click is inside the overlay and don't close it
 		// unless the target was the div.back button.
-		if ( $( event.target ).is( '.theme-backdrop' ) || $( event.target ).is( '.close' ) || event.keyCode === 27 ) {
+		if ( $( event.target ).is( '.theme-backdrop' ) || $( event.target ).is( '.close' ) || event.key === "Escape" ) {
 
 			// Add a temporary closing class while overlay fades out.
 			$( 'body' ).addClass( 'closing-overlay' );
@@ -1007,7 +1007,7 @@ themes.view.Preview = themes.view.Details.extend({
 
 	keyEvent: function( event ) {
 		// The escape key closes the preview.
-		if ( event.keyCode === 27 ) {
+		if ( "Escape" === event.key ) {
 			this.undelegateEvents();
 			this.close();
 		}
@@ -1018,12 +1018,12 @@ themes.view.Preview = themes.view.Details.extend({
 		}
 
 		// The right arrow key, next theme.
-		if ( event.keyCode === 39 ) {
+		if ( "ArrowRight" === event.key ) {
 			_.once( this.nextTheme() );
 		}
 
 		// The left arrow key, previous theme.
-		if ( event.keyCode === 37 ) {
+		if ( "ArrowLeft" === event.key ) {
 			this.previousTheme();
 		}
 	},
@@ -1127,17 +1127,17 @@ themes.view.Themes = wp.Backbone.View.extend({
 			}
 
 			// Pressing the right arrow key fires a theme:next event.
-			if ( event.keyCode === 39 ) {
+			if ( "ArrowRight" === event.key ) {
 				self.overlay.nextTheme();
 			}
 
 			// Pressing the left arrow key fires a theme:previous event.
-			if ( event.keyCode === 37 ) {
+			if ( "ArrowLeft" === event.key ) {
 				self.overlay.previousTheme();
 			}
 
 			// Pressing the escape key fires a theme:collapse event.
-			if ( event.keyCode === 27 ) {
+			if ( "Escape" === event.key ) {
 				self.overlay.collapse( event );
 			}
 		});

src/js/_enqueues/wp/updates.js

@@ -2188,9 +2188,9 @@
 	 * @param {Event} event Event interface.
 	 */
 	wp.updates.keydown = function( event ) {
-		if ( 27 === event.keyCode ) {
+		if ( "Escape" === event.key ) {
 			wp.updates.requestForCredentialsModalCancel();
-		} else if ( 9 === event.keyCode ) {
+		} else if ( "Tab" === event.key ) {
 
 			// #upgrade button must always be the last focus-able element in the dialog.
 			if ( 'upgrade' === event.target.id && ! event.shiftKey ) {

src/js/_enqueues/wp/widgets/custom-html.js

@@ -262,8 +262,7 @@ wp.customHtmlWidgets = ( function( $ ) {
 			// Prevent hitting Esc from collapsing the widget control.
 			if ( wp.customize ) {
 				control.editor.codemirror.on( 'keydown', function onKeydown( codemirror, event ) {
-					var escKeyCode = 27;
-					if ( escKeyCode === event.keyCode ) {
+					if ( 'Escape' === event.key ) {
 						event.stopPropagation();
 					}
 				});

src/js/media/views/attachment.js

@@ -168,13 +168,13 @@ Attachment = View.extend(/** @lends wp.media.view.Attachment.prototype */{
 		}
 
 		// Catch arrow events.
-		if ( 37 === event.keyCode || 38 === event.keyCode || 39 === event.keyCode || 40 === event.keyCode ) {
+		if ( 'ArrowLeft' === event.key || 'ArrowUp' === event.key || 'ArrowRight' === event.key || 'ArrowDown' === event.key ) {
 			this.controller.trigger( 'attachment:keydown:arrow', event );
 			return;
 		}
 
 		// Catch enter and space events.
-		if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) {
+		if ( 'keydown' === event.type && 'Enter' !== event.key && 'Space' !== event.key ) {
 			return;
 		}
 
@@ -200,7 +200,7 @@ Attachment = View.extend(/** @lends wp.media.view.Attachment.prototype */{
 		}
 
 		// Avoid toggles when the command or control key is pressed with the enter key to prevent deselecting the last selected attachment.
-		if ( ( event.metaKey || event.ctrlKey ) && ( 13 === event.keyCode || 10 === event.keyCode ) ) {
+		if ( ( event.metaKey || event.ctrlKey ) && 'Enter' === event.key ) {
 			return;
 		}
 
@@ -492,7 +492,7 @@ Attachment = View.extend(/** @lends wp.media.view.Attachment.prototype */{
 	 */
 	removeFromLibrary: function( event ) {
 		// Catch enter and space events.
-		if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) {
+		if ( 'keydown' === event.type && 'Enter' !== event.key && 'Space' !== event.key ) {
 			return;
 		}
 

src/js/media/views/attachment/details.js

@@ -258,7 +258,7 @@ Details = Attachment.extend(/** @lends wp.media.view.Attachment.Details.prototyp
 	 * @return {boolean|void} Returns false or undefined.
 	 */
 	toggleSelectionHandler: function( event ) {
-		if ( 'keydown' === event.type && 9 === event.keyCode && event.shiftKey && event.target === this.$( ':tabbable' ).get( 0 ) ) {
+		if ( 'keydown' === event.type && 'Tab' === event.key && event.shiftKey && event.target === this.$( ':tabbable' ).get( 0 ) ) {
 			this.controller.trigger( 'attachment:details:shift-tab', event );
 			return false;
 		}

src/js/media/views/attachments.js

@@ -189,32 +189,28 @@ Attachments = View.extend(/** @lends wp.media.view.Attachments.prototype */{
 			return;
 		}
 
-		// Left arrow = 37.
-		if ( 37 === event.keyCode ) {
+		if ( "ArrowLeft" === event.key ) {
 			if ( 0 === index ) {
 				return;
 			}
 			attachments.eq( index - 1 ).focus();
 		}
 
-		// Up arrow = 38.
-		if ( 38 === event.keyCode ) {
+		if ( "ArrowUp" === event.key ) {
 			if ( 1 === row ) {
 				return;
 			}
 			attachments.eq( index - perRow ).focus();
 		}
 
-		// Right arrow = 39.
-		if ( 39 === event.keyCode ) {
+		if ( "ArrowRight" === event.key ) {
 			if ( attachments.length === index ) {
 				return;
 			}
 			attachments.eq( index + 1 ).focus();
 		}
 
-		// Down arrow = 40.
-		if ( 40 === event.keyCode ) {
+		if ( "ArrowDown" === event.key ) {
 			if ( Math.ceil( attachments.length / perRow ) === row ) {
 				return;
 			}

src/js/media/views/focus-manager.js

@@ -85,7 +85,7 @@ var FocusManager = wp.media.View.extend(/** @lends wp.media.view.FocusManager.pr
 		var tabbables;
 
 		// Look for the tab key.
-		if ( 9 !== event.keyCode ) {
+		if ( "Tab" !== event.key ) {
 			return;
 		}
 

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

@@ -261,11 +261,11 @@ EditAttachments = MediaFrame.extend(/** @lends wp.media.view.MediaFrame.EditAtta
 		}
 
 		// The right arrow key.
-		if ( 39 === event.keyCode ) {
+		if ( "ArrowRight" === event.key ) {
 			this.nextMediaItem();
 		}
 		// The left arrow key.
-		if ( 37 === event.keyCode ) {
+		if ( "ArrowLeft" === event.key ) {
 			this.previousMediaItem();
 		}
 	},

src/wp-content/themes/twentytwenty/assets/js/index.js

@@ -157,7 +157,7 @@ twentytwenty.coverModals = {
 	// Close modal on escape key press.
 	closeOnEscape: function() {
 		document.addEventListener( 'keydown', function( event ) {
-			if ( event.keyCode === 27 ) {
+			if ( "Escape" === event.key ) {
 				event.preventDefault();
 				document.querySelectorAll( '.cover-modal.active' ).forEach( function( element ) {
 					this.untoggleModal( element );
@@ -401,7 +401,7 @@ twentytwenty.modalMenu = {
 				lastEl = elements[ elements.length - 1 ];
 				firstEl = elements[0];
 				activeEl = _doc.activeElement;
-				tabKey = event.keyCode === 9;
+				tabKey = event.key === "Tab";
 				shiftKey = event.shiftKey;
 
 				if ( ! shiftKey && tabKey && lastEl === activeEl ) {