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
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

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>

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>