WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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.

Built from https://develop.svn.wordpress.org/trunk@44796


git-svn-id: http://core.svn.wordpress.org/trunk@44628 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia 2019-03-05 17:49:52 +00:00
parent 4094d3687a
commit 5c60995bd4
13 changed files with 109 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
wp-admin/css/customize-controls-rtl.css
View File

@ -1379,6 +1379,7 @@ p.customize-section-description {
}
.customize-control .attachment-media-view .placeholder,
.customize-control .attachment-media-view .button-add-media,
.customize-control-header .placeholder {
width: 100%;
position: relative;
@ -1390,6 +1391,26 @@ p.customize-section-description {
line-height: 20px;
}
.customize-control .attachment-media-view .button-add-media {
cursor: pointer;
background-color: #edeff0;
color: #32373c;
}
.customize-control .attachment-media-view .button-add-media:hover {
background-color: #fbfbfc;
}
.customize-control .attachment-media-view .button-add-media:focus {
background-color: #fbfbfc;
border-style: solid;
border-color: #5b9dd9;
box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
outline-offset: -2px;
}
.customize-control-header .inner {
display: none;
position: absolute;

2
wp-admin/css/customize-controls-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

21
wp-admin/css/customize-controls.css
View File

@ -1379,6 +1379,7 @@ p.customize-section-description {
}
.customize-control .attachment-media-view .placeholder,
.customize-control .attachment-media-view .button-add-media,
.customize-control-header .placeholder {
width: 100%;
position: relative;
@ -1390,6 +1391,26 @@ p.customize-section-description {
line-height: 20px;
}
.customize-control .attachment-media-view .button-add-media {
cursor: pointer;
background-color: #edeff0;
color: #32373c;
}
.customize-control .attachment-media-view .button-add-media:hover {
background-color: #fbfbfc;
}
.customize-control .attachment-media-view .button-add-media:focus {
background-color: #fbfbfc;
border-style: solid;
border-color: #5b9dd9;
box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
outline-offset: -2px;
}
.customize-control-header .inner {
display: none;
position: absolute;

2
wp-admin/css/customize-controls.min.css vendored
View File

File diff suppressed because one or more lines are too long

21
wp-admin/css/widgets-rtl.css
View File

@ -84,6 +84,7 @@
margin-left: 8px;
}
.media-widget-control .attachment-media-view .button-add-media,
.media-widget-control .placeholder {
border: 1px dashed #b4b9be;
box-sizing: border-box;
@ -95,6 +96,26 @@
width: 100%;
}
.media-widget-control .attachment-media-view .button-add-media {
cursor: pointer;
background-color: #edeff0;
color: #32373c;
}
.media-widget-control .attachment-media-view .button-add-media:hover {
background-color: #fbfbfc;
}
.media-widget-control .attachment-media-view .button-add-media:focus {
background-color: #fbfbfc;
border-style: solid;
border-color: #5b9dd9;
box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
outline-offset: -2px;
}
.media-widget-control .media-widget-preview {
background: transparent;
text-align: center;

2
wp-admin/css/widgets-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

21
wp-admin/css/widgets.css
View File

@ -84,6 +84,7 @@
margin-right: 8px;
}
.media-widget-control .attachment-media-view .button-add-media,
.media-widget-control .placeholder {
border: 1px dashed #b4b9be;
box-sizing: border-box;
@ -95,6 +96,26 @@
width: 100%;
}
.media-widget-control .attachment-media-view .button-add-media {
cursor: pointer;
background-color: #edeff0;
color: #32373c;
}
.media-widget-control .attachment-media-view .button-add-media:hover {
background-color: #fbfbfc;
}
.media-widget-control .attachment-media-view .button-add-media:focus {
background-color: #fbfbfc;
border-style: solid;
border-color: #5b9dd9;
box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
outline-offset: -2px;
}
.media-widget-control .media-widget-preview {
background: transparent;
text-align: center;

2
wp-admin/css/widgets.min.css vendored
View File

File diff suppressed because one or more lines are too long

15
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
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>
<# } #>

2
wp-includes/version.php
View File

@ -13,7 +13,7 @@
*
* @global string $wp_version
*/
$wp_version = '5.2-alpha-44794';
$wp_version = '5.2-alpha-44796';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.

2
wp-includes/widgets/class-wp-widget-media-gallery.php
View File

@ -228,7 +228,7 @@ class WP_Widget_Media_Gallery extends WP_Widget_Media {
</ul>
<# } else { #>
<div class="attachment-media-view">
<p class="placeholder"><?php echo esc_html( $this->l10n['no_media_selected'] ); ?></p>
<button type="button" class="placeholder button-add-media"><?php echo esc_html( $this->l10n['add_media'] ); ?></button>
</div>
<# } #>
</script>

7
wp-includes/widgets/class-wp-widget-media.php
View File

@ -411,7 +411,9 @@ abstract class WP_Widget_Media extends WP_Widget {
</p>
<div class="media-widget-preview <?php echo esc_attr( $this->id_base ); ?>">
<div class="attachment-media-view">
<div class="placeholder"><?php echo esc_html( $this->l10n['no_media_selected'] ); ?></div>
<button type="button" class="select-media button-add-media not-selected">
<?php echo esc_html( $this->l10n['add_media'] ); ?>
</button>
</div>
</div>
<p class="media-widget-buttons">
@ -423,9 +425,6 @@ abstract class WP_Widget_Media extends WP_Widget {
<?php echo esc_html( $this->l10n['replace_media'] ); ?>
</button>
<?php endif; ?>
<button type="button" class="button select-media not-selected">
<?php echo esc_html( $this->l10n['add_media'] ); ?>
</button>
</p>
<div class="media-widget-fields">
</div>