diff -r 3d4e9c994f10 -r a86126ab1dd4 wp/wp-includes/js/media-grid.js --- a/wp/wp-includes/js/media-grid.js Tue Oct 22 16:11:46 2019 +0200 +++ b/wp/wp-includes/js/media-grid.js Tue Dec 15 13:49:49 2020 +0100 @@ -265,7 +265,7 @@ } }, 1000 ); - // Update the URL when entering search string (at most once per second) + // Update the URL when entering search string (at most once per second). search.on( 'input', _.bind( input, this ) ); this.gridRouter @@ -346,7 +346,7 @@ $browser = this.$('.attachments-browser'); $toolbar = $browser.find('.media-toolbar'); - // Offset doesn't appear to take top margin into account, hence +16 + // Offset doesn't appear to take top margin into account, hence +16. if ( ( $browser.offset().top + 16 ) < this.$window.scrollTop() + this.$adminBar.height() ) { $browser.addClass( 'fixed' ); $toolbar.css('width', $browser.width() + 'px'); @@ -434,7 +434,7 @@ }, startHistory: function() { - // Verify pushState support and activate + // Verify pushState support and activate. if ( window.history && window.history.pushState ) { if ( Backbone.History.started ) { Backbone.history.stop(); @@ -529,7 +529,7 @@ 'upload.php': 'reset' }, - // Map routes against the page URL + // Map routes against the page URL. baseUrl: function( url ) { return 'upload.php' + url; }, @@ -542,19 +542,19 @@ } }, - // Respond to the search route by filling the search field and trigggering the input event + // Respond to the search route by filling the search field and trigggering the input event. search: function( query ) { jQuery( '#media-search-input' ).val( query ).trigger( 'input' ); }, - // Show the modal with a specific item + // Show the modal with a specific item. showItem: function( query ) { var media = wp.media, frame = media.frames.browse, library = frame.state().get('library'), item; - // Trigger the media frame to open the correct item + // Trigger the media frame to open the correct item. item = library.findWhere( { id: parseInt( query, 10 ) } ); item.set( 'skipHistory', true ); @@ -718,8 +718,9 @@ // 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(); }, this ) ); @@ -800,8 +801,8 @@ }, 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() ); }, /** @@ -831,8 +832,10 @@ if ( ! this.hasPrevious() ) { 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' ); }, /** @@ -842,8 +845,21 @@ if ( ! this.hasNext() ) { 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(); }, getCurrentIndex: function() { @@ -866,11 +882,11 @@ return; } - // The right arrow key + // The right arrow key. if ( 39 === event.keyCode ) { this.nextMediaItem(); } - // The left arrow key + // The left arrow key. if ( 37 === event.keyCode ) { this.previousMediaItem(); } @@ -941,7 +957,7 @@ children = toolbar.$( '.media-toolbar-secondary > *, .media-toolbar-primary > *' ); - // TODO: the Frame should be doing all of this. + // @todo The Frame should be doing all of this. if ( this.controller.isModeActive( 'select' ) ) { this.model.set( { size: 'large', @@ -949,6 +965,7 @@ } ); children.not( '.spinner, .media-button' ).hide(); this.$el.show(); + toolbar.$el.addClass( 'media-toolbar-mode-select' ); toolbar.$( '.delete-selected-button' ).removeClass( 'hidden' ); } else { this.model.set( { @@ -957,6 +974,7 @@ } ); this.controller.content.get().$el.removeClass( 'fixed' ); toolbar.$el.css( 'width', '' ); + toolbar.$el.removeClass( 'media-toolbar-mode-select' ); toolbar.$( '.delete-selected-button' ).addClass( 'hidden' ); children.not( '.media-button' ).show(); this.controller.state().get( 'selection' ).reset();