Changeset 45524

Timestamp:

06/12/2019 09:02:03 PM (6 years ago)

Author:

afercia

Message:

Accessibility: Improve focus management in the Media Views.

• keeps focus management only where necessary to avoid focus losses
• removes focus management where a specific user workflow was assumed
• makes the "Attachment Details" navigation buttons really disabled when there are no next or previous attachments
• adds inline comments to clarify all the usages of focus()

Fixes #43169.

Location:

trunk/src

Files:

• js/media/views/attachment/details.js (modified) (7 diffs)
• js/media/views/attachments.js (modified) (2 diffs)
• js/media/views/attachments/browser.js (modified) (1 diff)
• js/media/views/edit-image.js (modified) (1 diff)
• js/media/views/embed/url.js (modified) (1 diff)
• js/media/views/focus-manager.js (modified) (2 diffs)
• js/media/views/frame/edit-attachments.js (modified) (4 diffs)
• js/media/views/frame/post.js (modified) (10 diffs)
• js/media/views/image-details.js (modified) (2 diffs)
• js/media/views/media-details.js (modified) (2 diffs)
• js/media/views/menu-item.js (modified) (2 diffs)
• js/media/views/modal.js (modified) (1 diff)
• js/media/views/selection.js (modified) (1 diff)
• js/media/views/settings/attachment-display.js (modified) (1 diff)
• js/media/views/uploader/status.js (modified) (1 diff)
• wp-admin/css/media.css (modified) (1 diff)
• wp-includes/media-template.php (modified) (1 diff)

trunk/src/js/media/views/attachment/details.js

@@ -1 +1 @@
 var Attachment = wp.media.view.Attachment,
     l10n = wp.media.view.l10n,
+    $ = jQuery,
     Details;
 
@@ -47 +48 @@
 
     /**
+     * Gets the focusable elements to move focus to.
+     *
+     * @since 5.3.0
+     */
+    getFocusableElements: function() {
+        var editedAttachment = $( 'li[data-id="' + this.model.id + '"]' );
+
+        this.previousAttachment = editedAttachment.prev();
+        this.nextAttachment = editedAttachment.next();
+    },
+
+    /**
+     * Moves focus to the previous or next attachment in the grid.
+     * Fallbacks to the upload button or media frame when there are no attachments.
+     *
+     * @since 5.3.0
+     */
+    moveFocus: function() {
+        if ( this.previousAttachment.length ) {
+            this.previousAttachment.focus();
+            return;
+        }
+
+        if ( this.nextAttachment.length ) {
+            this.nextAttachment.focus();
+            return;
+        }
+
+        // Fallback: move focus to the "Select Files" button in the media modal.
+        if ( this.controller.uploader && this.controller.uploader.$browser ) {
+            this.controller.uploader.$browser.focus();
+            return;
+        }
+
+        // Last fallback.
+        this.moveFocusToLastFallback();
+    },
+
+    /**
+     * Moves focus to the media frame as last fallback.
+     *
+     * @since 5.3.0
+     */
+    moveFocusToLastFallback: function() {
+        // Last fallback: make the frame focusable and move focus to it.
+        $( '.media-frame' )
+            .attr( 'tabindex', '-1' )
+            .focus();
+    },
+
+    /**
      * @param {Object} event
      */
@@ -52 +104 @@
         event.preventDefault();
 
+        this.getFocusableElements();
+
         if ( window.confirm( l10n.warnDelete ) ) {
             this.model.destroy();
-            // Keep focus inside media modal
-            // after image is deleted
-            this.controller.modal.focusManager.focus();
+            this.moveFocus();
         }
     },
@@ -63 +115 @@
      */
     trashAttachment: function( event ) {
-        var library = this.controller.library;
+        var library = this.controller.library,
+            self = this;
         event.preventDefault();
 
+        this.getFocusableElements();
+
+        // When in the Media Library and the Media trash is enabled.
         if ( wp.media.view.settings.mediaTrash &&
             'edit-metadata' === this.controller.content.mode() ) {
@@ -72 +128 @@
             this.model.save().done( function() {
                 library._requery( true );
+                /*
+                 * @todo: We need to move focus back to the previous, next, or first
+                 * attachment but the library gets re-queried and refreshed. Thus,
+                 * the references to the previous attachments are lost. We need an
+                 * alternate method.
+                 */
+                self.moveFocusToLastFallback();
             } );
-        }  else {
+        } else {
             this.model.destroy();
+            this.moveFocus();
         }
     },
