Accessibility: Improve keyboard navigation on the themes browser modal window.

Improves the `containFocus()` function to always get the correct first and last
focusable elements, even when the theme browser shows the active theme details.
Also, when on the first and last theme, adds a `disabled` attribute on the
previous and next navigation buttons to make them not focusable.

Fixes #37383.
Built from https://develop.svn.wordpress.org/trunk@38084


git-svn-id: http://core.svn.wordpress.org/trunk@38025 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia 2016-07-17 22:19:30 +00:00
parent 36e46af382
commit bf24773fc6
3 changed files with 20 additions and 18 deletions

View File

@ -669,28 +669,26 @@ themes.view.Details = wp.Backbone.View.extend({
this.$el.toggleClass( 'active', this.model.get( 'active' ) );
},
// Keeps :focus within the theme details elements
// Set initial focus and constrain tabbing within the theme browser modal.
containFocus: function( $el ) {
var $target;
// Move focus to the primary action
// Set initial focus on the primary action control.
_.delay( function() {
$( '.theme-wrap a.button-primary:visible' ).focus();
}, 500 );
}, 100 );
// Constrain tabbing within the modal.
$el.on( 'keydown.wp-themes', function( event ) {
var $firstFocusable = $el.find( '.theme-header button:not(.disabled)' ).first(),
$lastFocusable = $el.find( '.theme-actions a:visible' ).last();
// Tab key
if ( event.which === 9 ) {
$target = $( event.target );
// Keep focus within the overlay by making the last link on theme actions
// switch focus to button.left on tabbing and vice versa
if ( $target.is( 'button.left' ) && event.shiftKey ) {
$el.find( '.theme-actions a:last-child' ).focus();
// Check for the Tab key.
if ( 9 === event.which ) {
if ( $firstFocusable[0] === event.target && event.shiftKey ) {
$lastFocusable.focus();
event.preventDefault();
} else if ( $target.is( '.theme-actions a:last-child' ) ) {
$el.find( 'button.left' ).focus();
} else if ( $lastFocusable[0] === event.target && ! event.shiftKey ) {
$firstFocusable.focus();
event.preventDefault();
}
}
@ -747,10 +745,14 @@ themes.view.Details = wp.Backbone.View.extend({
// Disable Left/Right when at the start or end of the collection
if ( this.model.cid === this.model.collection.at(0).cid ) {
this.$el.find( '.left' ).addClass( 'disabled' );
this.$el.find( '.left' )
.addClass( 'disabled' )
.prop( 'disabled', true );
}
if ( this.model.cid === this.model.collection.at( this.model.collection.length - 1 ).cid ) {
this.$el.find( '.right' ).addClass( 'disabled' );
this.$el.find( '.right' )
.addClass( 'disabled' )
.prop( 'disabled', true );
}
},

File diff suppressed because one or more lines are too long

View File

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