Skip to content

Commit 951b462

Browse files
aferciaafercia
committed
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. git-svn-id: https://develop.svn.wordpress.org/trunk@44796 602fd350-edb4-49c9-b593-d223f7449a82
1 parent da4f8d0 commit 951b462

File tree

7 files changed

+228
-178
lines changed

7 files changed

+228
-178
lines changed

‎src/wp-admin/css/customize-controls.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1379,6 +1379,7 @@ p.customize-section-description {
13791379
}
13801380

13811381
.customize-control .attachment-media-view .placeholder,
1382+
.customize-control .attachment-media-view .button-add-media,
13821383
.customize-control-header .placeholder {
13831384
width: 100%;
13841385
position: relative;
@@ -1390,6 +1391,26 @@ p.customize-section-description {
13901391
line-height: 20px;
13911392
}
13921393

1394+
.customize-control .attachment-media-view .button-add-media {
1395+
cursor: pointer;
1396+
background-color: #edeff0;
1397+
color: #32373c;
1398+
}
1399+
1400+
.customize-control .attachment-media-view .button-add-media:hover {
1401+
background-color: #fbfbfc;
1402+
}
1403+
1404+
.customize-control .attachment-media-view .button-add-media:focus {
1405+
background-color: #fbfbfc;
1406+
border-style: solid;
1407+
border-color: #5b9dd9;
1408+
box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
1409+
/* Only visible in Windows High Contrast mode */
1410+
outline: 2px solid transparent;
1411+
outline-offset: -2px;
1412+
}
1413+
13931414
.customize-control-header .inner {
13941415
display: none;
13951416
position: absolute;

‎src/wp-admin/css/widgets.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@
8484
margin-right: 8px;
8585
}
8686

87+
.media-widget-control .attachment-media-view .button-add-media,
8788
.media-widget-control .placeholder {
8889
border: 1px dashed #b4b9be;
8990
box-sizing: border-box;
@@ -95,6 +96,26 @@
9596
width: 100%;
9697
}
9798

99+
.media-widget-control .attachment-media-view .button-add-media {
100+
cursor: pointer;
101+
background-color: #edeff0;
102+
color: #32373c;
103+
}
104+
105+
.media-widget-control .attachment-media-view .button-add-media:hover {
106+
background-color: #fbfbfc;
107+
}
108+
109+
.media-widget-control .attachment-media-view .button-add-media:focus {
110+
background-color: #fbfbfc;
111+
border-style: solid;
112+
border-color: #5b9dd9;
113+
box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
114+
/* Only visible in Windows High Contrast mode */
115+
outline: 2px solid transparent;
116+
outline-offset: -2px;
117+
}
118+
98119
.media-widget-control .media-widget-preview {
99120
background: transparent;
100121
text-align: center;

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

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -132,12 +132,11 @@ public function render_content() {}
132132
public function content_template() {
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>
143142
<# if ( data.description ) { #>
@@ -182,22 +181,19 @@ public function content_template() {
182181
<div class="actions">
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>
188187
</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>
197196
<# } #>
198-
<# if ( data.canUpload ) { #>
199-
<button type="button" class="button upload-button" id="{{ selectButtonId }}" {{{ describedByAttr }}}>{{ data.button_labels.select }}</button>
200-
<# } #>
201197
</div>
202198
</div>
203199
<# } #>
@@ -241,6 +237,7 @@ public function get_default_button_labels() {
241237
case 'image':
242238
return array(
243239
'select' => __( 'Select image' ),
240+
'site_icon' => __( 'Select site icon' ),
244241
'change' => __( 'Change image' ),
245242
'default' => __( 'Default' ),
246243
'remove' => __( 'Remove' ),

‎src/wp-includes/customize/class-wp-customize-site-icon-control.php‎

Lines changed: 10 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -47,14 +47,12 @@ public function __construct( $manager, $id, $args = array() ) {
4747
*/
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 ) { #>
6058
<div class="attachment-media-view">
@@ -74,22 +72,19 @@ public function content_template() {
7472
<div class="actions">
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>
8078
</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>
8987
<# } #>
90-
<# if ( data.canUpload ) { #>
91-
<button type="button" class="button upload-button" id="{{ data.settings['default'] }}-button"><?php echo $this->button_labels['select']; ?></button>
92-
<# } #>
9388
</div>
9489
</div>
9590
<# } #>

‎src/wp-includes/widgets/class-wp-widget-media-gallery.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,7 @@ public function render_control_template_scripts() {
228228
</ul>
229229
<# } else { #>
230230
<div class="attachment-media-view">
231-
<p class="placeholder"><?php echo esc_html( $this->l10n['no_media_selected'] ); ?></p>
231+
<button type="button" class="placeholder button-add-media"><?php echo esc_html( $this->l10n['add_media'] ); ?></button>
232232
</div>
233233
<# } #>
234234
</script>

‎src/wp-includes/widgets/class-wp-widget-media.php‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -411,7 +411,9 @@ public function render_control_template_scripts() {
411411
</p>
412412
<div class="media-widget-preview <?php echo esc_attr( $this->id_base ); ?>">
413413
<div class="attachment-media-view">
414-
<div class="placeholder"><?php echo esc_html( $this->l10n['no_media_selected'] ); ?></div>
414+
<button type="button" class="select-media button-add-media not-selected">
415+
<?php echo esc_html( $this->l10n['add_media'] ); ?>
416+
</button>
415417
</div>
416418
</div>
417419
<p class="media-widget-buttons">
@@ -423,9 +425,6 @@ public function render_control_template_scripts() {
423425
<?php echo esc_html( $this->l10n['replace_media'] ); ?>
424426
</button>
425427
<?php endif; ?>
426-
<button type="button" class="button select-media not-selected">
427-
<?php echo esc_html( $this->l10n['add_media'] ); ?>
428-
</button>
429428
</p>
430429
<div class="media-widget-fields">
431430
</div>

0 commit comments

Comments
 (0)