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.
Built from https://develop.svn.wordpress.org/trunk@37230


git-svn-id: http://core.svn.wordpress.org/trunk@37196 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia 2016-04-17 15:41:27 +00:00
parent 85cac9d47e
commit e38ab38b1f
8 changed files with 14 additions and 22 deletions

View File

@ -1550,10 +1550,11 @@ body.adding-widget .add-new-widget:before,
right: 48px; right: 48px;
line-height: 45px; line-height: 45px;
font-size: 14px; font-size: 14px;
padding: 0 12px 0 12px; padding: 0 12px;
margin: 0; margin: 0;
height: 45px; height: 45px;
background: #eee; background: #eee;
border: 0;
border-left: 1px solid #ddd; border-left: 1px solid #ddd;
color: #444; color: #444;
cursor: pointer; cursor: pointer;

File diff suppressed because one or more lines are too long

View File

@ -1550,10 +1550,11 @@ body.adding-widget .add-new-widget:before,
left: 48px; left: 48px;
line-height: 45px; line-height: 45px;
font-size: 14px; font-size: 14px;
padding: 0 12px 0 12px; padding: 0 12px;
margin: 0; margin: 0;
height: 45px; height: 45px;
background: #eee; background: #eee;
border: 0;
border-right: 1px solid #ddd; border-right: 1px solid #ddd;
color: #444; color: #444;
cursor: pointer; cursor: pointer;

File diff suppressed because one or more lines are too long

View File

@ -118,12 +118,12 @@ do_action( 'customize_controls_print_scripts' );
submit_button( $save_text, 'primary save', 'save', false ); submit_button( $save_text, 'primary save', 'save', false );
?> ?>
<span class="spinner"></span> <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="controls"><?php _e( 'Customize' ); ?></span>
<span class="preview"><?php _e( 'Preview' ); ?></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() ); ?>"> <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> </a>
</div> </div>
@ -134,7 +134,7 @@ do_action( 'customize_controls_print_scripts' );
<span class="preview-notice"><?php <span class="preview-notice"><?php
echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title site-title">' . get_bloginfo( 'name' ) . '</strong>' ); echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title site-title">' . get_bloginfo( 'name' ) . '</strong>' );
?></span> ?></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>
<div class="customize-panel-description"><?php <div class="customize-panel-description"><?php
_e( 'The Customizer allows you to preview changes to your site before publishing them. You can also navigate to different pages on your site to preview them.' ); _e( 'The Customizer allows you to preview changes to your site before publishing them. You can also navigate to different pages on your site to preview them.' );

View File

@ -3272,12 +3272,7 @@
}); });
// Expand/Collapse the main customizer customize info. // Expand/Collapse the main customizer customize info.
$( '.customize-info' ).find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) { $( '.customize-info' ).find( '> .accordion-section-title .customize-help-toggle' ).on( 'click', function() {
if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
return;
}
event.preventDefault(); // Keep this AFTER the key filter above
var section = $( this ).closest( '.accordion-section' ), var section = $( this ).closest( '.accordion-section' ),
content = section.find( '.customize-panel-description:first' ); content = section.find( '.customize-panel-description:first' );
@ -3633,13 +3628,8 @@
overlay.toggleClass( 'collapsed' ).toggleClass( 'expanded' ); overlay.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
}); });
$( '.customize-controls-preview-toggle' ).on( 'click keydown', function( event ) { $( '.customize-controls-preview-toggle' ).on( 'click', function() {
if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
return;
}
overlay.toggleClass( 'preview-only' ); overlay.toggleClass( 'preview-only' );
event.preventDefault();
}); });
// Previewed device bindings. // Previewed device bindings.

File diff suppressed because one or more lines are too long

View File

@ -4,7 +4,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '4.6-alpha-37229'; $wp_version = '4.6-alpha-37230';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.