Ticket #26527: 26527.3.diff

src/wp-admin/css/wp-admin.css

@@ -6416 +6416 @@
         border-left: 1px solid rgba(0,0,0,0.05);
 }
 
+.theme-browser .theme:focus .theme-actions,
+.theme-browser .theme.hover .theme-actions,
 .theme-browser .theme:hover .theme-actions {
         opacity: 1;
 }
@@ -6471 +6473 @@
 .theme-browser .theme .more-details {
         opacity: 0;
         position: absolute;
-                top: 35%;
-                right: 25%;
-                left: 25%;
+        top: 35%;
+        right: 25%;
+        left: 25%;
+        margin: auto;
+        width: 50%;
         background: rgba(0,0,0,0.7);
         color: #fff;
         font-size: 15px;
@@ -6482 +6486 @@
         font-weight: 600;
         padding: 15px 12px;
         text-align: center;
+        border: 0;
         border-radius: 3px;
         -webkit-transition: opacity 0.1s ease-in-out;
         transition:         opacity 0.1s ease-in-out;
 }
 
+.theme-browser .theme .more-details:focus {
+        outline: 1px dotted #000;
+}
+
+.theme-browser.rendered .theme.hover .more-details,
 .theme-browser.rendered .theme:hover .more-details {
         opacity: 1;
 }
@@ -6711 +6721 @@
         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 +6744 @@
 .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;
 }

src/wp-admin/js/theme.js

@@ -4 +4 @@
 ( function($) {
 
 // Set up our namespace...
-var themes, l10n;
+var themes, l10n, $focusedTheme;
 themes = wp.themes = wp.themes || {};
 
 // Store the theme data and settings for organized and quick access
@@ -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;
 
+                if ( event.type === 'keydown' && ( event.which !== 13 && event.which !== 32 ) ) { // enter && space
+                        return;
+                }
+
                 // Bail if the user scrolled on a touch device
                 if ( this.touchDrag === true ) {
                         return this.touchDrag = false;
@@ -232 +238 @@
                         return;
                 }
 
+                $focusedTheme = this.$el;
                 this.trigger( 'theme:expand', self.model.cid );
         },
 
@@ -266 +273 @@
                 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 +289 @@
                 this.$el.toggleClass( 'active', this.model.get( 'active' ) );
         },
 
+        containFocus: function( $el ) {
+                $el.on( 'keydown.wp-themes', function( event ) {
+                        var $target;
+
+                        if ( event.which === 9 ) {
+                                $target = $( event.target );
+
+                                if ( $target.is( 'button.left' ) && event.shiftKey ) {
+                                        $el.find( 'a.delete-theme' ).focus();
+                                        event.preventDefault();
+                                } else if ( $target.is( 'a.delete-theme' ) ) {
+                                        $el.find( 'button.left' ).focus();
+                                        event.preventDefault();
+                                }
+                        }
+                });
+        },
+
         // Single theme overlay screen
         // It's shown when clicking a theme
         collapse: function( event ) {
@@ -291 +323 @@
                 // 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 +343 @@
 
                                 // Restore scroll position
                                 document.body.scrollTop = scroll;
+
+                                // Return focus to the theme div
+                                if ( $focusedTheme ) {
+                                        $focusedTheme.focus();
+                                }
                         });
                 }
         },
@@ -735 +772 @@
         };
 
         $(window).resize(function(){ tb_position(); });
+
+        $('.theme-browser .theme').on( 'focusin.wp-themes', function() {
+                $(this).addClass('hover').siblings('.hover').removeClass('hover');
+        }).on( 'focusout.wp-themes blur.wp-themes', function() {
+                $(this).removeClass('hover');
+        });
 });

src/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="" />
@@ -200 +200 @@
         <?php } else { ?>
                 <div class="theme-screenshot blank"></div>
         <?php } ?>
-        <span class="more-details"><?php _e( 'Theme Details' ); ?></span>
+        <button class="more-details"><?php _e( 'Theme Details' ); ?></button>
         <div class="theme-author"><?php printf( __( 'By %s' ), $theme['author'] ); ?></div>
 
         <?php if ( $theme['active'] ) { ?>
@@ -277 +277 @@
         <# } else { #>
                 <div class="theme-screenshot blank"></div>
         <# } #>
-        <span class="more-details"><?php _e( 'Theme Details' ); ?></span>
+        <button class="more-details" tabindex="0"><?php _e( 'Theme Details' ); ?></button>
         <div class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.author }}}' ); ?></div>
         
         <# if ( data.active ) { #>
@@ -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">