Changeset 27947 for trunk/src/wp-includes/class-wp-customize-control.php

Timestamp:

04/04/2014 03:48:34 PM (11 years ago)

Author:

nacin

Message:

Header images: Accessibility and style improvements. Headers no longer jump around when chosen.

props mcsf, ehg.
see #21785.

File:

• trunk/src/wp-includes/class-wp-customize-control.php (modified) (9 diffs)

trunk/src/wp-includes/class-wp-customize-control.php

@@ -775 +775 @@
             <div class="placeholder random">
                 <div class="inner">
-                    <span><span class="dashicons dashicons-randomize dice"></span>
+                    <button type="button"><span class="dashicons dashicons-randomize dice"></span>
                     <# if ( data.type === 'uploaded' ) { #>
                         <?php _e( 'Randomize uploaded headers' ); ?>
@@ -781 +781 @@
                         <?php _e( 'Randomize suggested headers' ); ?>
                     <# } #>
-                    </span>
+                    </button>
                 </div>
             </div>
@@ -788 +788 @@
 
             <# if (data.type === 'uploaded') { #>
-            <div class="dashicons dashicons-no close"></div>
+                <div class="dashicons dashicons-no close"></div>
             <# } #>
 
-            <a href="#" class="choice thumbnail #>"
+            <button type="button" class="choice thumbnail"
                 data-customize-image-value="{{{data.header.url}}}"
                 data-customize-header-image-data="{{JSON.stringify(data.header)}}">
-                <img src="{{{data.header.thumbnail_url}}}">
-            </a>
+                <span class="screen-reader-text"><?php _e( 'Set image' ); ?></span>
+                <img src="{{{data.header.thumbnail_url}}}" alt="{{{data.header.alt_text || data.header.description}}}">
+            </button>
 
             <# } #>
@@ -804 +805 @@
                 <# if (data.random) { #>
 
-            <div class="placeholder">
+            <div class="placeholder" tabindex="0">
                 <div class="inner">
                     <span><span class="dashicons dashicons-randomize dice"></span>
@@ -818 +819 @@
                 <# } else { #>
 
-            <img src="{{{data.header.thumbnail_url}}}" />
+            <img src="{{{data.header.thumbnail_url}}}" alt="{{{data.header.alt_text || data.header.description}}}" tabindex="0"/>
 
                 <# } #>
             <# } else { #>
 
-            <div class="placeholder">
+            <div class="placeholder" tabindex="0">
                 <div class="inner">
                     <span>
@@ -854 +855 @@
 
         <div class="customize-control-content">
-            <p class="customizer-section-intro">
+            <p class="customizer-section-intro" tabindex="0">
                 <?php
                 // @todo translate (and look to custom-header.php for inspiration)
@@ -868 +869 @@
             </p>
             <div class="current">
-                <span class="customize-control-title">
+                <span class="customize-control-title" tabindex="0">
                     <?php _e( 'Current header' ); ?>
                 </span>
@@ -876 +877 @@
             <div class="actions">
                 <?php /* translators: Hide as in hide header image via the Customizer */ ?>
-                <a href="#" <?php echo $visibility ?> class="button remove"><?php _ex( 'Hide', 'custom header' ); ?></a>
+                <button type="button"<?php echo $visibility ?> class="button remove"><?php _ex( 'Hide image', 'custom header' ); ?></button>
                 <?php /* translators: New as in add new header image via the Customizer */ ?>
-                <a href="#" class="button new"><?php _ex( 'Add new', 'header image' ); ?></a>
+                <button type="button" class="button new"><?php _ex( 'Add new image', 'header image' ); ?></button>
                 <div style="clear:both"></div>
             </div>
             <div class="choices">
-                <span class="customize-control-title header-previously-uploaded">
+                <span class="customize-control-title header-previously-uploaded" tabindex="0">
                     <?php _ex( 'Previously uploaded', 'custom headers' ); ?>
                 </span>
@@ -889 +890 @@
                     </div>
                 </div>
-                <span class="customize-control-title header-default">
+                <span class="customize-control-title header-default" tabindex="0">
                     <?php _ex( 'Suggested', 'custom headers' ); ?>
                 </span>