Ticket #23560: 23560.9.2.diff

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

@@ -478 +478 @@
         border-right: 0;
 }
 
-.media-router > a:active,
-.media-router > a:focus {
+.media-router > a:active {
         outline: none;
 }
 
@@ -674 +673 @@
         user-select:         none;
 }
 
+.attachment:focus {
+        box-shadow: 0px 0px 2pt 2pt #1e8cbe;
+        outline: none;
+}
+
 .selected.attachment {
         box-shadow:
                 0 0 0 1px #fff,
@@ -890 +894 @@
         right: 300px;
         bottom: 0;
         overflow: auto;
+        outline: none;
 }
 
 .attachments-browser .instructions {

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

@@ -1839 +1839 @@
                                                 } else {
                                                         frame.close();
                                                 }
+
+                                                // Keep focus inside media modal
+                                                // after canceling a gallery
+                                                new media.view.FocusManager({
+                                                        el: this.el
+                                                }).focus();
                                         }
                                 },
                                 separateCancel: new media.View({
@@ -1962 +1968 @@
                                         }) );
 
                                         this.controller.setState('gallery-edit');
+
+                                        // Keep focus inside media modal
+                                        // after jumping to gallery view
+                                        new media.view.FocusManager({
+                                                el: this.el
+                                        }).focus();
                                 }
                         });
-                },
-
-                featuredImageToolbar: function( toolbar ) {
                         this.createSelectToolbar( toolbar, {
                                 text:  l10n.setFeaturedImage,
                                 state: this.options.state
@@ -2214 +2223 @@
                                 propagate: true,
                                 freeze:    true
                         });
+                        
+                        this.focusManager = new media.view.FocusManager({
+                                el: this.el
+                        });
                 },
                 /**
                  * @returns {Object}
@@ -2295 +2308 @@
                                 return this;
                         }
 
-                        this.$el.hide();
+                        // Hide modal and remove restricted media modal tab focus once it's closed
+                        this.$el.hide().undelegate( 'keydown' );
+
+                        // Put focus back in useful location once modal is closed
+                        $('#wpbody-content').focus();
+
                         this.propagate('close');
-
-                        // If the `freeze` option is set, restore the container's scroll position.
                         if ( freeze ) {
                                 $( window ).scrollTop( freeze.scrollTop );
                         }
@@ -2356 +2372 @@
                         if ( 27 === event.which && this.$el.is(':visible') ) {
                                 this.escape();
                                 event.stopImmediatePropagation();
+                        } else {
+                                // Keep focus inside the media modal
+                                this.focusManager;
                         }
                 }
         });
@@ -2375 +2394 @@
                 },
 
                 focus: function() {
-                        if ( _.isUndefined( this.index ) ) {
-                                return;
-                        }
-
-                        // Update our collection of `$tabbables`.
-                        this.$tabbables = this.$(':tabbable');
-
-                        // If tab is saved, focus it.
-                        this.$tabbables.eq( this.index ).focus();
+                        // Reset focus on first left menu item
+                        $('.media-menu-item').first().focus();
                 },
                 /**
                  * @param {Object} event
@@ -2393 +2405 @@
                         if ( 9 !== event.keyCode ) {
                                 return;
                         }
-
-                        // First try to update the index.
-                        if ( _.isUndefined( this.index ) ) {
-                                this.updateIndex( event );
+                        
+                        // Keep tab focus within media modal while it's open
+                        if ( event.target === this.tabbablesLast[0] && !event.shiftKey ) {
+                                this.tabbableFirst.focus();
+                                return false;
+                        } else if ( event.target === this.tabbableFirst[0] && event.shiftKey ) {
+                                this.tabbablesLast.focus();
+                                return false;
                         }
-
-                        // If we still don't have an index, bail.
-                        if ( _.isUndefined( this.index ) ) {
-                                return;
-                        }
-
-                        var index = this.index + ( event.shiftKey ? -1 : 1 );
-
-                        if ( index >= 0 && index < this.$tabbables.length ) {
-                                this.index = index;
-                        } else {
-                                delete this.index;
-                        }
                 },
                 /**
                  * @param {Object} event
                  */
                 updateIndex: function( event ) {
-                        this.$tabbables = this.$(':tabbable');
-
-                        var index = this.$tabbables.index( event.target );
-
-                        if ( -1 === index ) {
-                                delete this.index;
-                        } else {
-                                this.index = index;
-                        }
+                        // Resets tabbable elements
+                        this.tabbables = $( ':tabbable', this.$el );
+                        this.tabbableFirst = this.tabbables.filter( ':first' );
+                        this.tabbablesLast  = this.tabbables.filter( ':last' );
                 }
         });
 
@@ -3425 +3423 @@
                 className: 'attachment',
                 template:  media.template('attachment'),
 
