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-site-icon-control.php

    r41162 r44796  
    4848    public function content_template() {
    4949        ?>
    50         <label for="{{ data.settings['default'] }}-button">
    51             <# if ( data.label ) { #>
    52                 <span class="customize-control-title">{{ data.label }}</span>
    53             <# } #>
    54             <# if ( data.description ) { #>
    55                 <span class="description customize-control-description">{{{ data.description }}}</span>
    56             <# } #>
    57         </label>
     50        <# if ( data.label ) { #>
     51            <span class="customize-control-title">{{ data.label }}</span>
     52        <# } #>
     53        <# if ( data.description ) { #>
     54            <span class="description customize-control-description">{{{ data.description }}}</span>
     55        <# } #>
    5856
    5957        <# if ( data.attachment && data.attachment.id ) { #>
     
    7573                    <# if ( data.canUpload ) { #>
    7674                        <button type="button" class="button remove-button"><?php echo $this->button_labels['remove']; ?></button>
    77                         <button type="button" class="button upload-button" id="{{ data.settings['default'] }}-button"><?php echo $this->button_labels['change']; ?></button>
     75                        <button type="button" class="button upload-button"><?php echo $this->button_labels['change']; ?></button>
    7876                    <# } #>
    7977                </div>
     
    8179        <# } else { #>
    8280            <div class="attachment-media-view">
    83                 <div class="placeholder">
    84                     <?php echo $this->button_labels['placeholder']; ?>
    85                 </div>
     81                <# if ( data.canUpload ) { #>
     82                    <button type="button" class="upload-button button-add-media"><?php echo $this->button_labels['site_icon']; ?></button>
     83                <# } #>
    8684                <div class="actions">
    8785                    <# if ( data.defaultAttachment ) { #>
    8886                        <button type="button" class="button default-button"><?php echo $this->button_labels['default']; ?></button>
    89                     <# } #>
    90                     <# if ( data.canUpload ) { #>
    91                         <button type="button" class="button upload-button" id="{{ data.settings['default'] }}-button"><?php echo $this->button_labels['select']; ?></button>
    9287                    <# } #>
    9388                </div>
Note: See TracChangeset for help on using the changeset viewer.