Ticket #47149: 47149.5.diff

src/js/media/views/focus-manager.js

@@ +1 @@
+var $ = jQuery;
+
 /**
  * wp.media.view.FocusManager
  *
@@ -11 +13 @@
 var FocusManager = wp.media.View.extend(/** @lends wp.media.view.FocusManager.prototype */{
 
         events: {
-                'keydown': 'constrainTabbing'
+                'keydown': 'focusManagementMode'
         },
 
         /**
+         * Initializes the Focus Manager.
+         *
+         * @param {object} options The Focus Manager options.
+         *
+         * @since 5.3.0
+         *
+         * @return {void}
+         */
+        initialize: function( options ) {
+                this.mode                    = options.mode || 'constrainTabbing';
+                this.tabsAutomaticActivation = options.tabsAutomaticActivation || false;
+        },
+
+        /**
+         * Determines which focus management mode to use.
+         *
+         * @since 5.3.0
+         *
+         * @param {object} event jQuery event object.
+         *
+         * @returns {void}
+         */
+        focusManagementMode: function( event ) {
+                if ( this.mode === 'constrainTabbing' ) {
+                        this.constrainTabbing( event );
+                }
+
+                if ( this.mode === 'tabsNavigation' ) {
+                        this.tabsNavigation( event );
+                }
+        },
+
+        /**
          * Gets all the tabbable elements.
          *
          * @since 5.3.0
@@ -67 +102 @@
         },
 
         /**
-         * Hides from assistive technologies all the body children except the
-         * provided element and other elements that should not be hidden.
+         * Hides from assistive technologies all the body children.
          *
+         * Sets an `aria-hidden="true"` attribute on all the body children except
+         * the provided element and other elements that should not be hidden.
+         *
          * The reason why we use `aria-hidden` is that `aria-modal="true"` is buggy
          * in Safari 11.1 and support is spotty in other browsers. In the future we
          * should consider to remove this helper function and only use `aria-modal="true"`.
@@ -110 +147 @@
         },
 
         /**
-         * Makes visible again to assistive technologies all body children
+         * Unhides from assistive technologies all the body children.
+         *
+         * Makes visible again to assistive technologies all the body children
          * previously hidden and stored in this.ariaHiddenElements.
          *
          * @since 5.2.3
@@ -164 +203 @@
          *
          * @since 5.2.3
          */
-        ariaHiddenElements: []
+        ariaHiddenElements: [],
+
+        /**
+         * Holds the jQuery collection of ARIA tabs.
+         *
+         * @since 5.3.0
+         */
+        tabs: $(),
+
+        /**
+         * Sets up tabs in an ARIA tabbed interface.
+         *
+         * @since 5.3.0
+         *
+         * @param {object} event jQuery event object.
+         *
+         * @returns {void}
+         */
+        setupAriaTabs: function() {
+                this.tabs = this.$( '[role="tab"]' );
+
+                // Set up initial attributes.
+                this.tabs.attr( {
+                        'aria-selected': 'false',
+                        tabIndex: '-1'
+                } );
+
+                // Set up attributes on the initially active tab.
+                this.tabs.filter( '.active' )
+                        .removeAttr( 'tabindex' )
+                        .attr( 'aria-selected', 'true' );
+        },
+
+        /**
+         * Enables arrows navigation within the ARIA tabbed interface.
+         *
+         * @since 5.3.0
+         *
+         * @param {object} event jQuery event object.
+         *
+         * @returns {void}
+         */
+        tabsNavigation: function( event ) {
+                var orientation = 'horizontal',
+                        keys = [ 32, 35, 36, 37, 38, 39, 40 ];
+
+                // Return if not Spacebar, End, Home, or Arrow keys.
+                if ( keys.indexOf( event.which ) === -1 ) {
+                        return;
+                }
+
+                // Determine navigation direction.
+                if ( this.$el.attr( 'aria-orientation' ) === 'vertical' ) {
+                        orientation = 'vertical';
+                }
+
+                // Make Up and Down arrow keys do nothing with horizontal tabs.
+                if ( orientation === 'horizontal' && [ 38, 40 ].indexOf( event.which ) !== -1 ) {
+                        return;
+                }
+
+                // Make Left and Right arrow keys do nothing with vertical tabs.
+                if ( orientation === 'vertical' && [ 37, 39 ].indexOf( event.which ) !== -1 ) {
+                        return;
+                }
+
+                this.switchTabs( event, this.tabs );
+        },
+
+        /**
+         * Switches tabs in the ARIA tabbed interface.
+         *
+         * @since 5.3.0
+         *
+         * @param {object} event jQuery event object.
+         *
+         * @returns {void}
+         */
+        switchTabs: function( event ) {
+                var key   = event.which,
+                        index = this.tabs.index( $( event.target ) ),
+                        newIndex;
+
+                switch ( key ) {
+                        // Space bar: Activate current targeted tab.
+                        case 32: {
+                                this.activateTab( this.tabs[ index ] );
+                                break;
+                        }
+                        // End key: Activate last tab.
+                        case 35: {
+                                event.preventDefault();
+                                this.activateTab( this.tabs[ this.tabs.length - 1 ] );
+                                break;
+                        }
+                        // Home key: Activate first tab.
+                        case 36: {
+                                event.preventDefault();
+                                this.activateTab( this.tabs[ 0 ] );
+                                break;
+                        }
+                        // Left and up keys: Activate previous tab.
+                        case 37:
+                        case 38: {
+                                event.preventDefault();
+                                newIndex = ( index - 1 ) < 0 ? this.tabs.length - 1 : index - 1;
+                                this.activateTab( this.tabs[ newIndex ] );
+                                break;
+                        }
+                        // Right and down keys: Activate next tab.
+                        case 39:
+                        case 40: {
+                                event.preventDefault();
+                                newIndex = ( index + 1 ) === this.tabs.length ? 0 : index + 1;
+                                this.activateTab( this.tabs[ newIndex ] );
+                                break;
+                        }
+                }
+        },
+
+        /**
+         * Sets a single tab to be focusable and semantically selected.
+         *
+         * @since 5.3.0
+         *
+         * @param {object} tab The tab DOM element.
+         *
+         * @returns {void}
+         */
+        activateTab: function( tab ) {
+                if ( ! tab ) {
+                        return;
+                }
+
+                // The tab is a DOM element: no need for jQuery methods.
+                tab.focus();
+
+                // Handle automatic activation.
+                if ( this.tabsAutomaticActivation ) {
+                        tab.removeAttribute( 'tabindex' );
+                        tab.setAttribute( 'aria-selected', 'true' );
+                        tab.click();
+
+                        return;
+                }
+
+                // Handle manual activation.
+                $( tab ).on( 'click', function() {
+                        tab.removeAttribute( 'tabindex' );
+                        tab.setAttribute( 'aria-selected', 'true' );
+                } );
+        }
 });
 
 module.exports = FocusManager;

