Ticket #52649: 52649.2.diff

src/js/_enqueues/wp/theme.js

@@ -404 +404 @@
                 var data = this.model.toJSON();
 
                 // Render themes using the html template.
-                this.$el.html( this.html( data ) ).attr({
-                        tabindex: 0,
-                        'aria-describedby' : data.id + '-action ' + data.id + '-name',
-                        'data-slug': data.id
-                });
+                this.$el.html( this.html( data ) ).attr( 'data-slug', data.id );
 
                 // Renders active theme styles.
                 this.activeTheme();
@@ -764 +760 @@
 
                                 // Return focus to the theme div.
                                 if ( themes.focusedTheme ) {
-                                        themes.focusedTheme.trigger( 'focus' );
+                                        themes.focusedTheme.find('.more-details').trigger( 'focus' );
                                 }
                         });
                 }
@@ -952 +948 @@
 
                         // Return focus to the theme div.
                         if ( themes.focusedTheme ) {
-                                themes.focusedTheme.trigger( 'focus' );
+                                themes.focusedTheme.find('.more-details').trigger( 'focus' );
                         }
                 }).removeClass( 'iframe-ready' );
 

src/wp-admin/css/themes.css

@@ -66 +66 @@
 }
 
 .theme-browser .theme:hover,
-.theme-browser .theme:focus {
+.theme-browser .theme.focus {
         cursor: pointer;
 }
 
@@ -95 +95 @@
 }
 
 .theme-browser .theme:hover .theme-actions,
-.theme-browser .theme.focus .theme-actions,
-.theme-browser .theme:focus .theme-actions {
+.theme-browser .theme.focus .theme-actions {
         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
         opacity: 1;
 }
@@ -140 +139 @@
 }
 
 .theme-browser .theme:hover .theme-screenshot,
