Changeset 61104

Timestamp:

10/31/2025 06:52:06 PM (9 months ago)

Author:

joedolson

Message:

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.

Location:

trunk/src/wp-includes/widgets

Files:

• class-wp-widget-archives.php (modified) (1 diff)
• class-wp-widget-categories.php (modified) (1 diff)

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

@@ -110 +110 @@
                         <?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

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

@@ -97 +97 @@
 
 <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>