Ticket #26602: 26602.3.diff

src/wp-admin/js/theme.js

@@ -198 +198 @@
         render: function() {
                 var data = this.model.toJSON();
                 // Render themes using the html template
-                this.$el.html( this.html( data ) ).attr( 'tabindex', 0 );
+                this.$el.html( this.html( data ) ).attr({
+                        tabindex: 0,
+                        'aria-describedby' : data.id + '-action ' + data.id + '-name'
+                });
 
                 // Renders active theme styles
                 this.activeTheme();

src/wp-admin/themes.php

@@ -191 +191 @@
  * This PHP is synchronized with the tmpl-theme template below!
  */
 
-foreach ( $themes as $theme ) : ?>
-<div class="theme<?php if ( $theme['active'] ) echo ' active'; ?>" tabindex="0">
+foreach ( $themes as $theme ) :
+        $aria_action = esc_attr( $theme['id'] . '-action' );
+        $aria_name   = esc_attr( $theme['id'] . '-name' );
+        ?>
+<div class="theme<?php if ( $theme['active'] ) echo ' active'; ?>" tabindex="0" aria-describedby="<?php echo $aria_action . ' ' . $aria_name; ?>">
         <?php if ( ! empty( $theme['screenshot'][0] ) ) { ?>
                 <div class="theme-screenshot">
                         <img src="<?php echo $theme['screenshot'][0]; ?>" alt="" />
@@ -200 +203 @@
         <?php } else { ?>
                 <div class="theme-screenshot blank"></div>
         <?php } ?>
-        <span class="more-details"><?php _e( 'Theme Details' ); ?></span>
+        <span class="more-details" id="<?php echo $aria_action; ?>"><?php _e( 'Theme Details' ); ?></span>
         <div class="theme-author"><?php printf( __( 'By %s' ), $theme['author'] ); ?></div>
 
         <?php if ( $theme['active'] ) { ?>
-                <h3 class="theme-name"><span><?php _ex( 'Active:', 'theme' ); ?></span> <?php echo $theme['name']; ?></h3>
+                <h3 class="theme-name" id="<?php echo $aria_name; ?>"><span><?php _ex( 'Active:', 'theme' ); ?></span> <?php echo $theme['name']; ?></h3>
         <?php } else { ?>
-                <h3 class="theme-name"><?php echo $theme['name']; ?></h3>
+                <h3 class="theme-name" id="<?php echo $aria_name; ?>"><?php echo $theme['name']; ?></h3>
         <?php } ?>
 
         <div class="theme-actions">
@@ -277 +280 @@
         <# } else { #>
                 <div class="theme-screenshot blank"></div>
         <# } #>
-        <span class="more-details"><?php _e( 'Theme Details' ); ?></span>
+        <span class="more-details" id="{{ data.id }}-action"><?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>
+                <h3 class="theme-name" id="{{ data.id }}-name"><span><?php _ex( 'Active:', 'theme' ); ?></span> {{{ data.name }}}</h3>
         <# } else { #>
-                <h3 class="theme-name">{{{ data.name }}}</h3>
+                <h3 class="theme-name" id="{{ data.id }}-name">{{{ data.name }}}</h3>
         <# } #>
 
         <div class="theme-actions">