Accessibility: Improve the Themes Installer navigation buttons accessibility.
- really disables buttons when they look disabled (when navigation is at the first or last theme) - when navigation is at the first or last theme, moves focus to the other navigation button, to avoid a focus loss - improves the buttons visually hidden accessibility text Props walbo, afercia. Fixes #36627. git-svn-id: https://develop.svn.wordpress.org/trunk@43020 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
parent
75ca3d6386
commit
52e28b4085
|
@ -573,16 +573,26 @@ themes.view.Theme = wp.Backbone.View.extend({
|
||||||
// Handles .disabled classes for previous/next buttons in theme installer preview
|
// Handles .disabled classes for previous/next buttons in theme installer preview
|
||||||
setNavButtonsState: function() {
|
setNavButtonsState: function() {
|
||||||
var $themeInstaller = $( '.theme-install-overlay' ),
|
var $themeInstaller = $( '.theme-install-overlay' ),
|
||||||
current = _.isUndefined( this.current ) ? this.model : this.current;
|
current = _.isUndefined( this.current ) ? this.model : this.current,
|
||||||
|
previousThemeButton = $themeInstaller.find( '.previous-theme' ),
|
||||||
|
nextThemeButton = $themeInstaller.find( '.next-theme' );
|
||||||
|
|
||||||
// Disable previous at the zero position
|
// Disable previous at the zero position
|
||||||
if ( 0 === this.model.collection.indexOf( current ) ) {
|
if ( 0 === this.model.collection.indexOf( current ) ) {
|
||||||
$themeInstaller.find( '.previous-theme' ).addClass( 'disabled' );
|
previousThemeButton
|
||||||
|
.addClass( 'disabled' )
|
||||||
|
.prop( 'disabled', true );
|
||||||
|
|
||||||
|
nextThemeButton.focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Disable next if the next model is undefined
|
// Disable next if the next model is undefined
|
||||||
if ( _.isUndefined( this.model.collection.at( this.model.collection.indexOf( current ) + 1 ) ) ) {
|
if ( _.isUndefined( this.model.collection.at( this.model.collection.indexOf( current ) + 1 ) ) ) {
|
||||||
$themeInstaller.find( '.next-theme' ).addClass( 'disabled' );
|
nextThemeButton
|
||||||
|
.addClass( 'disabled' )
|
||||||
|
.prop( 'disabled', true );
|
||||||
|
|
||||||
|
previousThemeButton.focus();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -309,8 +309,8 @@ if ( $tab ) {
|
||||||
<div class="wp-full-overlay-sidebar">
|
<div class="wp-full-overlay-sidebar">
|
||||||
<div class="wp-full-overlay-header">
|
<div class="wp-full-overlay-header">
|
||||||
<button class="close-full-overlay"><span class="screen-reader-text"><?php _e( 'Close' ); ?></span></button>
|
<button class="close-full-overlay"><span class="screen-reader-text"><?php _e( 'Close' ); ?></span></button>
|
||||||
<button class="previous-theme"><span class="screen-reader-text"><?php _ex( 'Previous', 'Button label for a theme' ); ?></span></button>
|
<button class="previous-theme"><span class="screen-reader-text"><?php _e( 'Previous theme' ); ?></span></button>
|
||||||
<button class="next-theme"><span class="screen-reader-text"><?php _ex( 'Next', 'Button label for a theme' ); ?></span></button>
|
<button class="next-theme"><span class="screen-reader-text"><?php _e( 'Next theme' ); ?></span></button>
|
||||||
<# if ( data.installed ) { #>
|
<# if ( data.installed ) { #>
|
||||||
<a class="button button-primary activate" href="{{ data.activate_url }}"><?php _e( 'Activate' ); ?></a>
|
<a class="button button-primary activate" href="{{ data.activate_url }}"><?php _e( 'Activate' ); ?></a>
|
||||||
<# } else { #>
|
<# } else { #>
|
||||||
|
|
Loading…
Reference in New Issue