src/js/media/views/frame/post.js

@@ -257 +257 @@
         mainMenu: function( view ) {
                 view.set({
                         'library-separator': new wp.media.View({
-                                className: 'separator',
-                                priority: 100
+                                className:  'separator',
+                                priority:   100,
+                                attributes: {
+                                        role: 'presentation'
+                                }
                         })
                 });
         },

src/js/media/views/media-frame.js

@@ -23 +23 @@
         regions:   ['menu','title','content','toolbar','router'],
 
         events: {
-                'click div.media-frame-title h1': 'toggleMenu'
+                'click .media-frame-menu-toggle': 'toggleMenu'
         },
 
         /**
@@ -75 +75 @@
                 this.on( 'title:create:default', this.createTitle, this );
                 this.title.mode('default');
 
-                this.on( 'title:render', function( view ) {
-                        view.$el.append( '<span class="dashicons dashicons-arrow-down"></span>' );
-                });
-
                 // Bind default menu.
                 this.on( 'menu:create:default', this.createMenu, this );
+
+                // Set the menu ARIA tab panel attributes when the modal opens.
+                this.on( 'open', this.setMenuTabPanelAriaAttributes, this );
+                // Set the router ARIA tab panel attributes when the modal opens.
+                this.on( 'open', this.setRouterTabPanelAriaAttributes, this );
+
+                // Update the menu ARIA tab panel attributes when the content updates.
+                this.on( 'content:render', this.setMenuTabPanelAriaAttributes, this );
+                // Update the router ARIA tab panel attributes when the content updates.
+                this.on( 'content:render', this.setRouterTabPanelAriaAttributes, this );
         },
+
         /**
+         * Sets the attributes to be used on the menu ARIA tab panel.
+         *
+         * @since 5.3.0
+         *
+         * @returns {void}
+         */
+        setMenuTabPanelAriaAttributes: function() {
+                var stateId = this.state().get( 'id' ),
+                        tabPanelEl = this.$el.find( '.media-frame-tab-panel' ),
+                        ariaLabelledby;
+
+                tabPanelEl.removeAttr( 'role aria-labelledby tabindex' );
+
+                if ( this.menuView && this.menuView.isVisible ) {
+                        ariaLabelledby = 'menu-item-' + stateId;
+
+                        // Set the tab panel attributes only if the tabs are visible.
+                        tabPanelEl
+                                .attr( {
+                                        role: 'tabpanel',
+                                        'aria-labelledby': ariaLabelledby,
+                                        tabIndex: '0'
+                                } );
+                }
+        },
+
+        /**
+         * Sets the attributes to be used on the router ARIA tab panel.
+         *
+         * @since 5.3.0
+         *
+         * @returns {void}
+         */
+        setRouterTabPanelAriaAttributes: function() {
+                var tabPanelEl = this.$el.find( '.media-frame-content' ),
+                        ariaLabelledby;
+
+                tabPanelEl.removeAttr( 'role aria-labelledby tabindex' );
+
+                // On the Embed view the router menu is hidden.
+                if ( 'embed' === this.content._mode ) {
+                        return;
+                }
+
+                // Set the tab panel attributes only if the tabs are visible.
+                if ( this.routerView && this.routerView.isVisible && this.content._mode ) {
+                        ariaLabelledby = 'menu-item-' + this.content._mode;
+
+                        tabPanelEl
+                                .attr( {
+                                        role: 'tabpanel',
+                                        'aria-labelledby': ariaLabelledby,
+                                        tabIndex: '0'
+                                } );
+                }
+        },
+
+        /**
          * @returns {wp.media.view.MediaFrame} Returns itself to allow chaining
          */
         render: function() {
@@ -111 +176 @@
          */
         createMenu: function( menu ) {
                 menu.view = new wp.media.view.Menu({
-                        controller: this
+                        controller: this,
+
+                        attributes: {
+                                role:               'tablist',
+                                'aria-orientation': 'vertical'
+                        }
                 });
+
+                this.menuView = menu.view;
         },
 
-        toggleMenu: function() {
-                this.$el.find( '.media-menu' ).toggleClass( 'visible' );
+        toggleMenu: function( event ) {
+                var menu = this.$el.find( '.media-menu' );
+
+                menu.toggleClass( 'visible' );
+                $( event.target ).attr( 'aria-expanded', menu.hasClass( 'visible' ) );
         },
 
         /**
@@ -134 +209 @@
          */
         createRouter: function( router ) {
                 router.view = new wp.media.view.Router({
-                        controller: this
+                        controller: this,
+
+                        attributes: {
+                                role:               'tablist',
+                                'aria-orientation': 'horizontal'
+                        }
                 });
+
+                this.routerView = router.view;
         },
         /**
          * @param {Object} options

src/js/media/views/menu-item.js

@@ -11 +11 @@
  * @augments Backbone.View
  */
 MenuItem = wp.media.View.extend(/** @lends wp.media.view.MenuItem.prototype */{
-        tagName:   'a',
+        tagName:   'button',
         className: 'media-menu-item',
 
         attributes: {
-                href: '#'
+                type: 'button',
+                role: 'tab'
         },
 
         events: {
                 'click': '_click'
         },
+
         /**
-         * @param {Object} event
+         * Allows to override the click event.
          */
-        _click: function( event ) {
+        _click: function() {
                 var clickOverride = this.options.click;
 
-                if ( event ) {
-                        event.preventDefault();
-                }
-
                 if ( clickOverride ) {
                         clickOverride.call( this );
                 } else {
@@ -43 +41 @@
 
                 if ( state ) {
                         this.controller.setState( state );
+                        // Toggle the menu visibility in the responsive view.
                         this.views.parent.$el.removeClass( 'visible' ); // TODO: or hide on any click, see below
                 }
         },
+
         /**
          * @returns {wp.media.view.MenuItem} returns itself to allow chaining
          */
         render: function() {
-                var options = this.options;
+                var options = this.options,
+                        menuProperty = options.state || options.contentMode;
 
                 if ( options.text ) {
                         this.$el.text( options.text );
@@ -58 +59 @@
                         this.$el.html( options.html );
                 }
 
+                // Set the menu item ID based on the frame state associated to the menu item.
+                this.$el.attr( 'id', 'menu-item-' + menuProperty );
+
                 return this;
         }
 });

src/js/media/views/menu.js

@@ -20 +20 @@
         ItemView:  MenuItem,
         region:    'menu',
 
-        /* TODO: alternatively hide on any click anywhere
-        events: {
-                'click': 'click'
+        attributes: {
+                role:               'tablist',
+                'aria-orientation': 'horizontal'
         },
 
-        click: function() {
-                this.$el.removeClass( 'visible' );
+        initialize: function() {
+                this._views = {};
+
+                this.set( _.extend( {}, this._views, this.options.views ), { silent: true });
+                delete this.options.views;
+
+                if ( ! this.options.silent ) {
+                        this.render();
+                }
+
+                // Initialize the Focus Manager.
+                this.focusManager = new wp.media.view.FocusManager( {
+                        el:   this.el,
+                        mode: 'tabsNavigation'
+                } );
+
+                // The menu is always rendered and can be visible or hidden on some frames.
+                this.isVisible = true;
         },
-        */
 
         /**
          * @param {Object} options
@@ -47 +62 @@
                  */
                 PriorityList.prototype.ready.apply( this, arguments );
                 this.visibility();
+
+                // Set up aria tabs initial attributes.
+                this.focusManager.setupAriaTabs();
         },
 
         set: function() {
@@ -72 +90 @@
                         hide = ! views || views.length < 2;
 
                 if ( this === view ) {
+                        // Flag this menu as hidden or visible.
+                        this.isVisible = ! hide;
+                        // Set or remove a CSS class to hide the menu.
                         this.controller.$el.toggleClass( 'hide-' + region, hide );
                 }
         },
@@ -87 +108 @@
 
                 this.deselect();
                 view.$el.addClass('active');
+
+                // Set up again the aria tabs initial attributes after the menu updates.
+                this.focusManager.setupAriaTabs();
         },
 
         deselect: function() {

src/js/media/views/router.js

@@ -20 +20 @@
         ItemView:  wp.media.view.RouterItem,
         region:    'router',
 
+        attributes: {
+                role:               'tablist',
+                'aria-orientation': 'horizontal'
+        },
+
         initialize: function() {
                 this.controller.on( 'content:render', this.update, this );
                 // Call 'initialize' directly on the parent class.

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

@@ -553 +553 @@
         user-select: none;
 }
 
-.media-menu > a {
+.media-menu .media-menu-item {
         display: block;
+        box-sizing: border-box;
+        width: 100%;
         position: relative;
+        border: 0;
+        margin: 0;
         padding: 8px 20px;
-        margin: 0;
+        font-size: 14px;
         line-height: 1.28571428;
-        font-size: 14px;
+        background: transparent;
         color: #0073aa;
+        text-align: left;
         text-decoration: none;
+        cursor: pointer;
 }
 
-.media-menu > a:hover {
-        color: #0073aa;
+.media-menu .media-menu-item:hover {
         background: rgba(0, 0, 0, 0.04);
 }
 
-.media-menu > a:active {
+.media-menu .media-menu-item:active {
+        color: #0073aa;
         outline: none;
 }
 
@@ -579 +585 @@
         font-weight: 600;
 }
 
+.media-menu .media-menu-item:focus {
+        box-shadow:
+                0 0 0 1px #5b9dd9,
+                0 0 2px 1px rgba(30, 140, 190, 0.8);
+        color: #124964;
+        /* Only visible in Windows High Contrast mode */
+        outline: 1px solid transparent;
+}
+
 .media-menu .separator {
         height: 0;
         margin: 12px 20px;
@@ -594 +609 @@
         padding: 0 6px;
         margin: 0;
         clear: both;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
 }
 
-.media-router a {
-        transition: none;
-}
-
-.media-router > a {
+.media-router .media-menu-item {
         position: relative;
         float: left;
+        border: 0;
+        margin: 0;
         padding: 8px 10px 9px;
-        margin: 0;
         height: 18px;
         line-height: 1.28571428;
         font-size: 14px;
         text-decoration: none;
+        background: transparent;
+        cursor: pointer;
+        transition: none;
 }
 
-.media-router > a:last-child {
+.media-router .media-menu-item:last-child {
         border-right: 0;
 }
 
-.media-router > a:active {
-        outline: none;
+.media-router .media-menu-item:hover,
+.media-router .media-menu-item:active {
+        color: #0073aa;
 }
 
 .media-router .active,
 .media-router .active:hover {
-        color: #32373c;
+        color: #23282d;
 }
 
+.media-router .media-menu-item:focus {
+        box-shadow:
+                0 0 0 1px #5b9dd9,
+                0 0 2px 1px rgba(30, 140, 190, 0.8);
+        color: #124964;
+        /* Only visible in Windows High Contrast mode */
+        outline: 1px solid transparent;
+}
+
 .media-router .active,
-.media-router > a.active:last-child {
+.media-router .media-menu-item.active:last-child {
         margin: -1px -1px 0;
         background: #fff;
         border: 1px solid #ddd;
@@ -730 +751 @@
         box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.1);
 }
 
-.media-frame-title .dashicons {
-        display: none;
-}
-
 .media-frame-title h1 {
         padding: 0 16px;
         font-size: 22px;
@@ -741 +758 @@
         margin: 0;
 }
 
+.wp-core-ui .button.media-frame-menu-toggle {
+        display: none;
+}
+
 .media-frame-title .suggested-dimensions {
         font-size: 14px;
         float: right;
@@ -2220 +2241 @@
 @media only screen and (max-width: 900px) {
 
         /* Drop-down menu */
-        .media-frame:not(.hide-menu) .media-frame-title,
+        .media-frame:not(.hide-menu) .media-frame-title {
+                position: static;
+                display: inline-block;
+        }
+
         .media-frame:not(.hide-menu) .media-frame-router,
         .media-frame:not(.hide-menu) .media-frame-content,
         .media-frame:not(.hide-menu) .media-frame-toolbar {
@@ -2233 +2258 @@
         }
 
         .media-frame:not(.hide-menu) .media-menu {
+                display: none;
                 width: auto;
                 max-width: 80%;
                 overflow: auto;
                 z-index: 2000;
                 top: 50px;
-                left: -300px;
+                left: 0;
                 right: auto;
                 bottom: auto;
                 padding: 5px 0;
@@ -2246 +2272 @@
         }
 
         .media-frame:not(.hide-menu) .media-menu.visible {
-                left: 0;
+                display: block;
         }
 
         .media-frame:not(.hide-menu) .media-menu > a {
@@ -2254 +2280 @@
                 font-size: 16px;
         }
 
-        .media-frame:not(.hide-menu) .media-menu > a.active {
-                display: none;
-        }
-
         .media-frame:not(.hide-menu) .media-menu .separator {
                 margin: 5px 10px;
         }
 
-        .media-frame:not(.hide-menu) .media-frame-title {
-                left: 0;
+        .media-frame:not(.hide-menu) .media-frame-title h1 {
+                line-height: 3;
+                font-size: 18px;
+                padding-left: 0;
         }
 
-        .media-frame:not(.hide-menu) .media-frame-title .dashicons {
-                display: inline-block;
-                line-height: 2.5;
+        .wp-core-ui .media-frame:not(.hide-menu) .button.media-frame-menu-toggle {
+                display: inline-flex;
+                align-items: center;
+                vertical-align: top;
+                min-height: 38px;
+                margin: 6px;
+                padding: 0 2px 0 12px;
+                font-size: 1rem;
+                text-decoration: none;
         }
 
-        .media-frame:not(.hide-menu) .media-frame-title h1 {
-                color: #0073aa;
-                line-height: 3;
-                font-size: 18px;
-                float: left;
-                cursor: pointer;
+        .wp-core-ui .button.media-frame-menu-toggle:active {
+                background: transparent;
+                box-shadow: none;
+                transform: none;
         }
         /* End drop-down menu */
 
@@ -2570 +2598 @@
                 height: 40px;
         }
 
+        .wp-core-ui .media-frame:not(.hide-menu) .button.media-frame-menu-toggle {
+                min-height: 28px;
+        }
+
         .wp-core-ui.wp-customizer .media-button {
                 margin-top: 13px;
         }
@@ -2580 +2612 @@
                 line-height: 2.22222222;
         }
 
-        .media-frame:not(.hide-menu) .media-frame-title .dashicons {
-                line-height: 2;
-        }
-
         .media-frame-router,
         .media-frame:not(.hide-menu) .media-menu {
                 top: 40px;

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">
+                <button type="button" class="button button-link media-frame-menu-toggle" aria-expanded="false">
+                        <?php _e( 'Menu' ); ?>
+                        <span class="dashicons dashicons-arrow-down" aria-hidden="true"></span>
+                </button>
                 <div class="media-frame-title" id="media-frame-title"></div>
                 <div class="media-frame-menu"></div>
-                <div class="media-frame-router"></div>
-                <div class="media-frame-content"></div>
+                <div class="media-frame-tab-panel">
+                        <div class="media-frame-router"></div>
+                        <div class="media-frame-content"></div>
+                </div>
                 <div class="media-frame-toolbar"></div>
                 <div class="media-frame-uploader"></div>
         </script>