Ticket #21785: 21785-accessibility.diff

src/wp-admin/css/customize-controls.css

@@ -465 +465 @@
         margin-bottom: 18px;
 }
 
+#customize-control-header_image .uploaded button, #customize-control-header_image .default button {
+        width: 100%;
+        padding: 0;
+        margin: 0;
+        background: none;
+        border: none;
+        color: inherit;
+        cursor: pointer;
+}
+
 /* Header control: current image container */
 
 #customize-control-header_image .current .container {

src/wp-admin/custom-header.php

@@ -1272 +1272 @@
         public function get_uploaded_header_images() {
                 $header_images = get_uploaded_header_images();
                 $timestamp_key = '_wp_attachment_custom_header_last_used_' . get_stylesheet();
+                $alt_text_key = '_wp_attachment_image_alt';
 
                 foreach ( $header_images as &$header_image ) {
-                        $header_image['timestamp'] = get_post_meta( $header_image['attachment_id'], $timestamp_key, true );
+                        $header_meta = get_post_meta( $header_image['attachment_id'] );
+                        $header_image['timestamp'] = isset( $header_meta[ $timestamp_key ] ) ? $header_meta[ $timestamp_key ] : '';
+                        $header_image['alt_text'] = isset( $header_meta[ $alt_text_key ] ) ? $header_meta[ $alt_text_key ] : '';
                 }
 
                 return $header_images;

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

@@ -774 +774 @@
 
                         <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' ); ?>
                                         <# } else if ( data.type === 'default' ) { #>
                                                 <?php _e( 'Randomize suggested headers' ); ?>
                                         <# } #>
-                                        </span>
+                                        </button>
                                 </div>
                         </div>
 
                         <# } else { #>
 
                         <# 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>
 
                         <# } #>
                 </script>
@@ -875 +876 @@
                         </div>
                         <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">