Ticket #22502: 22502.5.diff

wp-includes/css/media-views.css

@@ -366 +366 @@
         user-select: none;
 }
 
-.media-menu li {
+.media-menu .media-menu-item {
+        display: block;
         position: relative;
         padding: 4px 20px;
         margin: 0;
         line-height: 18px;
         font-size: 14px;
-        color: #21759B;
         text-shadow: 0 1px 0 #fff;
+        text-decoration: none;
 }
 
-.media-menu-item {
-        cursor: pointer;
-}
-
-.media-menu li:hover {
+.media-menu .media-menu-item:hover,
+.media-menu .media-menu-item:focus {
+        color: #21759B;
+        background: #f1f1f1;
         background: rgba( 0, 0, 0, 0.04 );
+        outline: none;
 }
 
-.media-menu .active,
-.media-menu .active:hover {
+.media-menu .media-menu-item.active,
+.media-menu .media-menu-item.active:hover {
         color: #333;
         font-weight: bold;
 }
@@ -517 +518 @@
         cursor: pointer;
 }
 
+.attachment-preview:focus {
+        outline: thin dotted;
+}
+
 .attachment .icon {
         margin: 0 auto;
         overflow: hidden;
@@ -1359 +1364 @@
                 width: 119px;
         }
 
-        .media-menu li {
+        .media-menu .media-menu-item {
                 padding: 4px 10px;
         }
 

wp-includes/js/media-editor.js

@@ -548 +548 @@
                                 workflow.open();
                         else
                                 workflow = wp.media.editor.add( id );
-
+                        
+                        // Add focus to modal
+                        $( '.media-menu .active' ).focus();
+                        
                         return workflow;
                 }
         };

wp-includes/js/media-views.js

@@ -1647 +1647 @@
                 tagName:  'div',
                 template: media.template('media-modal'),
 
+                attributes: {
+                        tabindex: 0
+                },
+
                 events: {
-                        'click .media-modal-backdrop, .media-modal-close' : 'closeHandler'
+                        'click .media-modal-backdrop, .media-modal-close': 'closeHandler',
+                        'keydown': 'keydown'
                 },
 
                 initialize: function() {
@@ -1659 +1664 @@
                                 title:     '',
                                 propagate: true
                         });
+
+                        _.bindAll( this, '_captureBodyKeydown' );
                 },
 
                 render: function() {
@@ -1689 +1696 @@
                 },
 
                 open: function() {
+                        document.addEventListener( 'keydown', this._captureBodyKeydown, true );
                         this.$el.show();
                         return this.propagate('open');
                 },
 
                 close: function() {
+                        document.removeEventListener( 'keydown', this._captureBodyKeydown, true );
                         this.$el.hide();
                         return this.propagate('close');
                 },
@@ -1722 +1731 @@
                                 this.controller.trigger( id );
 
                         return this;
+                },
+
+                // Thanks to jQuery UI dialog, which also limits tabbing to a modal
+                // window. The `:tabbable` expression, `$.ui.keyCode` object, and
+                // the overloaded `$.fn.focus( delay )` signature are all from the
+                // jQuery UI core.
+                keydown: function( event ) {
+                        var tabbables, first, last;
+
+                        // Close the modal when escape is pressed.
+                        if ( $.ui.keyCode.ESCAPE === event.which ) {
+                                event.preventDefault();
+                                this.close();
+                                return;
+                        }
+
+                        // Prevent tabbing outside of the modal.
+                        if ( event.keyCode !== $.ui.keyCode.TAB )
+                                return;
+
+                        tabbables = this.$(':tabbable');
+                        first     = tabbables.filter(':first');
+                        last      = tabbables.filter(':last');
+
+                        // If we attempt to tab past the last tabbable element, skip
+                        // straight to the first tabbable element (and vice versa).
+                        if ( event.target === last[0] && ! event.shiftKey ) {
+                                first.focus( 1 );
+                                return false;
+                        } else if ( event.target === first[0] && event.shiftKey ) {
+                                last.focus( 1 );
+                                return false;
+                        }
+                },
+
+                // If the focus somehow escapes the modal, restores focus to the
+                // first focusable element inside the modal.
+                //
+                // Captures the document's keydown event when the modal is open.
+                _captureBodyKeydown: function() {
+                        if ( event.keyCode !== $.ui.keyCode.TAB )
+                                return;
+
+                        if ( ! $.contains( this.el, document.activeElement ) )
+                                this.$(':tabbable').first().focus( 1 );
                 }
         });
 
@@ -2354 +2408 @@
          * wp.media.view.Menu
          */
         media.view.Menu = media.view.PriorityList.extend({
-                tagName:   'ul',
                 className: 'media-menu',
 
                 toView: function( options, state ) {
@@ -2379 +2432 @@
         });
 
         media.view.MenuItem = media.View.extend({
-                tagName:   'li',
+                tagName:   'a',
                 className: 'media-menu-item',
 
+                attributes: {
+                        href: '#'
+                },
+
                 events: {
                         'click': 'click'
                 },
 
-                click: function() {
+                click: function( event ) {
                         var options = this.options;
 
+                        event.preventDefault();
+
                         if ( options.click )
                                 options.click.call( this );
                         else if ( options.state )
@@ -2424 +2483 @@
 
                 events: {
                         'click .attachment-preview':      'toggleSelection',
+                        'keydown .attachment-preview':    'keydown',
                         'change [data-setting]':          'updateSetting',
                         'change [data-setting] input':    'updateSetting',
                         'change [data-setting] select':   'updateSetting',
@@ -2500 +2560 @@
                                 this.$bar.width( this.model.get('percent') + '%' );
                 },
 
-                toggleSelection: function( event ) {
+                keydown: function( event ) {
+                        if ( $.ui.keyCode.ENTER === event.keyCode )
+                                this.toggleSelection();
+                },
+
+                toggleSelection: function() {
                         var selection = this.options.selection,
                                 model = this.model;
 

wp-includes/media.php

@@ -1603 +1603 @@
         </script>
 
         <script type="text/html" id="tmpl-attachment">
-                <div class="attachment-preview type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
+                <div class="attachment-preview type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}" tabindex="0">
                         <# if ( data.uploading ) { #>
                                 <div class="media-progress-bar"><div></div></div>
                         <# } else if ( 'image' === data.type ) { #>
@@ -1624 +1624 @@
                         <# } #>
 
                         <# if ( data.buttons.check ) { #>
-                                <a class="check" href="#" title="<?php _e('Deselect'); ?>"><div class="media-modal-icon"></div></a>
+                                <a class="check" href="#" title="<?php _e('Deselect'); ?>" tabindex="-1"><div class="media-modal-icon"></div></a>
                         <# } #>
                 </div>
                 <# if ( data.describe ) { #>