@@ -104 +168 @@
     },
     /**
-     * When reverse tabbing(shift+tab) out of the right details panel, deliver
-     * the focus to the item in the list that was being edited.
+     * When reverse tabbing (shift+tab) out of the right details panel,
+     * move focus to the item that was being edited in the attachments list.
      *
      * @param {Object} event
@@ -114 +178 @@
             return false;
         }
-
-        if ( 37 === event.keyCode || 38 === event.keyCode || 39 === event.keyCode || 40 === event.keyCode ) {
-            this.controller.trigger( 'attachment:keydown:arrow', event );
-            return;
-        }
     }
 });

trunk/src/js/media/views/attachments.js

@@ -83 +83 @@
         this.collection.on( 'reset', this.render, this );
 
-        this.listenTo( this.controller, 'library:selection:add',    this.attachmentFocus );
+        this.controller.on( 'library:selection:add', this.attachmentFocus, this );
 
         // Throttle the scroll handler and bind this.
@@ -131 +131 @@
      */
     attachmentFocus: function() {
-        this.$( 'li:first' ).focus();
+        /*
+         * @todo: when uploading new attachments, this tries to move focus to the
+         * attachmentz grid. Actually, a progress bar gets initially displayed
+         * and then updated when uploading completes, so focus is lost.
+         * Additionally: this view is used for both the attachments list and the
+         * list of selected attachments in the bottom media toolbar. Thus, when
+         * uploading attachments, it is called twice and returns two different `this`.
+         * `this.columns` is truthy within the modal.
+         */
+        if ( this.columns ) {
+            // Move focus to the grid list within the modal.
+            this.$el.focus();
+        }
     },
 
     /**
      * Restores focus to the selected item in the collection.
+     *
+     * Moves focus back to the first selected attachment in the grid. Used when
+     * tabbing backwards from the attachment details sidebar.
+     * See media.view.AttachmentsBrowser.
      *
      * @since 4.0.0

trunk/src/js/media/views/attachments/browser.js

@@ -87 +87 @@
 
     editSelection: function( modal ) {
+        // When editing a selection, move focus to the "Return to library" button.
         modal.$( '.media-button-backToLibrary' ).focus();
     },

trunk/src/js/media/views/edit-image.js

@@ -27 +27 @@
 
     loadEditor: function() {
-        var dfd = this.editor.open( this.model.get('id'), this.model.get('nonces').edit, this );
-        dfd.done( _.bind( this.focus, this ) );
-    },
-
-    focus: function() {
-        this.$( '.imgedit-submit .button' ).eq( 0 ).focus();
+        this.editor.open( this.model.get( 'id' ), this.model.get( 'nonces' ).edit, this );
     },
 

trunk/src/js/media/views/embed/url.js

@@ -57 +57 @@
     },
 
-    ready: function() {
-        if ( ! wp.media.isTouchDevice ) {
-            this.focus();
-        }
-    },
-
     url: function( event ) {
         this.model.set( 'url', $.trim( event.target.value ) );
-    },
-
-    /**
-     * If the input is visible, focus and select its contents.
-     */
-    focus: function() {
-        var $input = this.$input;
-        if ( $input.is(':visible') ) {
-            $input.focus()[0].select();
-        }
     }
 });

trunk/src/js/media/views/focus-manager.js

@@ -16 +16 @@
 
     /**
-     * Moves focus to the first visible menu item in the modal.
+     * Gets all the tabbable elements.
+     */
+    getTabbables: function() {
+        // Skip the file input added by Plupload.
+        return this.$( ':tabbable' ).not( '.moxie-shim input[type="file"]' );
+    },
+
+    /**
+     * Moves focus to the modal dialog.
      */
     focus: function() {
-        this.$( '.media-menu-item' ).filter( ':visible' ).first().focus();
+        this.$( '.media-modal' ).focus();
     },
+
     /**
      * @param {Object} event
@@ -32 +41 @@
         }
 
-        // Skip the file input added by Plupload.
-        tabbables = this.$( ':tabbable' ).not( '.moxie-shim input[type="file"]' );
+        tabbables = this.getTabbables();
 
         // Keep tab focus within media modal while it's open

trunk/src/js/media/views/frame/edit-attachments.js

@@ -92 +92 @@
             // Completely destroy the modal DOM element when closing it.
             this.modal.on( 'close', _.bind( function() {
-                $( 'body' ).off( 'keydown.media-modal' ); /* remove the keydown event */
-                // Restore the original focus item if possible
+                // Remove the keydown event.
+                $( 'body' ).off( 'keydown.media-modal' );
+                // Move focus back to the original item in the grid if possible.
                 $( 'li.attachment[data-id="' + this.model.get( 'id' ) +'"]' ).focus();
                 this.resetRoute();
