Ticket #23560: 23560.4.diff

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

@@ -431 +431 @@
         border-right: 0;
 }
 
-.media-router > a:active,
-.media-router > a:focus {
+.media-router > a:active {
         outline: none;
 }
 
@@ -635 +634 @@
         user-select:         none;
 }
 
+.attachment:focus {
+        box-shadow: 0px 0px 2pt 2pt #1e8cbe;
+        outline: none;
+}
+
+.isIE .attachment:focus {
+        outline: #1e8cbe solid;
+}
+
 .selected.attachment {
         box-shadow:
                 0 0 0 1px #fff,
                 0 0 0 3px #ccc;
 }
 
+.isIE .attachment.selected {
+        outline: #1e8cbe solid;
+}
+
 .details.attachment {
         box-shadow:
                 0 0 0 1px #fff,
@@ -864 +876 @@
         right: 300px;
         bottom: 0;
         overflow: auto;
+        outline: none;
 }
 
 .attachments-browser .instructions {

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

@@ -1638 +1638 @@
                         if ( ! this.views.attached || ! this.$el.is(':visible') )
                                 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.
@@ -1684 +1689 @@
                                 this.escape();
                                 return;
                         }
+
+                        // Keep tab focus within media modal while it's open
+                        if ( $.ui.keyCode.TAB !== event.keyCode )
+                                return;
+
+                        var tabbables = $( ':tabbable', this.$el ),
+                                first = tabbables.filter( ':first' ),
+                                last  = tabbables.filter( ':last' );
+
+                        if ( event.target === last[0] && !event.shiftKey ) {
+                                first.focus();
+                                return false;
+                        } else if ( event.target === first[0] && event.shiftKey ) {
+                                last.focus();
+                                return false;
+                        }
                 }
         });
 
@@ -2497 +2518 @@
                 className: 'attachment',
                 template:  media.template('attachment'),
 
+                attributes: {
+                        tabIndex: 0,
+                        role: 'checkbox'
+                },
+
                 events: {
                         'click .attachment-preview':      'toggleSelectionHandler',
                         'change [data-setting]':          'updateSetting',
@@ -2505 +2531 @@
                         'change [data-setting] textarea': 'updateSetting',
                         'click .close':                   'removeFromLibrary',
                         'click .check':                   'removeFromSelection',
-                        'click a':                        'preventDefault'
+                        'click a':                        'preventDefault',
+                        'keydown':                                                'toggleSelectionHandler'
                 },
 
                 buttons: {},
@@ -2513 +2540 @@
                 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 );
@@ -2603 +2632 @@
                 toggleSelectionHandler: function( event ) {
                         var method;
 
+                        if ( 'keydown' === event.type && $.ui.keyCode.ENTER !== event.keyCode && $.ui.keyCode.SPACE !== event.keyCode )
+                                return;
+
                         if ( event.shiftKey )
                                 method = 'between';
                         else if ( event.ctrlKey || event.metaKey )
@@ -2686 +2718 @@
                         if ( ! selection || ( collection && collection !== selection ) )
                                 return;
 
-                        this.$el.addClass('selected');
+                        this.$el.addClass('selected').attr('aria-checked', true);
                 },
 
                 deselect: function( model, collection ) {
@@ -2698 +2730 @@
                         if ( ! selection || ( collection && collection !== selection ) )
                                 return;
 
-                        this.$el.removeClass('selected');
+                        this.$el.removeClass('selected').attr('aria-checked', false);
                 },
 
                 details: function( model, collection ) {
@@ -2880 +2912 @@
                 tagName:   'ul',
                 className: 'attachments',
 
+                attributes: {
+                        tabIndex: -1
+                },
+
                 cssTemplate: media.template('attachments-css'),
 
                 events: {

src/wp-includes/media-template.php

@@ -15 +15 @@
 function wp_print_media_templates() {
         global $is_IE;
         $class = 'media-modal wp-core-ui';
+        if ( $is_IE )
+                $class .= ' isIE';
         if ( $is_IE && strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 7') !== false )
                 $class .= ' ie7';
         ?>
@@ -134 +136 @@
                         <# } 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 { #>
@@ -149 +151 @@
                         <# } #>
 
                         <# 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>
                 <#