Ticket #31791: 31791.diff

src/wp-admin/css/customize-controls.css

@@ -883 +883 @@
         margin-bottom: 8px;
 }
 
+.wp-customizer .theme-browser .themes .more-details {
+        z-index: 1;
+}
+.wp-customizer .theme-browser .theme a:focus .more-details {
+        opacity: 1;
+}
+
 .wp-customizer .theme-browser .themes {
         padding-bottom: 8px;
 }

src/wp-admin/js/customize-controls.js

@@ -639 +639 @@
                                 section.closeDetails();
                         });
 
-                        section.container.on( 'click keydown', '.theme-actions .button', function( event ) {
-                                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
-                                        return;
-                                }
-
-                                $( '.wp-full-overlay' ).addClass( 'customize-loading' );
-                        });
-
                         section.container.on( 'input', '#themes-filter', function( event ) {
                                 var count,
                                         term = event.currentTarget.value.toLowerCase().trim().replace( '-', ' ' ),
@@ -1854 +1846 @@
                         var control = this;
 
                         // Bind details view trigger.
-                        control.container.on( 'click keydown', '.theme', function( event ) {
+                        control.container.on( 'click keydown', '.theme-actions .button', function( event ) {
                                 if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
                                         return;
                                 }
 
-                                if ( 'button' === event.target.className ) {
-                                        return;
-                                }
-
                                 api.section( control.section() ).showDetails( control.params.theme );
                         });
 
-                        control.container.on( 'click keydown', '.theme-actions .button', function( event ) {
+                        control.container.on( 'click keydown', '.preview-link', function( event ) {
                                 if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
                                         return;
                                 }

src/wp-includes/class-wp-customize-control.php

@@ -1201 +1201 @@
          */
         public function content_template() {
         ?>
-                <div class="theme<# if ( data.theme.active ) { #> active<# } #>" tabindex="0" aria-describedby="{{ data.theme.id }}-action {{ data.theme.id }}-name">
+                <div class="theme<# if ( data.theme.active ) { #> active<# } #>" aria-describedby="{{ data.theme.id }}-action {{ data.theme.id }}-name">
                         <# if ( data.theme.screenshot[0] ) { #>
                                 <div class="theme-screenshot">
-                                        <img src="{{ data.theme.screenshot[0] }}" alt="" />
+                                        <a class="preview-link" href="<?php echo add_query_arg( 'theme', '{{ data.theme.id }}', remove_query_arg( 'theme' ) ); ?>" target="_top">
+                                                <span class="more-details"><?php _e( 'Live Preview' ); ?></span>
+                                                <img src="{{ data.theme.screenshot[0] }}" alt="{{ data.theme.name }}" />
+                                        </a>
                                 </div>
                         <# } else { #>
                                 <div class="theme-screenshot blank"></div>
                         <# } #>
-                        <span class="more-details" id="{{ data.theme.id }}-action"><?php _e( 'Theme Details' ); ?></span>
                         <div class="theme-author"><?php printf( __( 'By %s' ), '{{ data.theme.author }}' ); ?></div>
 
                         <# if ( data.theme.active ) { #>
@@ -1225 +1227 @@
 
                         <# if ( ! data.theme.active ) { #>
                                 <div class="theme-actions">
-                                        <a class="button" href="<?php echo add_query_arg( 'theme', '{{ data.theme.id }}', remove_query_arg( 'theme' ) ); ?>" target="_top"><?php _e( 'Live Preview' ); ?></a>
+                                        <span class="button" tabindex="0" id="{{ data.theme.id }}-action"><?php _e( 'Theme Details' ); ?></span>
                                 </div>
                         <# } #>
                 </div>