vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-10-04 06:37:06 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Accessibility: Make the Media modal an ARIA modal dialog.

Browse Source 
For a number of years, the Media modal missed an explicit ARIA role and the required attributes for modal dialogs.

This was confusing for assistive technology users, since they may not realize they're inside a dialog, and that consequently the keyboard interactions may be different from the rest of the page. Lack of an explicit label for the dialog was confusing as well, since assistive technology users didn't have an immediate sense of what the dialog is for.

This change makes the Media modal meet the ARIA Authoring Practices recommendations, helping users better understand the purpose and interactions with the modal. Also, it makes sure to hide the rest of the page content from assistive technologies, until support for `aria-modal="true"` improves.

Additionally:
- moves the modal H1 heading to the beginning of the modal content 
- changes the modal left menu position to make visual and DOM order match 
- improves the `wp.media.view.FocusManager` documentation

Fixes #47145.


git-svn-id: https://develop.svn.wordpress.org/trunk@45572 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia
2019-06-27 12:32:28 +00:00
parent f8228d3116
commit 66d9c7e491
4 changed files with 140 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/wp-includes/css/media-views.css
+13 -3
View File
@@ -542,7 +542,7 @@
right: 0;
bottom: 0;
margin: 0;
padding: 10px 0;
padding: 50px 0 10px;
background: #f3f3f3;
border-right-width: 1px;
border-right-style: solid;
@@ -2530,8 +2530,9 @@
/* Landscape specific header override */
@media screen and (max-height: 400px) {
.media-menu {
padding: 0;
.media-menu,
.media-frame:not(.hide-menu) .media-menu {
top: 44px;
}
.media-frame-router {
@@ -2552,6 +2553,14 @@
}
}
@media only screen and (min-width: 901px) and (max-height: 400px) {
.media-menu,
.media-frame:not(.hide-menu) .media-menu {
top: 0;
padding-top: 44px;
}
}
@media only screen and (max-width: 480px) {
.media-modal-close {
top: -5px;
@@ -2578,6 +2587,7 @@
.media-frame-router,
.media-frame:not(.hide-menu) .media-menu {
top: 40px;
padding-top: 0;
}
.media-frame-content {
src/wp-includes/media-template.php
+3 -3
View File
@@ -177,8 +177,8 @@ 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>
<div class="media-frame-menu"></div>
<div class="media-frame-title"></div>
<div class="media-frame-router"></div>
<div class="media-frame-content"></div>
<div class="media-frame-toolbar"></div>
@@ -187,11 +187,11 @@ function wp_print_media_templates() {
<?php // Template for the media modal. ?>
<script type="text/html" id="tmpl-media-modal">
<div tabindex="0" class="<?php echo $class; ?>">
<div tabindex="0" class="<?php echo $class; ?>" role="dialog" aria-modal="true" aria-labelledby="media-frame-title">
<# if ( data.hasCloseButton ) { #>
<button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close dialog' ); ?></span></span></button>
<# } #>
<div class="media-modal-content"></div>
<div class="media-modal-content" role="document"></div>
</div>
<div class="media-modal-backdrop"></div>
</script>