Changeset 41709 for trunk/src/wp-includes/customize/class-wp-customize-themes-section.php

Timestamp:

10/03/2017 03:43:22 PM (7 years ago)

Author:

afercia

Message:

Customize: Fix invalid HTML and aria-describedby values.

• fixes invalid HTML and duplicate IDs
• as per the Accessibility coding standards, all new code must use explicitly associated form labels
• properly escapes a few HTML attributes

Props celloexpressions, afercia.
Fixes #42054.

File:

• trunk/src/wp-includes/customize/class-wp-customize-themes-section.php (modified) (2 diffs)

trunk/src/wp-includes/customize/class-wp-customize-themes-section.php

@@ -101 +101 @@
         <# if ( 'wporg' === data.action ) { #>
             <div class="search-form">
-                <label class="screen-reader-text" for="wp-filter-search-input"><?php _e( 'Search themes&hellip;' ); ?></label>
-                <input placeholder="<?php _e( 'Search themes&hellip;' ); ?>" type="search" aria-describedby="live-search-desc" id="wp-filter-search-input" class="wp-filter-search">
-                <span id="live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
+                <label for="wp-filter-search-input-{{ data.id }}" class="screen-reader-text"><?php _e( 'Search themes&hellip;' ); ?></label>
+                <input type="search" id="wp-filter-search-input-{{ data.id }}" placeholder="<?php esc_attr_e( 'Search themes&hellip;' ); ?>" aria-describedby="{{ data.id }}-live-search-desc" class="wp-filter-search">
+                <span id="{{ data.id }}-live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
             </div>
             <button type="button" class="button feature-filter-toggle">
@@ -130 +130 @@
             </div>
         <# } else { #>
-            <p class="themes-filter-container">
-                <label for="themes-filter">
-                    <span class="screen-reader-text"><?php _e( 'Search themes&hellip;' ); ?></span>
-                    <input type="search" id="themes-filter" placeholder="<?php esc_attr_e( 'Search themes&hellip;' ); ?>" aria-describedby="live-search-desc" class="wp-filter-search wp-filter-search-themes" />
-                    <span id="live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
-                </label>
-            </p>
+            <div class="themes-filter-container">
+                <label for="{{ data.id }}-themes-filter" class="screen-reader-text"><?php _e( 'Search themes&hellip;' ); ?></label>
+                <input type="search" id="{{ data.id }}-themes-filter" placeholder="<?php esc_attr_e( 'Search themes&hellip;' ); ?>" aria-describedby="{{ data.id }}-live-search-desc" class="wp-filter-search wp-filter-search-themes" />
+                <span id="{{ data.id }}-live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
+            </div>
         <# } #>
         <div class="filter-themes-count">