Changeset 1327

Timestamp:

02/25/2015 08:47:29 PM (12 years ago)

Author:

coffee2code

Message:

developer.wordpress.org: Improve inline search accessibility.

• Switch search input label from span tag to label tag
• Add screen reader text for search icon

Fixes #883.

Location:

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer

Files:

• header.php (modified) (1 diff)
• searchform.php (modified) (1 diff)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/header.php

@@ -31 +31 @@
                         <div id="inner-search-icon-container">
                                 <div id="inner-search-icon">
-                                        <div class="dashicons dashicons-search"></div>
+                                        <div class="dashicons dashicons-search"><span class="screen-reader-text"><?php _e( 'Search', 'wporg' ); ?></div>
                                 </div>
                         </div>

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/searchform.php

@@ -37 +37 @@
                 <div>
                 <label>
-                        <span class="screen-reader-text"><?php _ex( 'Search for:', 'label', 'wporg' ); ?></span>
-                        <input type="text" class="search-field" placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder', 'wporg' ); ?>" value="<?php echo esc_attr( get_search_query() ); ?>" name="s">
+                        <label for="search-field" class="screen-reader-text"><?php _ex( 'Search for:', 'label', 'wporg' ); ?></label>
+                        <input type="text" id="search-field" class="search-field" placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder', 'wporg' ); ?>" value="<?php echo esc_attr( get_search_query() ); ?>" name="s">
                 </label>
                 <input type="submit" class="shiny-blue search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button', 'wporg' ); ?>">