WordPress.org
Get WordPress

Make WordPress Core

Changeset 41740


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