Ticket #22502: 22502.2.diff

wp-includes/js/media-editor.js

@@ -533 +533 @@
                                 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

@@ -550 +550 @@
                         this.frame.content.on( 'activate:browse', this.gallerySettings, this );
 
                         media.controller.Library.prototype.activate.apply( this, arguments );
+                        
+                        // Make sure focus stays on modal
+                        $( '.media-menu .active' ).focus();
                 },
 
                 deactivate: function() {
@@ -1491 +1494 @@
                                                 text:     l10n.cancelGalleryTitle,
                                                 priority: 20,
                                                 click:    function() {
-                                                        if ( previous )
+                                                        if ( previous ) {
                                                                 frame.state( previous );
-                                                        else
+                                                                $( '.media-menu .active' ).focus();
+                                                        } else {
                                                                 frame.close();
+                                                        }
                                                 }
                                         },
                                         separateCancel: new media.View({
@@ -1649 +1654 @@
                 template: media.template('media-modal'),
 
                 events: {
-                        'click .media-modal-backdrop, .media-modal-close' : 'closeHandler'
+                        'click .media-modal-backdrop, .media-modal-close' : 'closeHandler',
+                        'keyup' : 'keyboard'
                 },
 
                 initialize: function() {
@@ -1715 +1721 @@
                         // Set and render the content.
                         this.options.$content = ( $content instanceof Backbone.View ) ? $content.$el : $content;
                         return this.render();
+                },
+
+                keyboard: function( event ) {
+
+                        if ( 27 !== event.which ) // Esc
+                                return;
+
+                        this.close();
+
+                        event.preventDefault();
                 }
         });
 
@@ -2376 +2392 @@
                 className: 'media-menu-item',
 
                 events: {
-                        'click': 'click'
+                        'click': 'click',
+                        'keyup': 'keyboard'
                 },
 
                 click: function() {
@@ -2388 +2405 @@
                                 this.controller.state( options.state );
                 },
 
+                keyboard: function( event ) {
+                        if ( 13 !== event.which ) // Enter
+                                return;
+
+                        this.click();
+
+                        event.preventDefault();
+                },
+
                 render: function() {
+                        
+                        this.$el.attr('tabIndex', '0');
+                        
                         var options = this.options;
 
                         if ( options.text )
@@ -2417 +2446 @@
 
                 events: {
                         'click .attachment-preview':      'toggleSelection',
+                        'keyup .attachment-preview':      'toggleSelection',
                         'change [data-setting]':          'updateSetting',
                         'change [data-setting] input':    'updateSetting',
                         'change [data-setting] select':   'updateSetting',
@@ -2494 +2524 @@
                 },
 
                 toggleSelection: function( event ) {
+                        
+                        if ( event.type === 'keyup' && 13 !== event.which ) // Enter 
+                                return;
+                        
                         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="#"><span>&#10003;</span><span class="dash">&ndash;</span></a>
+                                <a class="check" href="#" tabindex="-1"><span>&#10003;</span><span class="dash">&ndash;</span></a>
                         <# } #>
                 </div>
                 <# if ( data.describe ) { #>

wp-includes/css/media-views.css

@@ -386 +386 @@
         cursor: pointer;
 }
 
-.media-menu li:hover {
+.media-menu li:hover,
+.media-menu li:focus {
         background: rgba( 0, 0, 0, 0.04 );
+        outline: none;
 }
 
 .media-menu .active,
@@ -523 +525 @@
         cursor: pointer;
 }
 
+.attachment-preview:focus {
+        outline: thin dotted;
+}
+
 .attachment .icon {
         margin: 0 auto;
         overflow: hidden;