WordPress.org
Get WordPress

Make WordPress Core

Ticket #33085: 33085.2.diff

File 33085.2.diff, 12.8 KB (added by valendesigns, 9 years ago)

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

    diff --git src/wp-includes/class-wp-customize-control.php src/wp-includes/class-wp-customize-control.php
index 3027a7b..1c80314 100644
    class WP_Customize_Control { 
    404404         * @since 3.4.0
    405405         */
    406406        protected function render_content() {
     407                $input_id = '_customize-input-' . $this->id;
     408                $description_id = '_customize-description-' . $this->id;
     409                $describedby = ( ! empty( $this->description ) ) ? 'aria-describedby="' . esc_attr( $description_id ). '"' : '';
     410
    407411                switch( $this->type ) {
    408412                        case 'checkbox':
    409413                                ?>
    410                                 <label>
    411                                         <input type="checkbox" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); checked( $this->value() ); ?> />
     414                                <label for="<?php echo esc_attr( $input_id ); ?>">
     415                                        <input id="<?php echo esc_attr( $input_id ); ?>" type="checkbox" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); checked( $this->value() ); ?> <?php echo $describedby; ?> />
    412416                                        <?php echo esc_html( $this->label ); ?>
    413                                         <?php if ( ! empty( $this->description ) ) : ?>
    414                                                 <span class="description customize-control-description"><?php echo $this->description; ?></span>
    415                                         <?php endif; ?>
    416417                                </label>
    417                                 <?php
     418                                <?php if ( ! empty( $this->description ) ) : ?>
     419                                        <span id="<?php echo esc_attr( $description_id ); ?>" class="description customize-control-description"><?php echo $this->description; ?></span>
     420                                <?php endif;
    418421                                break;
    419422                        case 'radio':
    420423                                if ( empty( $this->choices ) )
    … … class WP_Customize_Control { 
    439442                                endforeach;
    440443                                break;
    441444                        case 'select':
    442                                 if ( empty( $this->choices ) )
     445                                if ( empty( $this->choices ) ) {
    443446                                        return;
    444 
     447                                }
    445448                                ?>
    446                                 <label>
    447                                         <?php if ( ! empty( $this->label ) ) : ?>
     449
     450                                <?php if ( ! empty( $this->label ) ) : ?>
     451                                        <label for="<?php echo esc_attr( $input_id ); ?>">
    448452                                                <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    449                                         <?php endif;
    450                                         if ( ! empty( $this->description ) ) : ?>
    451                                                 <span class="description customize-control-description"><?php echo $this->description; ?></span>
    452                                         <?php endif; ?>
    453 
    454                                         <select <?php $this->link(); ?>>
    455                                                 <?php
    456                                                 foreach ( $this->choices as $value => $label )
    457                                                         echo '<option value="' . esc_attr( $value ) . '"' . selected( $this->value(), $value, false ) . '>' . $label . '</option>';
    458                                                 ?>
    459                                         </select>
    460                                 </label>
     453                                        </label>
     454                                <?php endif;
     455                                if ( ! empty( $this->description ) ) : ?>
     456                                        <span id="<?php echo esc_attr( $description_id ); ?>" class="description customize-control-description"><?php echo $this->description; ?></span>
     457                                <?php endif; ?>
     458
     459                                <select id="<?php echo esc_attr( $input_id ); ?>" <?php $this->link(); ?> <?php echo $describedby; ?>>
     460                                        <?php
     461                                        foreach ( $this->choices as $value => $label )
     462                                                echo '<option value="' . esc_attr( $value ) . '"' . selected( $this->value(), $value, false ) . '>' . $label . '</option>';
     463                                        ?>
     464                                </select>
     465                               
    461466                                <?php
    462467                                break;
    463468                        case 'textarea':
    464469                                ?>
    465                                 <label>
    466                                         <?php if ( ! empty( $this->label ) ) : ?>
     470
     471                                <?php if ( ! empty( $this->label ) ) : ?>
     472                                        <label for="<?php echo esc_attr( $input_id ); ?>">
    467473                                                <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    468                                         <?php endif;
    469                                         if ( ! empty( $this->description ) ) : ?>
    470                                                 <span class="description customize-control-description"><?php echo $this->description; ?></span>
    471                                         <?php endif; ?>
    472                                         <textarea rows="5" <?php $this->link(); ?>><?php echo esc_textarea( $this->value() ); ?></textarea>
    473                                 </label>
     474                                        </label>
     475                                <?php endif;
     476                                if ( ! empty( $this->description ) ) : ?>
     477                                        <span id="<?php echo esc_attr( $description_id ); ?>" class="description customize-control-description"><?php echo $this->description; ?></span>
     478                                <?php endif; ?>
     479                                <textarea id="<?php echo esc_attr( $input_id ); ?>" rows="5" <?php $this->link(); ?> <?php echo $describedby; ?>><?php echo esc_textarea( $this->value() ); ?></textarea>
     480
    474481                                <?php
    475482                                break;
    476483                        case 'dropdown-pages':
    477484                                ?>
    478                                 <label>
     485
    479486                                <?php if ( ! empty( $this->label ) ) : ?>
    480                                         <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
     487                                        <label for="<?php echo esc_attr( $input_id ); ?>">
     488                                                <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
     489                                        </label>
    481490                                <?php endif;
    482491                                if ( ! empty( $this->description ) ) : ?>
    483                                         <span class="description customize-control-description"><?php echo $this->description; ?></span>
     492                                        <span id="<?php echo esc_attr( $description_id ); ?>" class="description customize-control-description"><?php echo $this->description; ?></span>
    484493                                <?php endif; ?>
    485494
    486495                                <?php $dropdown = wp_dropdown_pages(
    … … class WP_Customize_Control { 
    495504
    496505                                // Hackily add in the data link parameter.
    497506                                $dropdown = str_replace( '<select', '<select ' . $this->get_link(), $dropdown );
     507                                // Hackily add in the ID and aria-describedby parameters.
     508                                $dropdown = str_replace( '<select', '<select id="' . esc_attr( $input_id ) . '" ' . $describedby, $dropdown );
    498509                                echo $dropdown;
    499                                 ?>
    500                                 </label>
    501                                 <?php
     510
    502511                                break;
    503512                        default:
    504513                                ?>
    505                                 <label>
    506                                         <?php if ( ! empty( $this->label ) ) : ?>
     514
     515                                <?php if ( ! empty( $this->label ) ) : ?>
     516                                        <label for="<?php echo esc_attr( $input_id ); ?>">
    507517                                                <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    508                                         <?php endif;
    509                                         if ( ! empty( $this->description ) ) : ?>
    510                                                 <span class="description customize-control-description"><?php echo $this->description; ?></span>
    511                                         <?php endif; ?>
    512                                         <input type="<?php echo esc_attr( $this->type ); ?>" <?php $this->input_attrs(); ?> value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); ?> />
    513                                 </label>
     518                                        </label>
     519                                <?php endif;
     520                                if ( ! empty( $this->description ) ) : ?>
     521                                        <span id="<?php echo esc_attr( $description_id ); ?>" class="description customize-control-description"><?php echo $this->description; ?></span>
     522                                <?php endif; ?>
     523                                <input id="<?php echo esc_attr( $input_id ); ?>" type="<?php echo esc_attr( $this->type ); ?>" <?php $this->input_attrs(); ?> value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); ?> <?php echo $describedby; ?> />
    514524                                <?php
    515525                                break;
    516526                }

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

    diff --git src/wp-includes/customize/class-wp-customize-color-control.php src/wp-includes/customize/class-wp-customize-color-control.php
index fac9a7d..17f7b6d 100644
    class WP_Customize_Color_Control extends WP_Customize_Control { 
    7878         */
    7979        public function content_template() {
    8080                ?>
    81                 <# var defaultValue = '';
     81                <#
     82                var inputId = '_customize-input-' + data.settings['default'];
     83                var descriptionId = '_customize-description-' + data.settings['default'];
     84                var describedBy = '';
     85                var defaultValue = '';
    8286                if ( data.defaultValue ) {
    8387                        if ( '#' !== data.defaultValue.substring( 0, 1 ) ) {
    8488                                defaultValue = '#' + data.defaultValue;
    … … class WP_Customize_Color_Control extends WP_Customize_Control { 
    8791                        }
    8892                        defaultValue = ' data-default-color=' + defaultValue; // Quotes added automatically.
    8993                } #>
    90                 <label>
    91                         <# if ( data.label ) { #>
     94                <# if ( data.label ) { #>
     95                        <label for="{{ inputId }}">
    9296                                <span class="customize-control-title">{{{ data.label }}}</span>
    93                         <# } #>
    94                         <# if ( data.description ) { #>
    95                                 <span class="description customize-control-description">{{{ data.description }}}</span>
    96                         <# } #>
    97                         <div class="customize-control-content">
    98                                 <input class="color-picker-hex" type="text" maxlength="7" placeholder="<?php esc_attr_e( 'Hex Value' ); ?>" {{ defaultValue }} />
    99                         </div>
    100                 </label>
     97                        </label>
     98                <# } #>
     99                <# if ( data.description ) { #>
     100                        <span id="{{ descriptionId }}" class="description customize-control-description">{{{ data.description }}}</span>
     101                        <# describedBy = 'aria-describedby=' + descriptionId; #>
     102                <# } #>
     103                <div class="customize-control-content">
     104                        <input class="color-picker-hex" id="{{ inputId }}" type="text" maxlength="7" placeholder="<?php esc_attr_e( 'Hex Value' ); ?>" {{ defaultValue }} {{ describedBy }} />
     105                </div>
    101106                <?php
    102107        }
    103108}

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

    diff --git src/wp-includes/customize/class-wp-customize-media-control.php src/wp-includes/customize/class-wp-customize-media-control.php
index c99fd98..fa23ba0 100644
    class WP_Customize_Media_Control extends WP_Customize_Control { 
    142142         */
    143143        public function content_template() {
    144144                ?>
    145                 <label for="{{ data.settings['default'] }}-button">
    146                         <# if ( data.label ) { #>
     145                <# var describedBy = ''; #>
     146                <# if ( data.label ) { #>
     147                        <label for="{{ data.settings['default'] }}-button">
    147148                                <span class="customize-control-title">{{ data.label }}</span>
    148                         <# } #>
    149                         <# if ( data.description ) { #>
    150                                 <span class="description customize-control-description">{{{ data.description }}}</span>
    151                         <# } #>
    152                 </label>
     149                        </label>
     150                <# } #>
     151                <# if ( data.description ) { #>
     152                        <span id="{{ data.settings['default'] }}-description" class="description customize-control-description">{{{ data.description }}}</span>
     153                        <# describedBy = 'aria-describedby=' + data.settings['default'] + '-description'; #>
     154                <# } #>
    153155
    154156                <# if ( data.attachment && data.attachment.id ) { #>
    155157                        <div class="current">
    … … class WP_Customize_Media_Control extends WP_Customize_Control { 
    194196                        <div class="actions">
    195197                                <# if ( data.canUpload ) { #>
    196198                                <button type="button" class="button remove-button"><?php echo $this->button_labels['remove']; ?></button>
    197                                 <button type="button" class="button upload-button" id="{{ data.settings['default'] }}-button"><?php echo $this->button_labels['change']; ?></button>
     199                                <button type="button" class="button upload-button" id="{{ data.settings['default'] }}-button" {{ describedBy }}><?php echo $this->button_labels['change']; ?></button>
    198200                                <div style="clear:both"></div>
    199201                                <# } #>
    200202                        </div>
    … … class WP_Customize_Media_Control extends WP_Customize_Control { 
    215217                                        <button type="button" class="button default-button"><?php echo $this->button_labels['default']; ?></button>
    216218                                <# } #>
    217219                                <# if ( data.canUpload ) { #>
    218                                 <button type="button" class="button upload-button" id="{{ data.settings['default'] }}-button"><?php echo $this->button_labels['select']; ?></button>
     220                                <button type="button" class="button upload-button" id="{{ data.settings['default'] }}-button" {{ describedBy }}><?php echo $this->button_labels['select']; ?></button>
    219221                                <# } #>
    220222                                <div style="clear:both"></div>
    221223                        </div>

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

    diff --git src/wp-includes/customize/class-wp-customize-nav-menu-location-control.php src/wp-includes/customize/class-wp-customize-nav-menu-location-control.php
index 80ba741..fb7b58e 100644
    class WP_Customize_Nav_Menu_Location_Control extends WP_Customize_Control { 
    5959                if ( empty( $this->choices ) ) {
    6060                        return;
    6161                }
     62                $input_id = '_customize-input-nav_menu_locations-' . $this->location_id;
     63                $description_id = '_customize-description-nav_menu_locations-' . $this->location_id;
     64                $describedby = ( ! empty( $this->description ) ) ? 'aria-describedby="' . esc_attr( $description_id ). '"' : '';
    6265                ?>
    63                 <label>
    64                         <?php if ( ! empty( $this->label ) ) : ?>
     66
     67                <?php if ( ! empty( $this->label ) ) : ?>
     68                <label for="<?php echo esc_attr( $input_id ); ?>">
    6569                        <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    66                         <?php endif; ?>
     70                </label>
     71                <?php endif; ?>
    6772
    68                         <?php if ( ! empty( $this->description ) ) : ?>
    69                         <span class="description customize-control-description"><?php echo $this->description; ?></span>
    70                         <?php endif; ?>
     73                <?php if ( ! empty( $this->description ) ) : ?>
     74                <span id="<?php echo esc_attr( $description_id ); ?>" class="description customize-control-description"><?php echo $this->description; ?></span>
     75                <?php endif; ?>
    7176
    72                         <select <?php $this->link(); ?>>
    73                                 <?php
    74                                 foreach ( $this->choices as $value => $label ) :
    75                                         echo '<option value="' . esc_attr( $value ) . '"' . selected( $this->value(), $value, false ) . '>' . $label . '</option>';
    76                                 endforeach;
    77                                 ?>
    78                         </select>
    79                 </label>
     77                <select  id="<?php echo esc_attr( $input_id ); ?>" <?php $this->link(); ?> <?php echo $describedby; ?>>
     78                        <?php
     79                        foreach ( $this->choices as $value => $label ) :
     80                                echo '<option value="' . esc_attr( $value ) . '"' . selected( $this->value(), $value, false ) . '>' . $label . '</option>';
     81                        endforeach;
     82                        ?>
     83                </select>
     84               
    8085                <?php
    8186        }
    8287}