WordPress.org
Get WordPress

Make WordPress Core

Changeset 61104


Ignore:
Timestamp:
10/31/2025 06:52:06 PM (3 weeks 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:
2 edited

Legend:

Unmodified
Added
Removed

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

    r60909 r61104  
    110110            <?php ob_start(); ?>
    111111<script>
    112 (function() {
    113     var dropdown = document.getElementById( "<?php echo esc_js( $dropdown_id ); ?>" );
     112( ( dropdownId ) => {
     113    const dropdown = document.getElementById( dropdownId );
    114114    function onSelectChange() {
    115         if ( dropdown.options[ dropdown.selectedIndex ].value !== '' ) {
    116             document.location.href = this.options[ this.selectedIndex ].value;
     115        setTimeout( () => {
     116            if ( 'escape' === dropdown.dataset.lastkey ) {
     117                return;
     118            }
     119            if ( dropdown.value ) {
     120                document.location.href = dropdown.value;
     121            }
     122        }, 250 );
     123    }
     124    function onKeyUp( event ) {
     125        if ( 'Escape' === event.key ) {
     126            dropdown.dataset.lastkey = 'escape';
     127        } else {
     128            delete dropdown.dataset.lastkey;
    117129        }
    118130    }
    119     dropdown.onchange = onSelectChange;
    120 })();
     131    function onClick() {
     132        delete dropdown.dataset.lastkey;
     133    }
     134    dropdown.addEventListener( 'keyup', onKeyUp );
     135    dropdown.addEventListener( 'click', onClick );
     136    dropdown.addEventListener( 'change', onSelectChange );
     137})( <?php echo wp_json_encode( $dropdown_id, JSON_HEX_TAG | JSON_UNESCAPED_SLASHES ); ?> );
    121138</script>
    122139            <?php

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

    r60909 r61104  
    9797
    9898<script>
    99 (function() {
    100     var dropdown = document.getElementById( "<?php echo esc_js( $dropdown_id ); ?>" );
    101     function onCatChange() {
    102         if ( dropdown.options[ dropdown.selectedIndex ].value > 0 ) {
    103             dropdown.parentNode.submit();
     99( ( dropdownId ) => {
     100    const dropdown = document.getElementById( dropdownId );
     101    function onSelectChange() {
     102        setTimeout( () => {
     103            if ( 'escape' === dropdown.dataset.lastkey ) {
     104                return;
     105            }
     106            if ( dropdown.value && parseInt( dropdown.value ) > 0 && dropdown instanceof HTMLSelectElement ) {
     107                dropdown.parentElement.submit();
     108            }
     109        }, 250 );
     110    }
     111    function onKeyUp( event ) {
     112        if ( 'Escape' === event.key ) {
     113            dropdown.dataset.lastkey = 'escape';
     114        } else {
     115            delete dropdown.dataset.lastkey;
    104116        }
    105117    }
    106     dropdown.onchange = onCatChange;
    107 })();
     118    function onClick() {
     119        delete dropdown.dataset.lastkey;
     120    }
     121    dropdown.addEventListener( 'keyup', onKeyUp );
     122    dropdown.addEventListener( 'click', onClick );
     123    dropdown.addEventListener( 'change', onSelectChange );
     124})( <?php echo wp_json_encode( $dropdown_id, JSON_HEX_TAG | JSON_UNESCAPED_SLASHES ); ?> );
    108125</script>
    109126
Note: See TracChangeset for help on using the changeset viewer.