Ticket #26527: 26527.7.diff

wp-admin/js/theme.js

@@ -188 +188 @@
 
         events: {
                 'click': 'expand',
+                'keydown': 'expand',
                 'touchend': 'expand',
                 'touchmove': 'preventExpand'
         },
@@ -197 +198 @@
         render: function() {
                 var data = this.model.toJSON();
                 // Render themes using the html template
-                this.$el.html( this.html( data ) );
+                this.$el.html( this.html( data ) ).attr( 'tabindex', 0 );
+
                 // Renders active theme styles
                 this.activeTheme();
 
@@ -219 +221 @@
         expand: function( event ) {
                 var self = this;
 
+                event = event || window.event;
+
+                // 'enter' and 'space' keys expand the details view when a theme is :focused
+                if ( event.type === 'keydown' && ( event.which !== 13 && event.which !== 32 ) ) {
+                        return;
+                }
+
                 // Bail if the user scrolled on a touch device
                 if ( this.touchDrag === true ) {
                         return this.touchDrag = false;
                 }
 
-                event = event || window.event;
-
                 // Prevent the modal from showing when the user clicks
                 // one of the direct action buttons
                 if ( $( event.target ).is( '.theme-actions a' ) ) {
                         return;
                 }
 
+                // Set focused theme to current element
+                themes.focusedTheme = this.$el;
+
                 this.trigger( 'theme:expand', self.model.cid );
         },
 
@@ -266 +276 @@
                 this.navigation();
                 // Checks screenshot size
                 this.screenshotCheck( this.$el );
+                // Contain "tabbing" inside the overlay
+                this.containFocus( this.$el );
+
+                // Move focus to the default action
+                window.setTimeout( function() {
+                        $( '.theme-wrap a.button-primary:visible' ).focus();
+                }, 500 );
         },
 
         // Adds a class to the currently active theme
@@ -275 +292 @@
                 this.$el.toggleClass( 'active', this.model.get( 'active' ) );
         },
 
+        // Keeps :focus within the theme details elements
+        containFocus: function( $el ) {
+                var $target;
+
+                $el.on( 'keydown.wp-themes', function( event ) {
+
+                        event = event || window.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();
+                                        event.preventDefault();
+                                } else if ( $target.is( '.theme-actions a:last-child' ) ) {
+                                        $el.find( 'button.left' ).focus();
+                                        event.preventDefault();
+                                }
+                        }
+                });
+        },
+
         // Single theme overlay screen
         // It's shown when clicking a theme
         collapse: function( event ) {
@@ -291 +333 @@
                 // Detect if the click is inside the overlay
                 // and don't close it unless the target was
                 // the div.back button
-                if ( $( event.target ).is( '.theme-backdrop' ) || $( event.target ).is( 'div.close' ) || event.keyCode === 27 ) {
+                if ( $( event.target ).is( '.theme-backdrop' ) || $( event.target ).is( '.close' ) || event.keyCode === 27 ) {
 
                         // Add a temporary closing class while overlay fades out
                         $( 'body' ).addClass( 'closing-overlay' );
@@ -311 +353 @@
 
                                 // Restore scroll position
                                 document.body.scrollTop = scroll;
+
+                                // Return focus to the theme div
+                                if ( themes.focusedTheme ) {
+                                        themes.focusedTheme.focus();
+                                }
                         });
                 }
         },

wp-admin/css/wp-admin.css

@@ -6486 +6486 @@
         -webkit-transition: opacity 0.1s ease-in-out;
         transition:         opacity 0.1s ease-in-out;
 }
+.theme-browser .theme:focus {
+        outline: 1px dotted #222;
+}
+/* Hide shortcut actions and hover feedback when using tab navigation */
+.theme-browser .theme:focus .theme-actions {
+        display: none;
+}
+/* Restore display of theme controls if you hover a focused theme */
+.theme-browser .theme:focus:hover .theme-actions {
+        display: block;
+}
+.theme-browser .theme:focus .more-details {
+        opacity: 1;
+}
+/* Current theme needs to have its action always on view */
+.theme-browser .theme.active:focus .theme-actions {
+        display: block;
+}
 
 .theme-browser.rendered .theme:hover .more-details {
         opacity: 1;
@@ -6711 +6729 @@
         width: 50px;
         text-align: center;
         float: right;
+        border: 0;
         border-left: 1px solid #ddd;
+        background-color: transparent;
 }
 
-.theme-overlay .theme-header .close:hover:before {
+.theme-overlay .theme-header .close:hover:before,
+.theme-overlay .theme-header .close:focus:before {
         color: #fff;
 }
 
@@ -6731 +6752 @@
 .theme-overlay .theme-header .left {
         cursor: pointer;
         color: #777;
+        background-color: transparent;
         height: 48px;
         width: 54px;
         float: left;
         text-align: center;
+        border: 0;
         border-right: 1px solid #ddd;
-        -webkit-user-select: none;
-        -moz-user-select:    none;
-        -ms-user-select:     none;
-        user-select:         none;
 }
 
 .theme-overlay .theme-header .close:hover,
 .theme-overlay .theme-header .right:hover,
-.theme-overlay .theme-header .left:hover {
+.theme-overlay .theme-header .left:hover,
+.theme-overlay .theme-header .close:focus,
+.theme-overlay .theme-header .right:focus,
+.theme-overlay .theme-header .left:focus {
         background: #0074a2;
         color: #fff;
 }

wp-admin/themes.php

@@ -192 +192 @@
  */
 
 foreach ( $themes as $theme ) : ?>
-<div class="theme<?php if ( $theme['active'] ) echo ' active'; ?>">
+<div class="theme<?php if ( $theme['active'] ) echo ' active'; ?>" tabindex="0">
         <?php if ( ! empty( $theme['screenshot'][0] ) ) { ?>
                 <div class="theme-screenshot">
                         <img src="<?php echo $theme['screenshot'][0]; ?>" alt="" />
@@ -279 +279 @@
         <# } #>
         <span class="more-details"><?php _e( 'Theme Details' ); ?></span>
         <div class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.author }}}' ); ?></div>
-        
+
         <# if ( data.active ) { #>
                 <h3 class="theme-name"><span><?php _ex( 'Active:', 'theme' ); ?></span> {{{ data.name }}}</h3>
         <# } else { #>
@@ -309 +309 @@
         <div class="theme-backdrop"></div>
         <div class="theme-wrap">
                 <div class="theme-header">
-                        <div alt="<?php _e( 'Close overlay' ); ?>" class="close dashicons dashicons-no"></div>
-                        <div alt="<?php _e( 'Show previous theme' ); ?>" class="left dashicons dashicons-no"></div>
-                        <div alt="<?php _e( 'Show next theme' ); ?>" class="right dashicons dashicons-no"></div>
+                        <button alt="<?php _e( 'Show previous theme' ); ?>" class="left dashicons dashicons-no"></button>
+                        <button alt="<?php _e( 'Show next theme' ); ?>" class="right dashicons dashicons-no"></button>
+                        <button alt="<?php _e( 'Close overlay' ); ?>" class="close dashicons dashicons-no"></button>
                 </div>
                 <div class="theme-about">
                         <div class="theme-screenshots">