WordPress.org

Make WordPress Core


Ignore:
Timestamp:
03/05/2019 05:49:00 PM (4 months ago)
Author:
afercia
Message:

Accessibility: Replace media placeholder clickable divs with buttons.

<button> elements are natively interactive, supported by any assistive technology, and must be used instead of non-semantic, non-accessible <div> elements.

Also, this change aligns the Media Widgets and the Customizer site icon and site logo controls with the design pattern used in the new Block Editor for similar controls.

Props ramonopoly, welcher, afercia.
Fixes #43151.

File:
1 edited

Legend:

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

    r44785 r44796  
    133133        ?>
    134134        <#
    135         var selectButtonId = _.uniqueId( 'customize-media-control-button-' );
    136135        var descriptionId = _.uniqueId( 'customize-media-control-description-' );
    137136        var describedByAttr = data.description ? ' aria-describedby="' + descriptionId + '" ' : '';
    138137        #>
    139138        <# if ( data.label ) { #>
    140             <label class="customize-control-title" for="{{ selectButtonId }}">{{ data.label }}</label>
     139            <span class="customize-control-title">{{ data.label }}</span>
    141140        <# } #>
    142141        <div class="customize-control-notifications-container"></div>
     
    183182                    <# if ( data.canUpload ) { #>
    184183                    <button type="button" class="button remove-button">{{ data.button_labels.remove }}</button>
    185                     <button type="button" class="button upload-button control-focus" id="{{ selectButtonId }}" {{{ describedByAttr }}}>{{ data.button_labels.change }}</button>
     184                    <button type="button" class="button upload-button control-focus" {{{ describedByAttr }}}>{{ data.button_labels.change }}</button>
    186185                    <# } #>
    187186                </div>
     
    189188        <# } else { #>
    190189            <div class="attachment-media-view">
    191                 <div class="placeholder">
    192                         {{ data.button_labels.placeholder }}
    193                 </div>
     190                <# if ( data.canUpload ) { #>
     191                    <button type="button" class="upload-button button-add-media" {{{ describedByAttr }}}>{{ data.button_labels.select }}</button>
     192                <# } #>
    194193                <div class="actions">
    195194                    <# if ( data.defaultAttachment ) { #>
    196195                        <button type="button" class="button default-button">{{ data.button_labels['default'] }}</button>
    197                     <# } #>
    198                     <# if ( data.canUpload ) { #>
    199                     <button type="button" class="button upload-button" id="{{ selectButtonId }}" {{{ describedByAttr }}}>{{ data.button_labels.select }}</button>
    200196                    <# } #>
    201197                </div>
     
    242238                return array(
    243239                    'select'       => __( 'Select image' ),
     240                    'site_icon'    => __( 'Select site icon' ),
    244241                    'change'       => __( 'Change image' ),
    245242                    'default'      => __( 'Default' ),
Note: See TracChangeset for help on using the changeset viewer.