WordPress.org

Make WordPress Core


Ignore:
Timestamp:
10/04/2017 06:11:08 PM (2 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:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/customize/class-wp-customize-nav-menu-control.php

    r41162 r41740  
    4545    public function content_template() {
    4646        ?>
     47        <# var elementId; #>
    4748        <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">
    4849            <?php _e( 'Add Items' ); ?>
     
    6566
    6667            <?php foreach ( get_registered_nav_menus() as $location => $description ) : ?>
    67             <li class="customize-control customize-control-checkbox assigned-menu-location">
    68                 <label>
    69                     <input type="checkbox" data-menu-id="{{ data.menu_id }}" data-location-id="<?php echo esc_attr( $location ); ?>" class="menu-location" /> <?php echo $description; ?>
    70                     <span class="theme-location-set"><?php
    71                         /* translators: %s: menu name */
    72                         printf( _x( '(Current: %s)', 'menu location' ),
    73                             '<span class="current-menu-location-name-' . esc_attr( $location ) . '"></span>'
    74                         );
    75                     ?></span>
    76                 </label>
    77             </li>
     68                <# elementId = _.uniqueId( 'customize-nav-menu-control-location-' ); #>
     69                <li class="customize-control customize-control-checkbox assigned-menu-location customize-inside-control-row">
     70                    <input id="{{ elementId }}" type="checkbox" data-menu-id="{{ data.menu_id }}" data-location-id="<?php echo esc_attr( $location ); ?>" class="menu-location" />
     71                    <label for="{{ elementId }}">
     72                        <?php echo $description; ?>
     73                        <span class="theme-location-set">
     74                            <?php
     75                            /* translators: %s: menu name */
     76                            printf( _x( '(Current: %s)', 'menu location' ),
     77                                '<span class="current-menu-location-name-' . esc_attr( $location ) . '"></span>'
     78                            );
     79                            ?>
     80                        </span>
     81                    </label>
     82                </li>
    7883            <?php endforeach; ?>
    79 
    8084        </ul>
    81         <?php endif;
     85        <?php endif; ?>
     86        <?php
    8287    }
    8388
Note: See TracChangeset for help on using the changeset viewer.