Widgets: A11y: Prevent dropdowns from submitting on esc in Windows.

On Chrome and Firefox for Windows, the dropdown format for Category and Archives widgets  will submit if the user closes the `select` element using Escape. Escape should instead cancel the action.

Fix the classic Category and Archives widgets to prevent submission on `esc` keypresses.

Props adrock42, sabernhardt, whyisjake, westonruter, joedolson, nikunj8866, fakhriaz, mukesh27.
Fixes #63531.

git-svn-id: https://develop.svn.wordpress.org/trunk@61104 602fd350-edb4-49c9-b593-d223f7449a82

Author: joedolson

src/wp-includes/widgets/class-wp-widget-archives.php

@@ -109,15 +109,32 @@ public function widget( $args, $instance ) {
 
 			<?php ob_start(); ?>
 <script>
-(function() {
-	var dropdown = document.getElementById( "<?php echo esc_js( $dropdown_id ); ?>" );
+( ( dropdownId ) => {
+	const dropdown = document.getElementById( dropdownId );
 	function onSelectChange() {
-		if ( dropdown.options[ dropdown.selectedIndex ].value !== '' ) {
-			document.location.href = this.options[ this.selectedIndex ].value;
+		setTimeout( () => {
+			if ( 'escape' === dropdown.dataset.lastkey ) {
+				return;
+			}
+			if ( dropdown.value ) {
+				document.location.href = dropdown.value;
+			}
+		}, 250 );
+	}
+	function onKeyUp( event ) {
+		if ( 'Escape' === event.key ) {
+			dropdown.dataset.lastkey = 'escape';
+		} else {
+			delete dropdown.dataset.lastkey;
 		}
 	}
-	dropdown.onchange = onSelectChange;
-})();
+	function onClick() {
+		delete dropdown.dataset.lastkey;
+	}
+	dropdown.addEventListener( 'keyup', onKeyUp );
+	dropdown.addEventListener( 'click', onClick );
+	dropdown.addEventListener( 'change', onSelectChange );
+})( <?php echo wp_json_encode( $dropdown_id, JSON_HEX_TAG | JSON_UNESCAPED_SLASHES ); ?> );
 </script>
 			<?php
 			wp_print_inline_script_tag( wp_remove_surrounding_empty_script_tags( ob_get_clean() ) . "\n//# sourceURL=" . rawurlencode( __METHOD__ ) );

src/wp-includes/widgets/class-wp-widget-categories.php

@@ -96,15 +96,32 @@ public function widget( $args, $instance ) {
 			?>
 
 <script>
-(function() {
-	var dropdown = document.getElementById( "<?php echo esc_js( $dropdown_id ); ?>" );
-	function onCatChange() {
-		if ( dropdown.options[ dropdown.selectedIndex ].value > 0 ) {
-			dropdown.parentNode.submit();
+( ( dropdownId ) => {
+	const dropdown = document.getElementById( dropdownId );
+	function onSelectChange() {
+		setTimeout( () => {
+			if ( 'escape' === dropdown.dataset.lastkey ) {
+				return;
+			}
+			if ( dropdown.value && parseInt( dropdown.value ) > 0 && dropdown instanceof HTMLSelectElement ) {
+				dropdown.parentElement.submit();
+			}
+		}, 250 );
+	}
+	function onKeyUp( event ) {
+		if ( 'Escape' === event.key ) {
+			dropdown.dataset.lastkey = 'escape';
+		} else {
+			delete dropdown.dataset.lastkey;
 		}
 	}
-	dropdown.onchange = onCatChange;
-})();
+	function onClick() {
+		delete dropdown.dataset.lastkey;
+	}
+	dropdown.addEventListener( 'keyup', onKeyUp );
+	dropdown.addEventListener( 'click', onClick );
+	dropdown.addEventListener( 'change', onSelectChange );
+})( <?php echo wp_json_encode( $dropdown_id, JSON_HEX_TAG | JSON_UNESCAPED_SLASHES ); ?> );
 </script>
 
 			<?php