Changeset 27013 for branches/3.8

Timestamp:

01/22/2014 09:00:05 PM (11 years ago)

Author:

nacin

Message:

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

Merges [27012] to the 3.8 branch.

props joedolson for initial patch.
fixes #26602.

Location:

branches/3.8

Files:

• . (modified) (1 prop)
• src/wp-admin/js/dashboard.js (modified) (1 diff)
• src/wp-admin/js/theme.js (modified) (1 diff)
• src/wp-admin/themes.php (modified) (3 diffs)

branches/3.8/src/wp-admin/js/dashboard.js

@@ -162 +162 @@
                 textareaContent = $this.val().replace(/\n/g, '<br>') + '&nbsp;',
                 // 2px is for border-top & border-bottom
-                cloneHeight = clone.css('width', $this.css('width')).html(textareaContent).outerHeight() + 2;
+                cloneHeight = clone.css('width', $this.css('width')).text(textareaContent).outerHeight() + 2;
 
             // Default to having scrollbars

branches/3.8/src/wp-admin/js/theme.js

@@ -199 +199 @@
         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

branches/3.8/src/wp-admin/themes.php

@@ -192 +192 @@
  */
 
-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">
@@ -201 +204 @@
         <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 } ?>
 
@@ -278 +281 @@
         <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>
     <# } #>