Changeset 28607

Timestamp:

05/29/2014 03:38:31 AM (10 years ago)

Author:

helen

Message:

At long last, improved keyboard accessibility for the media modal.

props lessbloat, grahamarmfield, sharonaustin, bramd.
see #23560.

Location:

trunk/src/wp-includes

Files:

• css/media-views.css (modified) (3 diffs)
• js/media-views.js (modified) (24 diffs)
• media-template.php (modified) (3 diffs)

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

@@ -479 +479 @@
 }
 
-.media-router > a:active,
-.media-router > a:focus {
+.media-router > a:active {
     outline: none;
 }
@@ -695 +694 @@
     -ms-user-select: none;
     user-select: none;
+}
+
+.attachment:focus {
+    -webkit-box-shadow:
+        0 0 0 1px #5b9dd9,
+        0 0 2px 2px #5b9dd9;
+    box-shadow:
+        0 0 0 1px #5b9dd9,
+        0 0 2px 2px #5b9dd9;
+    outline: none;
 }
 
@@ -926 +935 @@
     bottom: 0;
     overflow: auto;
+    outline: none;
 }
 

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

@@ -2314 +2314 @@
                             frame.close();
                         }
+
+                        // Keep focus inside media modal
+                        // after canceling a gallery
+                        new media.view.FocusManager({
+                            el: this.el
+                        }).focus();
                     }
                 },
@@ -2496 +2502 @@
 
                     this.controller.setState('gallery-edit');
+
+                    // Keep focus inside media modal
+                    // after jumping to gallery view
+                    new media.view.FocusManager({
+                        el: this.el
+                    }).focus();
                 }
             });
@@ -2522 +2534 @@
 
                     this.controller.setState('playlist-edit');
+
+                    // Keep focus inside media modal
+                    // after jumping to playlist view
+                    new media.view.FocusManager({
+                        el: this.el
+                    }).focus();
                 }
             });
@@ -2548 +2566 @@
 
                     this.controller.setState('video-playlist-edit');
+
+                    // Keep focus inside media modal
+                    // after jumping to video playlist view
+                    new media.view.FocusManager({
+                        el: this.el
+                    }).focus();
                 }
             });
@@ -2957 +2981 @@
                 freeze:    true
             });
+
+            this.focusManager = new media.view.FocusManager({
+                el: this.el
+            });
         },
         /**
@@ -3038 +3066 @@
             }
 
-            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');
 
@@ -3099 +3132 @@
                 this.escape();
                 event.stopImmediatePropagation();
+            } else {
+                // Keep focus inside the media modal
+                this.focusManager;
             }
         }
@@ -3118 +3154 @@
 
         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();
         },
         /**
@@ -3137 +3166 @@
             }
 
-            // First try to update the index.
-            if ( _.isUndefined( this.index ) ) {
-                this.updateIndex( event );
-            }
-
-            // 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;
+            // Keep tab focus within media modal while it's open
+            if ( event.target === this.tabbableLast[0] && !event.shiftKey ) {
+                this.tabbableFirst.focus();
+                return false;
+            } else if ( event.target === this.tabbableFirst[0] && event.shiftKey ) {
+                this.tabbableLast.focus();
+                return false;
             }
         },
@@ -3159 +3179 @@
          */
         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.tabbableLast = this.tabbables.filter( ':last' );
         }
     });
@@ -4398 +4413 @@
         template:  media.template('attachment'),
 
+        attributes: {
+            tabIndex: 0,
+            role: 'checkbox'
+        },
+
         events: {
             'click .attachment-preview':      'toggleSelectionHandler',
@@ -4406 +4426 @@
             'click .close':                   'removeFromLibrary',
             'click .check':                   'removeFromSelection',
-            'click a':                        'preventDefault'
+            'click a':                        'preventDefault',
+            'keydown':                        'toggleSelectionHandler'
         },
 
@@ -4414 +4435 @@
             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 );
@@ -4518 +4540 @@
             var method;
 
+            // Catch enter and space events
+            if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) {
+                return;
+            }
             if ( event.shiftKey ) {
                 method = 'between';
@@ -4574 +4600 @@
             }
 
+            // Fixes bug that loses focus when selecting a featured image
+            if ( !method ) {
+                method = 'add';
+            }
             if ( method !== 'add' ) {
                 method = 'reset';
@@ -4618 +4648 @@
             }
 
-            this.$el.addClass('selected');
+            this.$el.addClass('selected').attr('aria-checked', true);
         },
         /**
@@ -4633 +4663 @@
                 return;
             }
-            this.$el.removeClass('selected');
+            this.$el.removeClass('selected').attr('aria-checked', false);
         },
         /**
@@ -4865 +4895 @@
         tagName:   'ul',
         className: 'attachments',
+
+        attributes: {
+            tabIndex: -1
+        },
 
         cssTemplate: media.template('attachments-css'),
@@ -5580 +5614 @@
             event.preventDefault();
             this.collection.reset();
+
+            // Keep focus inside media modal
+            // after clear link is selected
+            new media.view.FocusManager({
+                el: this.el
+            }).focus();
         }
     });
@@ -5905 +5945 @@
         initialize: function() {
             /**
-             * @member {wp.media.view.FocusManager}
-             */
-            this.focusManager = new media.view.FocusManager({
-                el: this.el
-            });
-            /**
              * call 'initialize' directly on the parent class
              */
@@ -5923 +5957 @@
              */
             media.view.Attachment.prototype.render.apply( this, arguments );
-            this.focusManager.focus();
             return this;
         },
@@ -5934 +5967 @@
             if ( confirm( l10n.warnDelete ) ) {
                 this.model.destroy();
+                // Keep focus inside media modal
+                // after image is deleted
+                new media.view.FocusManager({
+                    el: this.el
+                }).focus();
             }
         },
@@ -5989 +6027 @@
 
         initialize: function() {
-            /**
-             * @member {wp.media.view.FocusManager}
-             */
-            this.focusManager = new media.view.FocusManager({
-                el: this.el
-            });
-
             this.model.on( 'change:compat', this.render, this );
         },
@@ -6022 +6053 @@
             this.$el.html( compat.item );
             this.views.render();
-
-            this.focusManager.focus();
             return this;
         },

trunk/src/wp-includes/media-template.php

@@ -120 +120 @@
         $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>
@@ -239 +249 @@
                 <div class="thumbnail">
                     <div class="centered">
-                        <img src="{{ data.size.url }}" draggable="false" />
+                        <img src="{{ data.size.url }}" draggable="false" alt="" />
                     </div>
                 </div>
@@ -254 +264 @@
 
             <# if ( data.buttons.check ) { #>
-                <a class="check" href="#" title="<?php esc_attr_e('Deselect'); ?>"><div class="media-modal-icon"></div></a>
+                <a class="check" href="#" title="<?php esc_attr_e('Deselect'); ?>" tabindex="-1"><div class="media-modal-icon"></div></a>
             <# } #>
         </div>