Ticket #47145: 47145.diff

src/js/media/views/modal.js

@@ -117 +117 @@
                 // Set initial focus on the content instead of this view element, to avoid page scrolling.
                 this.$( '.media-modal' ).focus();
 
+                // Hide the page content from assistive technologies.
+                this.hideBodyFromScreenReaders( $el );
+
                 return this.propagate('open');
         },
 
@@ -135 +138 @@
                 // Hide modal and remove restricted media modal tab focus once it's closed
                 this.$el.hide().undelegate( 'keydown' );
 
+                /*
+                 * Make all body children that have been made hidden when the modal opened
+                 * visible again to assistive technologies.
+                 */
+                _.each( $( this.hiddenElements ), function( element ) {
+                        element.removeAttribute( 'aria-hidden' );
+                } );
+
+                this.hiddenElements = [];
+                this.isBodyHidden   = false;
+
                 // Move focus back in useful location once modal is closed.
                 if ( null !== this.clickedOpenerEl ) {
                         // Move focus back to the element that opened the modal.
@@ -202 +216 @@
                         this.escape();
                         event.stopImmediatePropagation();
                 }
+        },
+
+        /**
+         * Stores elements that should be hidden from assistive technologies when
+         * the modal opens.
+         */
+        hiddenElements: [],
+
+        /**
+         * Hides from assistive technologies all elements in the body element except
+         * the provided element and other elements that should not be hidden.
+         *
+         * The reason we do this is because `aria-modal="true"` is buggy in Safari 11.1
+         * and support is spotty in other browsers overall. In the future we should
+         * consider removing these helper functions in favor of `aria-modal="true"`.
+         *
+         * @param {object} dialogElement The jQuery object representing the element that should not be hidden.
+         */
+        hideBodyFromScreenReaders: function( dialogElement ) {
+                var elements,
+                        self = this;
+
+                if ( this.isBodyHidden ) {
+                        return;
+                }
+
+                // Get all the body children.
+                elements = document.body.children;
+
+                // Loop through the body children and hide the ones that should be hidden.
+                _.each( elements, function( element ) {
+                        // Don't hide the modal element.
+                        if ( element === dialogElement[0] ) {
+                                return;
+                        }
+
+                        // Determine the body children to hide.
+                        if ( self.elementShouldBeHidden( element ) ) {
+                                element.setAttribute( 'aria-hidden', 'true' );
+                                // Store the hidden elements.
+                                self.hiddenElements.push( element );
+                        }
+                } );
+
+                this.isBodyHidden = true;
+        },
+
+        /**
+         * Determines if the passed element should not be hidden from assistive technologies.
+         *
+         * @param {object} element The DOM element that should be checked.
+         *
+         * @return {boolean} Whether the element should not be hidden from assistive technologies.
+         */
+        elementShouldBeHidden: function( element ) {
+                var role = element.getAttribute( 'role' ),
+                        liveRegionsRoles = [ 'alert', 'status', 'log', 'marquee', 'timer' ];
+
+                /*
+                 * Don't hide scripts, elements that already have `aria-hidden`, and
+                 * ARIA live regions.
+                 */
+                return ! (
+                        element.tagName === 'SCRIPT' ||
+                        element.hasAttribute( 'aria-hidden' ) ||
+                        element.hasAttribute( 'aria-live' ) ||
+                        liveRegionsRoles.indexOf( role ) !== -1
+                );
         }
 });
 

src/wp-includes/css/media-views.css

@@ -542 +542 @@
         right: 0;
         bottom: 0;
         margin: 0;
-        padding: 10px 0;
+        padding: 50px 0 10px;
         background: #f3f3f3;
         border-right-width: 1px;
         border-right-style: solid;
@@ -2530 +2530 @@
 
 /* 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 {

src/wp-includes/media-template.php

@@ -177 +177 @@
 
         <?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 +187 @@
 
         <?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>