Accessibility: Media: Add more headings in the Media Modal.

Headings are the predominant mechanism for screen reader users to find information in a page. They also help all users to better identify the main sections of user interfaces.

- adds three new headings within the media modal 
- improves plural form translation for "item selected" by using `wp.i18n`
- horizontally centers the media modal menu in the responsive view

Props kjellr, karmatosed, melchoyce, afercia.
See #47149.
Fixes #47610.


git-svn-id: https://develop.svn.wordpress.org/trunk@46375 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia
2019-10-03 12:09:31 +00:00
parent ee03b05605
commit 37cdffd3cc
7 changed files with 111 additions and 30 deletions

View File

@@ -178,6 +178,7 @@ function wp_print_media_templates() {
<?php // Template for the media frame: used both in the media grid and in the media modal. ?>
<script type="text/html" id="tmpl-media-frame">
<div class="media-frame-title" id="media-frame-title"></div>
<h2 class="media-frame-menu-heading"><?php _e( 'Media Types' ); ?></h2>
<button type="button" class="button button-link media-frame-menu-toggle" aria-expanded="false">
<?php _e( 'Media Types' ); ?>
<span class="dashicons dashicons-arrow-down" aria-hidden="true"></span>
@@ -187,6 +188,7 @@ function wp_print_media_templates() {
<div class="media-frame-router"></div>
<div class="media-frame-content"></div>
</div>
<h2 class="media-frame-actions-heading screen-reader-text"><?php _e( 'Available actions' ); ?></h2>
<div class="media-frame-toolbar"></div>
<div class="media-frame-uploader"></div>
</script>