id,summary,reporter,owner,description,type,status,priority,milestone,component,version,severity,resolution,keywords,cc,focuses
26633,Customizer form submission prevention impairs accessibility of links in customizer controls,westonruter,ocean90,"In working on the Widget Customizer feature-as-plugin, we're embedding the `wp_widget_control()` directly inside of a Customizer control. A widget control includes not only `input` elements, but also buttons and links which serve as buttons (e.g. Update, Delete, and Close). We're listening for `click` events on these buttons and pseudo-buttons to then update the widget, close the widget control form, and remove the widget entirely. However, when attempting to invoke those links by hitting Enter on the keyboard, the `click` handler is not fired as the normal default action. I narrowed the problem down to this:
{{{#!javascript
// Prevent the form from saving when enter is pressed.
$('#customize-controls').on( 'keydown', function( e ) {
if ( $( e.target ).is('textarea') )
return;
if ( 13 === e.which ) // Enter
e.preventDefault();
});
}}}
The condition for `preventDefault` is matching more often than it should, namely it should only `preventDefault` if Enter was pressed inside of a non-button `input` element, as this should be the only kind of element which triggers a form submit.
Here is a reworked `keydown` event handler which doesn't disable `click` events from being triggered when they should be:
{{{#!javascript
// Prevent the form from saving when enter is pressed on an input element.
$( '#customize-controls' ).on( 'keydown', function( e ) {
var is_enter = ( 13 === e.which );
if ( is_enter && $( e.target ).is( 'input:not([type=button])' ) ) {
e.preventDefault();
}
} );
}}}
Introduced in r20035 from #19910. Related to #20879.
/cc koopersmith
",defect (bug),closed,normal,3.9,Customize,3.4,normal,fixed,has-patch needs-testing,,accessibility