Changeset 41740 for trunk/src/wp-includes/customize/class-wp-customize-nav-menu-control.php

Timestamp:

10/04/2017 06:11:08 PM (7 years ago)

Author:

westonruter

Message:

Customize: Improve accessibility of markup for base WP_Customize_Control and WP_Customize_Nav_Menu_Control with proper use of label elements and inclusion of aria-describedby.

See #33085.
Props valendesigns, afercia, westonruter.

File:

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

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

@@ -45 +45 @@
     public function content_template() {
         ?>
+        <# var elementId; #>
         <button type="button" class="button add-new-menu-item" aria-label="<?php esc_attr_e( 'Add or remove menu items' ); ?>" aria-expanded="false" aria-controls="available-menu-items">
             <?php _e( 'Add Items' ); ?>
@@ -65 +66 @@
 
             <?php foreach ( get_registered_nav_menus() as $location => $description ) : ?>
-            <li class="customize-control customize-control-checkbox assigned-menu-location">
-                <label>
-                    <input type="checkbox" data-menu-id="{{ data.menu_id }}" data-location-id="<?php echo esc_attr( $location ); ?>" class="menu-location" /> <?php echo $description; ?>
-                    <span class="theme-location-set"><?php
-                        /* translators: %s: menu name */
-                        printf( _x( '(Current: %s)', 'menu location' ),
-                            '<span class="current-menu-location-name-' . esc_attr( $location ) . '"></span>'
-                        );
-                    ?></span>
-                </label>
-            </li>
+                <# elementId = _.uniqueId( 'customize-nav-menu-control-location-' ); #>
+                <li class="customize-control customize-control-checkbox assigned-menu-location customize-inside-control-row">
+                    <input id="{{ elementId }}" type="checkbox" data-menu-id="{{ data.menu_id }}" data-location-id="<?php echo esc_attr( $location ); ?>" class="menu-location" />
+                    <label for="{{ elementId }}">
+                        <?php echo $description; ?>
+                        <span class="theme-location-set">
+                            <?php
+                            /* translators: %s: menu name */
+                            printf( _x( '(Current: %s)', 'menu location' ),
+                                '<span class="current-menu-location-name-' . esc_attr( $location ) . '"></span>'
+                            );
+                            ?>
+                        </span>
+                    </label>
+                </li>
             <?php endforeach; ?>
-
         </ul>
-        <?php endif;
+        <?php endif; ?>
+        <?php
     }