Changeset 1327

Timestamp:

02/25/2015 08:47:29 PM (10 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' ); ?>">