sergiotarxz
/
Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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.

git-svn-id: https://develop.svn.wordpress.org/trunk@38084 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia 2016-07-17 22:18:35 +00:00
parent 57fe32e081
commit 7b833f38a6
1 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/wp-admin/js/theme.js
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 );
}
},