refactor: replace deprecated keyCode with key in event handlers in media

Author: R1shabh-Gupta

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 ( 'ArrowUp' === event.key || 'ArrowDown' === event.key || 'ArrowLeft' === event.key || 'ArrowRight' === 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 && ' ' !== 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 || ' ' === 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 && ' ' !== 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();
 		}
 	},