Make WordPress Core

Changeset 27012


Ignore:
Timestamp:
01/22/2014 08:59:29 PM (11 years ago)
Author:
nacin
Message:

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

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

Location:
trunk/src/wp-admin
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/js/theme.js

    r26922 r27012  
    199199        var data = this.model.toJSON();
    200200        // Render themes using the html template
    201         this.$el.html( this.html( data ) ).attr( 'tabindex', 0 );
     201        this.$el.html( this.html( data ) ).attr({
     202            tabindex: 0,
     203            'aria-describedby' : data.id + '-action ' + data.id + '-name'
     204        });
    202205
    203206        // Renders active theme styles
  • trunk/src/wp-admin/themes.php

    r26922 r27012  
    192192 */
    193193
    194 foreach ( $themes as $theme ) : ?>
    195 <div class="theme<?php if ( $theme['active'] ) echo ' active'; ?>" tabindex="0">
     194foreach ( $themes as $theme ) :
     195    $aria_action = esc_attr( $theme['id'] . '-action' );
     196    $aria_name   = esc_attr( $theme['id'] . '-name' );
     197    ?>
     198<div class="theme<?php if ( $theme['active'] ) echo ' active'; ?>" tabindex="0" aria-describedby="<?php echo $aria_action . ' ' . $aria_name; ?>">
    196199    <?php if ( ! empty( $theme['screenshot'][0] ) ) { ?>
    197200        <div class="theme-screenshot">
     
    201204        <div class="theme-screenshot blank"></div>
    202205    <?php } ?>
    203     <span class="more-details"><?php _e( 'Theme Details' ); ?></span>
     206    <span class="more-details" id="<?php echo $aria_action; ?>"><?php _e( 'Theme Details' ); ?></span>
    204207    <div class="theme-author"><?php printf( __( 'By %s' ), $theme['author'] ); ?></div>
    205208
    206209    <?php if ( $theme['active'] ) { ?>
    207         <h3 class="theme-name"><span><?php _ex( 'Active:', 'theme' ); ?></span> <?php echo $theme['name']; ?></h3>
     210        <h3 class="theme-name" id="<?php echo $aria_name; ?>"><span><?php _ex( 'Active:', 'theme' ); ?></span> <?php echo $theme['name']; ?></h3>
    208211    <?php } else { ?>
    209         <h3 class="theme-name"><?php echo $theme['name']; ?></h3>
     212        <h3 class="theme-name" id="<?php echo $aria_name; ?>"><?php echo $theme['name']; ?></h3>
    210213    <?php } ?>
    211214
     
    278281        <div class="theme-screenshot blank"></div>
    279282    <# } #>
    280     <span class="more-details"><?php _e( 'Theme Details' ); ?></span>
     283    <span class="more-details" id="{{ data.id }}-action"><?php _e( 'Theme Details' ); ?></span>
    281284    <div class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.author }}}' ); ?></div>
    282285
    283286    <# if ( data.active ) { #>
    284         <h3 class="theme-name"><span><?php _ex( 'Active:', 'theme' ); ?></span> {{{ data.name }}}</h3>
     287        <h3 class="theme-name" id="{{ data.id }}-name"><span><?php _ex( 'Active:', 'theme' ); ?></span> {{{ data.name }}}</h3>
    285288    <# } else { #>
    286         <h3 class="theme-name">{{{ data.name }}}</h3>
     289        <h3 class="theme-name" id="{{ data.id }}-name">{{{ data.name }}}</h3>
    287290    <# } #>
    288291
Note: See TracChangeset for help on using the changeset viewer.