Changeset 37230

Timestamp:

04/17/2016 03:40:50 PM (9 years ago)

Author:

afercia

Message:

Accessibility: Customizer, improve UI controls in customize.php

• makes the mobile preview/customize toggle a button
• changes the "Close" link hidden text from 'Cancel' to 'Close the Customizer and go back to the previous page'
• adds a missing type="button" attribute
• removes unnecessary keydown events and preventDefault(): buttons don't need a keydown event and when they have a type="button" attribute there's no default action to prevent

Props Cheffheid, afercia.

Fixes #31487.

Location:

trunk/src/wp-admin

Files:

• css/customize-controls.css (modified) (1 diff)
• customize.php (modified) (2 diffs)
• js/customize-controls.js (modified) (2 diffs)

trunk/src/wp-admin/css/customize-controls.css

@@ -1551 +1551 @@
         line-height: 45px;
         font-size: 14px;
-        padding: 0 12px 0 12px;
+        padding: 0 12px;
         margin: 0;
         height: 45px;
         background: #eee;
+        border: 0;
         border-right: 1px solid #ddd;
         color: #444;

trunk/src/wp-admin/customize.php

@@ -119 +119 @@
             ?>
             <span class="spinner"></span>
-            <a class="customize-controls-preview-toggle" href="#">
+            <button type="button" class="customize-controls-preview-toggle">
                 <span class="controls"><?php _e( 'Customize' ); ?></span>
                 <span class="preview"><?php _e( 'Preview' ); ?></span>
-            </a>
+            </button>
             <a class="customize-controls-close" href="<?php echo esc_url( $wp_customize->get_return_url() ); ?>">
-                <span class="screen-reader-text"><?php _e( 'Cancel' ); ?></span>
+                <span class="screen-reader-text"><?php _e( 'Close the Customizer and go back to the previous page' ); ?></span>
             </a>
         </div>
@@ -135 +135 @@
                         echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title site-title">' . get_bloginfo( 'name' ) . '</strong>' );
                     ?></span>
-                    <button class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
+                    <button type="button" class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
                 </div>
                 <div class="customize-panel-description"><?php

trunk/src/wp-admin/js/customize-controls.js

@@ -3273 +3273 @@
 
         // Expand/Collapse the main customizer customize info.
-        $( '.customize-info' ).find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) {
-            if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
-                return;
-            }
-            event.preventDefault(); // Keep this AFTER the key filter above
-
+        $( '.customize-info' ).find( '> .accordion-section-title .customize-help-toggle' ).on( 'click', function() {
             var section = $( this ).closest( '.accordion-section' ),
                 content = section.find( '.customize-panel-description:first' );
@@ -3634 +3629 @@
         });
 
-        $( '.customize-controls-preview-toggle' ).on( 'click keydown', function( event ) {
-            if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
-                return;
-            }
-
+        $( '.customize-controls-preview-toggle' ).on( 'click', function() {
             overlay.toggleClass( 'preview-only' );
-            event.preventDefault();
         });