@@ -174 +175 @@
 
     toggleNav: function() {
-        this.$('.left').toggleClass( 'disabled', ! this.hasPrevious() );
-        this.$('.right').toggleClass( 'disabled', ! this.hasNext() );
+        this.$( '.left' ).prop( 'disabled', ! this.hasPrevious() );
+        this.$( '.right' ).prop( 'disabled', ! this.hasNext() );
     },
 
@@ -205 +206 @@
             return;
         }
+
         this.trigger( 'refresh', this.library.at( this.getCurrentIndex() - 1 ) );
-        this.$( '.left' ).focus();
+        // Move focus to the Previous button. When there are no more items, to the Next button.
+        this.focusNavButton( this.hasPrevious() ? '.left' : '.right' );
     },
 
@@ -216 +219 @@
             return;
         }
+
         this.trigger( 'refresh', this.library.at( this.getCurrentIndex() + 1 ) );
-        this.$( '.right' ).focus();
+        // Move focus to the Next button. When there are no more items, to the Previous button.
+        this.focusNavButton( this.hasNext() ? '.right' : '.left' );
+    },
+
+    /**
+     * Set focus to the navigation buttons depending on the browsing direction.
+     *
+     * @since 5.3.0
+     *
+     * @param {string} which A CSS selector to target the button to focus.
+     */
+    focusNavButton: function( which ) {
+        $( which ).focus();
     },
 

trunk/src/js/media/views/frame/post.js

@@ -291 +291 @@
                     }
 
-                    // Keep focus inside media modal
-                    // after canceling a gallery
+                    // Move focus to the modal after canceling a Gallery.
                     this.controller.modal.focusManager.focus();
                 }
@@ -318 +317 @@
                         frame.close();
                     }
+
+                    // Move focus to the modal after canceling an Audio Playlist.
+                    this.controller.modal.focusManager.focus();
                 }
             },
@@ -342 +344 @@
                         frame.close();
                     }
+
+                    // Move focus to the modal after canceling a Video Playlist.
+                    this.controller.modal.focusManager.focus();
                 }
             },
@@ -359 +364 @@
 
         this.content.set( view );
-
-        if ( ! wp.media.isTouchDevice ) {
-            view.url.focus();
-        }
     },
 
@@ -484 +485 @@
                 }) );
 
-                this.controller.setState('gallery-edit');
-
-                // Keep focus inside media modal
-                // after jumping to gallery view
+                // Jump to Edit Gallery view.
+                this.controller.setState( 'gallery-edit' );
+
+                // Move focus to the modal after jumping to Edit Gallery view.
                 this.controller.modal.focusManager.focus();
             }
@@ -514 +515 @@
                 }) );
 
-                this.controller.setState('playlist-edit');
-
-                // Keep focus inside media modal
-                // after jumping to playlist view
+                // Jump to Edit Audio Playlist view.
+                this.controller.setState( 'playlist-edit' );
+
+                // Move focus to the modal after jumping to Edit Audio Playlist view.
                 this.controller.modal.focusManager.focus();
             }
@@ -544 +545 @@
                 }) );
 
-                this.controller.setState('video-playlist-edit');
-
-                // Keep focus inside media modal
-                // after jumping to video playlist view
+                // Jump to Edit Video Playlist view.
+                this.controller.setState( 'video-playlist-edit' );
+
+                // Move focus to the modal after jumping to Edit Video Playlist view.
                 this.controller.modal.focusManager.focus();
             }
@@ -617 +618 @@
                         state.trigger('reset');
                         controller.setState('gallery-edit');
+                        // Move focus to the modal when jumping back from Add to Gallery to Edit Gallery view.
+                        this.controller.modal.focusManager.focus();
                     }
                 }
@@ -674 +677 @@
                         state.trigger('reset');
                         controller.setState('playlist-edit');
+                        // Move focus to the modal when jumping back from Add to Audio Playlist to Edit Audio Playlist view.
+                        this.controller.modal.focusManager.focus();
                     }
                 }
@@ -728 +733 @@
                         state.trigger('reset');
                         controller.setState('video-playlist-edit');
