Changeset 38084

Timestamp:

07/17/2016 10:18:35 PM (8 years ago)

Author:

afercia

Message:

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.

File:

• trunk/src/wp-admin/js/theme.js (modified) (2 diffs)

trunk/src/wp-admin/js/theme.js

@@ -670 +670 @@
     },
 
-    // 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 ) {
-
-            // 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();
+            var $firstFocusable = $el.find( '.theme-header button:not(.disabled)' ).first(),
+                $lastFocusable = $el.find( '.theme-actions a:visible' ).last();
+
+            // 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();
                 }
@@ -748 +746 @@
         // 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 );
         }
     },