-.theme-browser .theme:focus .theme-screenshot {
+.theme-browser .theme.focus .theme-screenshot {
         background: #fff;
 }
 
 .theme-browser.rendered .theme:hover .theme-screenshot img,
-.theme-browser.rendered .theme:focus .theme-screenshot img {
+.theme-browser.rendered .theme.focus .theme-screenshot img {
         opacity: 0.4;
 }
 
@@ -169 +168 @@
         transition: opacity 0.1s ease-in-out;
 }
 
-.theme-browser .theme:focus {
+.theme-browser .theme.focus {
         border-color: #4f94d4;
         box-shadow: 0 0 2px rgba(79, 148, 212, 0.8);
 }
 
-.theme-browser .theme:focus .more-details {
+.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 {
+.theme-browser .theme.active.focus .theme-actions {
         display: block;
 }
 
 .theme-browser.rendered .theme:hover .more-details,
-.theme-browser.rendered .theme:focus .more-details {
+.theme-browser.rendered .theme.focus .more-details {
         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
         opacity: 1;
 }
@@ -878 +877 @@
         .theme:not(.active):hover .theme-actions,
         .theme:not(.active):focus .theme-actions,
         .theme:hover .more-details,
-        .theme:focus .more-details {
+        .theme.focus .more-details {
                 display: none;
         }
 
         .theme-browser.rendered .theme:hover .theme-screenshot img,
-        .theme-browser.rendered .theme:focus .theme-screenshot img {
+        .theme-browser.rendered .theme.focus .theme-screenshot img {
                 opacity: 1.0;
         }
 }

src/wp-admin/themes.php

@@ -379 +379 @@
                 $active_class = ' active';
         }
         ?>
-<div class="theme<?php echo $active_class; ?>" tabindex="0" aria-describedby="<?php echo $aria_action . ' ' . $aria_name; ?>">
+<div class="theme<?php echo $active_class; ?>">
         <?php if ( ! empty( $theme['screenshot'][0] ) ) { ?>
                 <div class="theme-screenshot">
                         <img src="<?php echo $theme['screenshot'][0]; ?>" alt="" />
@@ -512 +512 @@
         }
         ?>
 
-        <span class="more-details" id="<?php echo $aria_action; ?>"><?php _e( 'Theme Details' ); ?></span>
+        <?php
+        /* translators: %s: Theme name. */
+        $details_aria_label = sprintf( _x( 'View Theme Details for %s', 'theme' ), $theme['name'] );
+        ?>
+        <button type="button" aria-label="<?php echo esc_attr( $details_aria_label ); ?>" class="more-details" id="<?php echo $aria_action; ?>"><?php _e( 'Theme Details' ); ?></button>
         <div class="theme-author">
                 <?php
                 /* translators: %s: Theme author name. */
@@ -531 +535 @@
 
                 <div class="theme-actions">
                 <?php if ( $theme['active'] ) { ?>
-                        <?php if ( $theme['actions']['customize'] && current_user_can( 'edit_theme_options' ) && current_user_can( 'customize' ) ) { ?>
-                                <a class="button button-primary customize load-customize hide-if-no-customize" href="<?php echo $theme['actions']['customize']; ?>"><?php _e( 'Customize' ); ?></a>
+                        <?php
+                        if ( $theme['actions']['customize'] && current_user_can( 'edit_theme_options' ) && current_user_can( 'customize' ) ) {
+                                /* translators: %s: Theme name. */
+                                $customize_aria_label = sprintf( _x( 'Customize %s', 'theme' ), $theme['name'] );
+                                ?>
+                                <a aria-label="<?php echo esc_attr( $customize_aria_label ); ?>" class="button button-primary customize load-customize hide-if-no-customize" href="<?php echo $theme['actions']['customize']; ?>"><?php _e( 'Customize' ); ?></a>
                         <?php } ?>
                 <?php } elseif ( $theme['compatibleWP'] && $theme['compatiblePHP'] ) { ?>
                         <?php
@@ -540 +548 @@
                         $aria_label = sprintf( _x( 'Activate %s', 'theme' ), '{{ data.name }}' );
                         ?>
                         <a class="button activate" href="<?php echo $theme['actions']['activate']; ?>" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Activate' ); ?></a>
-                        <?php if ( current_user_can( 'edit_theme_options' ) && current_user_can( 'customize' ) ) { ?>
-                                <a class="button button-primary load-customize hide-if-no-customize" href="<?php echo $theme['actions']['customize']; ?>"><?php _e( 'Live Preview' ); ?></a>
+                        <?php
+                        if ( current_user_can( 'edit_theme_options' ) && current_user_can( 'customize' ) ) {
+                                /* translators: %s: Theme name. */
+                                $live_preview_aria_label = sprintf( _x( 'Live Preview %s', 'theme' ), '{{ data.name }}' );
+                                ?>
+                                <a aria-label="<?php echo esc_attr( $live_preview_aria_label ); ?>" class="button button-primary load-customize hide-if-no-customize" href="<?php echo $theme['actions']['customize']; ?>"><?php _e( 'Live Preview' ); ?></a>
                         <?php } ?>
                 <?php } else { ?>
                         <?php
@@ -859 +871 @@
                 </p></div>
         <# } #>
 
-        <span class="more-details" id="{{ data.id }}-action"><?php _e( 'Theme Details' ); ?></span>
+        <?php
+        /* translators: %s: Theme name. */
+        $details_aria_label = sprintf( _x( 'View Theme Details for %s', 'theme' ), '{{ data.name }}' );
+        ?>
+        <button type="button" aria-label="<?php echo esc_attr( $details_aria_label ); ?>" class="more-details" id="{{ data.id }}-action"><?php _e( 'Theme Details' ); ?></button>
         <div class="theme-author">
                 <?php
                 /* translators: %s: Theme author name. */
@@ -879 +895 @@
                 <div class="theme-actions">
                         <# if ( data.active ) { #>
                                 <# if ( data.actions.customize ) { #>
-                                        <a class="button button-primary customize load-customize hide-if-no-customize" href="{{{ data.actions.customize }}}"><?php _e( 'Customize' ); ?></a>
+                                        <?php
+                                        /* translators: %s: Theme name. */
+                                        $customize_aria_label = sprintf( _x( 'Customize %s', 'theme' ), '{{ data.name }}' );
+                                        ?>
+                                        <a aria-label="<?php echo esc_attr( $customize_aria_label ); ?>" class="button button-primary customize load-customize hide-if-no-customize" href="{{{ data.actions.customize }}}"><?php _e( 'Customize' ); ?></a>
                                 <# } #>
                         <# } else { #>
                                 <# if ( data.compatibleWP && data.compatiblePHP ) { #>
@@ -888 +908 @@
                                         $aria_label = sprintf( _x( 'Activate %s', 'theme' ), '{{ data.name }}' );
                                         ?>
                                         <a class="button activate" href="{{{ data.actions.activate }}}" aria-label="<?php echo $aria_label; ?>"><?php _e( 'Activate' ); ?></a>
-                                        <a class="button button-primary load-customize hide-if-no-customize" href="{{{ data.actions.customize }}}"><?php _e( 'Live Preview' ); ?></a>
+                                        <?php
+                                        /* translators: %s: Theme name. */
+                                        $live_preview_aria_label = sprintf( _x( 'Live Preview %s', 'theme' ), '{{ data.name }}' );
+                                        ?>
+                                        <a aria-label="<?php echo esc_attr( $live_preview_aria_label ); ?>" class="button button-primary load-customize hide-if-no-customize" href="{{{ data.actions.customize }}}"><?php _e( 'Live Preview' ); ?></a>
                                 <# } else { #>
                                         <?php
                                         /* translators: %s: Theme name. */