+                attributes: {
+                        tabIndex: 0,
+                        role: 'checkbox'
+                },
+
                 events: {
                         'click .attachment-preview':      'toggleSelectionHandler',
                         'change [data-setting]':          'updateSetting',
@@ -3433 +3436 @@
                         'change [data-setting] textarea': 'updateSetting',
                         'click .close':                   'removeFromLibrary',
                         'click .check':                   'removeFromSelection',
-                        'click a':                        'preventDefault'
+                        'click a':                        'preventDefault',
+                        'keydown':                                                'toggleSelectionHandler'
                 },
 
                 buttons: {},
@@ -3441 +3445 @@
                 initialize: function() {
                         var selection = this.options.selection;
 
+                        this.$el.attr('aria-label', this.model.attributes.title).attr('aria-checked', false);
                         this.model.on( 'change:sizes change:uploading', this.render, this );
                         this.model.on( 'change:title', this._syncTitle, this );
                         this.model.on( 'change:caption', this._syncCaption, this );
@@ -3545 +3550 @@
                 toggleSelectionHandler: function( event ) {
                         var method;
 
+                        // Catch enter and space events
+                        if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) {
+                                return;
+                        }
                         if ( event.shiftKey ) {
                                 method = 'between';
                         } else if ( event.ctrlKey || event.metaKey ) {
@@ -3599 +3608 @@
                                 return;
                         }
 
+                        // Fixes bug that loses focus when selecting a featured image
+                        if ( !method ) {
+                                method = 'add';
+                        }
                         if ( method !== 'add' ) {
                                 method = 'reset';
                         }
@@ -3642 +3655 @@
                                 return;
                         }
 
-                        this.$el.addClass('selected');
+                        this.$el.addClass('selected').attr('aria-checked', true);
                 },
                 /**
                  * @param {Backbone.Model} model
@@ -3657 +3670 @@
                         if ( ! selection || ( collection && collection !== selection ) ) {
                                 return;
                         }
-                        this.$el.removeClass('selected');
+                        this.$el.removeClass('selected').attr('aria-checked', false);
                 },
                 /**
                  * @param {Backbone.Model} model
@@ -3890 +3903 @@
                 tagName:   'ul',
                 className: 'attachments',
 
+                attributes: {
+                        tabIndex: -1
+                },
+
                 cssTemplate: media.template('attachments-css'),
 
                 events: {
@@ -4576 +4593 @@
                 clear: function( event ) {
                         event.preventDefault();
                         this.collection.reset();
+
+                        // Keep focus inside media modal
+                        // after clear link is selected
+                        new media.view.FocusManager({
+                                el: this.el
+                        }).focus();
                 }
         });
 
@@ -4886 +4909 @@
 
                 initialize: function() {
                         /**
-                         * @member {wp.media.view.FocusManager}
-                         */
-                        this.focusManager = new media.view.FocusManager({
-                                el: this.el
-                        });
-                        /**
                          * call 'initialize' directly on the parent class
                          */
                         media.view.Attachment.prototype.initialize.apply( this, arguments );
@@ -4904 +4921 @@
                          * call 'render' directly on the parent class
                          */
                         media.view.Attachment.prototype.render.apply( this, arguments );
-                        this.focusManager.focus();
                         return this;
                 },
                 /**
@@ -4915 +4931 @@
 
                         if ( confirm( l10n.warnDelete ) ) {
                                 this.model.destroy();
+                                // Keep focus inside media modal
+                                // after image is deleted
+                                new media.view.FocusManager({
+                                        el: this.el
+                                }).focus();
                         }
                 },
 
@@ -4951 +4972 @@
                 },
 
                 initialize: function() {
-                        /**
-                         * @member {wp.media.view.FocusManager}
-                         */
-                        this.focusManager = new media.view.FocusManager({
-                                el: this.el
-                        });
-
                         this.model.on( 'change:compat', this.render, this );
                 },
                 /**
@@ -4984 +4998 @@
                         this.views.detach();
                         this.$el.html( compat.item );
                         this.views.render();
-
-                        this.focusManager.focus();
                         return this;
                 },
                 /**

src/wp-includes/media-template.php

@@ -18 +18 @@
         if ( $is_IE && strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 7') !== false )
                 $class .= ' ie7';
         ?>
+        <!--[if lte IE 8]>
+        <style>
+                .attachment:focus {
+                        outline: #1e8cbe solid;
+                }
+                .selected.attachment {
+                        outline: #1e8cbe solid;
+                }
+        </style>
+        <![endif]-->
         <script type="text/html" id="tmpl-media-frame">
                 <div class="media-frame-menu"></div>
                 <div class="media-frame-title"></div>
@@ -142 +152 @@
                         <# } else if ( 'image' === data.type ) { #>
                                 <div class="thumbnail">
                                         <div class="centered">
-                                                <img src="{{ data.size.url }}" draggable="false" />
+                                                <img src="{{ data.size.url }}" draggable="false" alt="" />
                                         </div>
                                 </div>
                         <# } else { #>
@@ -157 +167 @@
                         <# } #>
 
                         <# 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>
                 <#