Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2025-01-09 18:08:09 +01:00
Code Issues Projects Releases Wiki Activity

Themes screen: Add aria-describedby attributes to provide better information to screen readers.

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

Built from https://develop.svn.wordpress.org/trunk@27012


git-svn-id: http://core.svn.wordpress.org/trunk@26889 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Nacin 2014-01-22 21:00:11 +00:00
parent 33c41db77a
commit e18a013956
3 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
wp-admin/js/theme.js
View File

@ -198,7 +198,10 @@ themes.view.Theme = wp.Backbone.View.extend({
render: function() { render: function() {
var data = this.model.toJSON(); var data = this.model.toJSON();
// Render themes using the html template // 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 // Renders active theme styles
this.activeTheme(); this.activeTheme();

2
wp-admin/js/theme.min.js vendored
View File

File diff suppressed because one or more lines are too long

19
wp-admin/themes.php
View File

@ -191,8 +191,11 @@ if ( ! $ct->errors() || ( 1 == count( $ct->errors()->get_error_codes() )
* This PHP is synchronized with the tmpl-theme template below! * This PHP is synchronized with the tmpl-theme template below!
*/ */
foreach ( $themes as $theme ) : ?> foreach ( $themes as $theme ) :
<div class="theme<?php if ( $theme['active'] ) echo ' active'; ?>" tabindex="0"> $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] ) ) { ?> <?php if ( ! empty( $theme['screenshot'][0] ) ) { ?>
<div class="theme-screenshot"> <div class="theme-screenshot">
<img src="<?php echo $theme['screenshot'][0]; ?>" alt="" /> <img src="<?php echo $theme['screenshot'][0]; ?>" alt="" />
@ -200,13 +203,13 @@ foreach ( $themes as $theme ) : ?>
<?php } else { ?> <?php } else { ?>
<div class="theme-screenshot blank"></div> <div class="theme-screenshot blank"></div>
<?php } ?> <?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> <div class="theme-author"><?php printf( __( 'By %s' ), $theme['author'] ); ?></div>
<?php if ( $theme['active'] ) { ?> <?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 { ?> <?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 } ?> <?php } ?>
<div class="theme-actions"> <div class="theme-actions">
@ -277,13 +280,13 @@ if ( ! is_multisite() && current_user_can('edit_themes') && $broken_themes = wp_
<# } else { #> <# } else { #>
<div class="theme-screenshot blank"></div> <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> <div class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.author }}}' ); ?></div>
<# if ( data.active ) { #> <# 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 { #> <# } else { #>
<h3 class="theme-name">{{{ data.name }}}</h3> <h3 class="theme-name" id="{{ data.id }}-name">{{{ data.name }}}</h3>
<# } #> <# } #>
<div class="theme-actions"> <div class="theme-actions">