+                        // Move focus to the modal when jumping back from Add to Video Playlist to Edit Video Playlist view.
+                        this.controller.modal.focusManager.focus();
                     }
                 }

trunk/src/js/media/views/image-details.js

@@ -72 +72 @@
 
     postRender: function() {
-        setTimeout( _.bind( this.resetFocus, this ), 10 );
+        setTimeout( _.bind( this.scrollToTop, this ), 10 );
         this.toggleLinkSettings();
         if ( window.getUserSetting( 'advImgDetails' ) === 'show' ) {
@@ -80 +80 @@
     },
 
-    resetFocus: function() {
-        this.$( '.link-to-custom' ).blur();
+    scrollToTop: function() {
         this.$( '.embed-media-settings' ).scrollTop( 0 );
     },

trunk/src/js/media/views/media-details.js

@@ -130 +130 @@
 
         setTimeout( _.bind( function() {
-            this.resetFocus();
+            this.scrollToTop();
         }, this ), 10 );
 
@@ -140 +140 @@
     },
 
-    resetFocus: function() {
+    scrollToTop: function() {
         this.$( '.embed-media-settings' ).scrollTop( 0 );
     }

trunk/src/js/media/views/menu-item.js

@@ -1 @@
-var $ = jQuery,
-    MenuItem;
+var MenuItem;
 
 /**
@@ -38 +37 @@
             this.click();
         }
-
-        // When selecting a tab along the left side,
-        // focus should be transferred into the main panel
-        if ( ! wp.media.isTouchDevice ) {
-            $('.media-frame-content input').first().focus();
-        }
     },
 

trunk/src/js/media/views/modal.js

@@ -136 +136 @@
         this.$el.hide().undelegate( 'keydown' );
 
-        // Put focus back in useful location once modal is closed.
+        // Move focus back in useful location once modal is closed.
         if ( null !== this.clickedOpenerEl ) {
+            // Move focus back to the element that opened the modal.
             this.clickedOpenerEl.focus();
         } else {
+            // Fallback to the admin page main element.
             $( '#wpbody-content' )
                 .attr( 'tabindex', '-1' )

trunk/src/js/media/views/selection.js

@@ -75 +75 @@
         this.collection.reset();
 
-        // Keep focus inside media modal
-        // after clear link is selected
+        // Move focus to the modal.
         this.controller.modal.focusManager.focus();
     }

trunk/src/js/media/views/settings/attachment-display.js

@@ -84 +84 @@
 
         $input.closest( '.setting' ).removeClass( 'hidden' );
-
-        // If the input is visible, focus and select its contents.
-        if ( ! wp.media.isTouchDevice && $input.is(':visible') ) {
-            $input.focus()[0].select();
-        }
     }
 });

trunk/src/js/media/views/uploader/status.js

@@ -125 +125 @@
         }
         wp.Uploader.errors.reset();
-        // Keep focus within the modal after the dismiss button gets removed from the DOM.
+        // Move focus to the modal after the dismiss button gets removed from the DOM.
         this.controller.modal.focusManager.focus();
     }

trunk/src/wp-admin/css/media.css

@@ -683 +683 @@
 }
 
-.edit-attachment-frame .edit-media-header .left.disabled,
-.edit-attachment-frame .edit-media-header .right.disabled,
-.edit-attachment-frame .edit-media-header .left.disabled:hover,
-.edit-attachment-frame .edit-media-header .right.disabled:hover {
+.edit-attachment-frame .edit-media-header [disabled],
+.edit-attachment-frame .edit-media-header [disabled]:hover {
     color: #ccc;
     background: inherit;
     cursor: default;
-    pointer-events: none;
 }
 

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

@@ -324 +324 @@
     <script type="text/html" id="tmpl-edit-attachment-frame">
         <div class="edit-media-header">
-            <button class="left dashicons <# if ( ! data.hasPrevious ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Previous' ); ?></span></button>
-            <button class="right dashicons <# if ( ! data.hasNext ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Next' ); ?></span></button>
+            <button class="left dashicons"<# if ( ! data.hasPrevious ) { #> disabled<# } #>><span class="screen-reader-text"><?php _e( 'Edit previous media item' ); ?></span></button>
+            <button class="right dashicons"<# if ( ! data.hasNext ) { #> disabled<# } #>><span class="screen-reader-text"><?php _e( 'Edit next media item' ); ?></span></button>
             <button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close dialog' ); ?></span></span></button>
         </div>