vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-05-21 19:54:32 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Accessibility: Replace media placeholder clickable divs with buttons.

Browse Source 
`<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.


git-svn-id: https://develop.svn.wordpress.org/trunk@44796 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia
2019-03-05 17:49:00 +00:00
parent da4f8d0ffb
commit 951b462ea2
7 changed files with 231 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/wp-includes/customize/class-wp-customize-media-control.php
View File

@@ -132,12 +132,11 @@ class WP_Customize_Media_Control extends WP_Customize_Control {
public function content_template() {
?>
<#
var selectButtonId = _.uniqueId( 'customize-media-control-button-' );
var descriptionId = _.uniqueId( 'customize-media-control-description-' );
var describedByAttr = data.description ? ' aria-describedby="' + descriptionId + '" ' : '';
#>
<# if ( data.label ) { #>
<label class="customize-control-title" for="{{ selectButtonId }}">{{ data.label }}</label>
<span class="customize-control-title">{{ data.label }}</span>
<# } #>
<div class="customize-control-notifications-container"></div>
<# if ( data.description ) { #>
@@ -182,22 +181,19 @@ class WP_Customize_Media_Control extends WP_Customize_Control {
<div class="actions">
<# if ( data.canUpload ) { #>
<button type="button" class="button remove-button">{{ data.button_labels.remove }}</button>
<button type="button" class="button upload-button control-focus" id="{{ selectButtonId }}" {{{ describedByAttr }}}>{{ data.button_labels.change }}</button>
<button type="button" class="button upload-button control-focus" {{{ describedByAttr }}}>{{ data.button_labels.change }}</button>
<# } #>
</div>
</div>
<# } else { #>
<div class="attachment-media-view">
<div class="placeholder">
{{ data.button_labels.placeholder }}
</div>
<# if ( data.canUpload ) { #>
<button type="button" class="upload-button button-add-media" {{{ describedByAttr }}}>{{ data.button_labels.select }}</button>
<# } #>
<div class="actions">
<# if ( data.defaultAttachment ) { #>
<button type="button" class="button default-button">{{ data.button_labels['default'] }}</button>
<# } #>
<# if ( data.canUpload ) { #>
<button type="button" class="button upload-button" id="{{ selectButtonId }}" {{{ describedByAttr }}}>{{ data.button_labels.select }}</button>
<# } #>
</div>
</div>
<# } #>
@@ -241,6 +237,7 @@ class WP_Customize_Media_Control extends WP_Customize_Control {
case 'image':
return array(
'select' => __( 'Select image' ),
'site_icon' => __( 'Select site icon' ),
'change' => __( 'Change image' ),
'default' => __( 'Default' ),
'remove' => __( 'Remove' ),

25
src/wp-includes/customize/class-wp-customize-site-icon-control.php
View File

@@ -47,14 +47,12 @@ class WP_Customize_Site_Icon_Control extends WP_Customize_Cropped_Image_Control
*/
public function content_template() {
?>
<label for="{{ data.settings['default'] }}-button">
<# if ( data.label ) { #>
<span class="customize-control-title">{{ data.label }}</span>
<# } #>
<# if ( data.description ) { #>
<span class="description customize-control-description">{{{ data.description }}}</span>
<# } #>
</label>
<# if ( data.label ) { #>
<span class="customize-control-title">{{ data.label }}</span>
<# } #>
<# if ( data.description ) { #>
<span class="description customize-control-description">{{{ data.description }}}</span>
<# } #>
<# if ( data.attachment && data.attachment.id ) { #>
<div class="attachment-media-view">
@@ -74,22 +72,19 @@ class WP_Customize_Site_Icon_Control extends WP_Customize_Cropped_Image_Control
<div class="actions">
<# if ( data.canUpload ) { #>
<button type="button" class="button remove-button"><?php echo $this->button_labels['remove']; ?></button>
<button type="button" class="button upload-button" id="{{ data.settings['default'] }}-button"><?php echo $this->button_labels['change']; ?></button>
<button type="button" class="button upload-button"><?php echo $this->button_labels['change']; ?></button>
<# } #>
</div>
</div>
<# } else { #>
<div class="attachment-media-view">
<div class="placeholder">
<?php echo $this->button_labels['placeholder']; ?>
</div>
<# if ( data.canUpload ) { #>
<button type="button" class="upload-button button-add-media"><?php echo $this->button_labels['site_icon']; ?></button>
<# } #>
<div class="actions">
<# if ( data.defaultAttachment ) { #>
<button type="button" class="button default-button"><?php echo $this->button_labels['default']; ?></button>
<# } #>
<# if ( data.canUpload ) { #>
<button type="button" class="button upload-button" id="{{ data.settings['default'] }}-button"><?php echo $this->button_labels['select']; ?></button>
<# } #>
</div>
</div>
<# } #>