[wp-trac] [WordPress Trac] #26633: Customizer form submission prevention impairs accessibility of links in customizer controls

[WordPress Trac]

#26633: Customizer form submission prevention impairs accessibility of links in
customizer controls
---------------------------+-----------------------------
 Reporter:  westonruter    |      Owner:
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Accessibility  |    Version:  3.4
 Severity:  normal         |   Keywords:
---------------------------+-----------------------------
 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

--
Ticket URL: <http://core.trac.wordpress.org/ticket/26633>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software