From b663efb313c9d1cf90faf1d8ec312fbade194d7a Mon Sep 17 00:00:00 2001
From: Andrew Nacin <nacin@git.wordpress.org>
Date: Wed, 22 Jan 2014 20:59:29 +0000
Subject: [PATCH] Themes screen: Add aria-describedby attributes to provide
 better information to screen readers.

props joedolson for initial patch.
fixes #26602 for trunk.


git-svn-id: https://develop.svn.wordpress.org/trunk@27012 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/js/theme.js |  5 ++++-
 src/wp-admin/themes.php  | 19 +++++++++++--------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/wp-admin/js/theme.js b/src/wp-admin/js/theme.js
index c9e2681220..aba7d9b946 100644
--- a/src/wp-admin/js/theme.js
+++ b/src/wp-admin/js/theme.js
@@ -198,7 +198,10 @@ themes.view.Theme = wp.Backbone.View.extend({
 	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();
diff --git a/src/wp-admin/themes.php b/src/wp-admin/themes.php
index 3493261041..448931d125 100644
--- a/src/wp-admin/themes.php
+++ b/src/wp-admin/themes.php
@@ -191,8 +191,11 @@ if ( ! $ct->errors() || ( 1 == count( $ct->errors()->get_error_codes() )
  * 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,13 +203,13 @@ foreach ( $themes as $theme ) : ?>
 	<?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,13 +280,13 @@ if ( ! is_multisite() && current_user_can('edit_themes') && $broken_themes = wp_
 	<# } 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">