WordPress.org
Get WordPress

Make WordPress Core

Changeset 41740


Ignore:
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.

Location:
trunk/src
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/customize-controls.css

    r41677 r41740  
    930930}
    931931
    932 .customize-control-radio label,
    933 .customize-control-checkbox label,
    934 .customize-control-nav_menu_auto_add label {
     932.customize-control .customize-inside-control-row {
    935933    line-height: 20px;
    936934    display: block;
    … …  
    26712669    }
    26722670
    2673     .customize-control-radio label,
    2674     .customize-control-checkbox label,
    2675     .customize-control-nav_menu_auto_add label {
     2671    .customize-control-radio .customize-inside-control-row,
     2672    .customize-control-checkbox .customize-inside-control-row,
     2673    .customize-control-nav_menu_auto_add .customize-inside-control-row {
    26762674        margin-left: 32px;
    26772675    }

  • trunk/src/wp-includes/class-wp-customize-control.php

    r41626 r41740  
    478478     */
    479479    protected function render_content() {
    480         switch( $this->type ) {
     480        $input_id = '_customize-input-' . $this->id;
     481        $description_id = '_customize-description-' . $this->id;
     482        $describedby_attr = ( ! empty( $this->description ) ) ? 'aria-describedby="' . esc_attr( $description_id ) . '"' : '';
     483        switch ( $this->type ) {
    481484            case 'checkbox':
    482485                ?>
    483                 <label>
    484                     <input type="checkbox" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); checked( $this->value() ); ?> />
    485                     <?php echo esc_html( $this->label ); ?>
     486                <span class="customize-inside-control-row">
     487                    <input
     488                        id="<?php echo esc_attr( $input_id ); ?>"
     489                        <?php echo $describedby_attr; ?>
     490                        type="checkbox"
     491                        value="<?php echo esc_attr( $this->value() ); ?>"
     492                        <?php $this->link(); ?>
     493                        <?php checked( $this->value() ); ?>
     494                    />
     495                    <label for="<?php echo esc_attr( $input_id ); ?>"><?php echo esc_html( $this->label ); ?></label>
    486496                    <?php if ( ! empty( $this->description ) ) : ?>
    487                         <span class="description customize-control-description"><?php echo $this->description; ?></span>
     497                        <span id="<?php echo esc_attr( $description_id ); ?>" class="description customize-control-description"><?php echo $this->description; ?></span>
    488498                    <?php endif; ?>
    489                 </label>
     499                </span>
    490500                <?php
    491501                break;
    492502            case 'radio':
    493                 if ( empty( $this->choices ) )
     503                if ( empty( $this->choices ) ) {
    494504                    return;
     505                }
    495506
    496507                $name = '_customize-radio-' . $this->id;
    497 
    498                 if ( ! empty( $this->label ) ) : ?>
     508                ?>
     509                <?php if ( ! empty( $this->label ) ) : ?>
    499510                    <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    500                 <?php endif;
    501                 if ( ! empty( $this->description ) ) : ?>
    502                     <span class="description customize-control-description"><?php echo $this->description ; ?></span>
    503                 <?php endif;
    504 
    505                 foreach ( $this->choices as $value => $label ) :
    506                     ?>
    507                     <label>
    508                         <input type="radio" value="<?php echo esc_attr( $value ); ?>" name="<?php echo esc_attr( $name ); ?>" <?php $this->link(); checked( $this->value(), $value ); ?> />
    509                         <?php echo esc_html( $label ); ?><br/>
    510                     </label>
    511                     <?php
    512                 endforeach;
     511                <?php endif; ?>
     512                <?php if ( ! empty( $this->description ) ) : ?>
     513                    <span id="<?php echo esc_attr( $description_id ); ?>" class="description customize-control-description"><?php echo $this->description ; ?></span>
     514                <?php endif; ?>
     515
     516                <?php foreach ( $this->choices as $value => $label ) : ?>
     517                    <span class="customize-inside-control-row">
     518                        <input
     519                            id="<?php echo esc_attr( $input_id . '-radio-' . $value ); ?>"
     520                            type="radio" <?php echo $describedby_attr; ?>
     521                            value="<?php echo esc_attr( $value ); ?>"
     522                            name="<?php echo esc_attr( $name ); ?>"
     523                            <?php $this->link(); ?>
     524                            <?php checked( $this->value(), $value ); ?>
     525                            />
     526                        <label for="<?php echo esc_attr( $input_id . '-radio-' . $value ); ?>"><?php echo esc_html( $label ); ?></label>
     527                    </span>
     528                <?php endforeach; ?>
     529                <?php
    513530                break;
    514531            case 'select':
    515                 if ( empty( $this->choices ) )
     532                if ( empty( $this->choices ) ) {
    516533                    return;
     534                }
    517535
    518536                ?>
    519                 <label>
    520                     <?php if ( ! empty( $this->label ) ) : ?>
    521                         <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    522                     <?php endif;
    523                     if ( ! empty( $this->description ) ) : ?>
    524                         <span class="description customize-control-description"><?php echo $this->description; ?></span>
    525                     <?php endif; ?>
    526 
    527                     <select <?php $this->link(); ?>>
    528                         <?php
    529                         foreach ( $this->choices as $value => $label )
    530                             echo '<option value="' . esc_attr( $value ) . '"' . selected( $this->value(), $value, false ) . '>' . $label . '</option>';
    531                         ?>
    532                     </select>
    533                 </label>
     537                <?php if ( ! empty( $this->label ) ) : ?>
     538                    <label for="<?php echo esc_attr( $input_id ); ?>" class="customize-control-title"><?php echo esc_html( $this->label ); ?></label>
     539                <?php endif; ?>
     540                <?php if ( ! empty( $this->description ) ) : ?>
     541                    <span id="<?php echo esc_attr( $description_id ); ?>" class="description customize-control-description"><?php echo $this->description; ?></span>
     542                <?php endif; ?>
     543
     544                <select id="<?php echo esc_attr( $input_id ); ?>" <?php echo $describedby_attr; ?> <?php $this->link(); ?>>
     545                    <?php
     546                    foreach ( $this->choices as $value => $label ) {
     547                        echo '<option value="' . esc_attr( $value ) . '"' . selected( $this->value(), $value, false ) . '>' . $label . '</option>';
     548                    }
     549                    ?>
     550                </select>
    534551                <?php
    535552                break;
    536553            case 'textarea':
    537554                ?>
    538                 <label>
    539                     <?php if ( ! empty( $this->label ) ) : ?>
    540                         <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    541                     <?php endif;
    542                     if ( ! empty( $this->description ) ) : ?>
    543                         <span class="description customize-control-description"><?php echo $this->description; ?></span>
    544                     <?php endif; ?>
    545                     <textarea rows="5" <?php $this->input_attrs(); ?> <?php $this->link(); ?>><?php echo esc_textarea( $this->value() ); ?></textarea>
    546                 </label>
     555                <?php if ( ! empty( $this->label ) ) : ?>
     556                    <label for="<?php echo esc_attr( $input_id ); ?>" class="customize-control-title"><?php echo esc_html( $this->label ); ?></label>
     557                <?php endif; ?>
     558                <?php if ( ! empty( $this->description ) ) : ?>
     559                    <span id="<?php echo esc_attr( $description_id ); ?>" class="description customize-control-description"><?php echo $this->description; ?></span>
     560                <?php endif; ?>
     561                <textarea
     562                    id="<?php echo esc_attr( $input_id ); ?>"
     563                    rows="5"
     564                    <?php echo $describedby_attr; ?>
     565                    <?php $this->input_attrs(); ?>
     566                    <?php $this->link(); ?>>
     567                    <?php echo esc_textarea( $this->value() ); ?>
     568                </textarea>
    547569                <?php
    548570                break;
    549571            case 'dropdown-pages':
    550572                ?>
    551                 <label>
    552573                <?php if ( ! empty( $this->label ) ) : ?>
    553                     <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    554                 <?php endif;
    555                 if ( ! empty( $this->description ) ) : ?>
    556                     <span class="description customize-control-description"><?php echo $this->description; ?></span>
     574                    <label for="<?php echo esc_attr( $input_id ); ?>" class="customize-control-title"><?php echo esc_html( $this->label ); ?></label>
     575                <?php endif; ?>
     576                <?php if ( ! empty( $this->description ) ) : ?>
     577                    <span id="<?php echo esc_attr( $description_id ); ?>" class="description customize-control-description"><?php echo $this->description; ?></span>
    557578                <?php endif; ?>
    558579
    … …  
    577598
    578599                // Hackily add in the data link parameter.
    579                 $dropdown = str_replace( '<select', '<select ' . $this->get_link(), $dropdown );
     600                $dropdown = str_replace( '<select', '<select ' . $this->get_link() . ' id="' . esc_attr( $input_id ) . '" ' . $describedby_attr, $dropdown );
    580601
    581602                // Even more hacikly add auto-draft page stubs.
    … …  
    597618                echo $dropdown;
    598619                ?>
    599                 </label>
    600620                <?php if ( $this->allow_addition && current_user_can( 'publish_pages' ) && current_user_can( 'edit_theme_options' ) ) : // Currently tied to menus functionality. ?>
    601                     <button type="button" class="button-link add-new-toggle"><?php
     621                    <button type="button" class="button-link add-new-toggle">
     622                        <?php
    602623                        /* translators: %s: add new page label */
    603624                        printf( __( '+ %s' ), get_post_type_object( 'page' )->labels->add_new_item );
    604                     ?></button>
     625                        ?>
     626                    </button>
    605627                    <div class="new-content-item">
    606628                        <label for="create-input-<?php echo $this->id; ?>"><span class="screen-reader-text"><?php _e( 'New page title' ); ?></span></label>
    … …  
    608630                        <button type="button" class="button add-content"><?php _e( 'Add' ); ?></button>
    609631                    </div>
    610                 <?php endif;
     632                <?php endif; ?>
     633                <?php
    611634                break;
    612635            default:
    613636                ?>
    614                 <label>
    615                     <?php if ( ! empty( $this->label ) ) : ?>
    616                         <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    617                     <?php endif;
    618                     if ( ! empty( $this->description ) ) : ?>
    619                         <span class="description customize-control-description"><?php echo $this->description; ?></span>
    620                     <?php endif; ?>
    621                     <input type="<?php echo esc_attr( $this->type ); ?>" <?php $this->input_attrs(); ?> value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); ?> />
    622                 </label>
     637                <?php if ( ! empty( $this->label ) ) : ?>
     638                    <label for="<?php echo esc_attr( $input_id ); ?>" class="customize-control-title"><?php echo esc_html( $this->label ); ?></label>
     639                <?php endif; ?>
     640                <?php if ( ! empty( $this->description ) ) : ?>
     641                    <span id="<?php echo esc_attr( $description_id ); ?>" class="description customize-control-description"><?php echo $this->description; ?></span>
     642                <?php endif; ?>
     643                <input
     644                    id="<?php echo esc_attr( $input_id ); ?>"
     645                    type="<?php echo esc_attr( $this->type ); ?>"
     646                    <?php echo $describedby_attr; ?>
     647                    <?php $this->input_attrs(); ?>
     648                    value="<?php echo esc_attr( $this->value() ); ?>"
     649                    <?php $this->link(); ?>
     650                    />
    623651                <?php
    624652                break;

  • 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.