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. Built from https://develop.svn.wordpress.org/trunk@45524 git-svn-id: http://core.svn.wordpress.org/trunk@45335 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
parent
9f579ea448
commit
340fd28d82
|
@ -682,14 +682,11 @@ border color while dragging a file over the uploader drop area */
|
||||||
content: "\f341";
|
content: "\f341";
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-attachment-frame .edit-media-header .left.disabled,
|
.edit-attachment-frame .edit-media-header [disabled],
|
||||||
.edit-attachment-frame .edit-media-header .right.disabled,
|
.edit-attachment-frame .edit-media-header [disabled]:hover {
|
||||||
.edit-attachment-frame .edit-media-header .left.disabled:hover,
|
|
||||||
.edit-attachment-frame .edit-media-header .right.disabled:hover {
|
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
background: inherit;
|
background: inherit;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
pointer-events: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-attachment-frame .media-frame-content,
|
.edit-attachment-frame .media-frame-content,
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -682,14 +682,11 @@ border color while dragging a file over the uploader drop area */
|
||||||
content: "\f345";
|
content: "\f345";
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-attachment-frame .edit-media-header .left.disabled,
|
.edit-attachment-frame .edit-media-header [disabled],
|
||||||
.edit-attachment-frame .edit-media-header .right.disabled,
|
.edit-attachment-frame .edit-media-header [disabled]:hover {
|
||||||
.edit-attachment-frame .edit-media-header .left.disabled:hover,
|
|
||||||
.edit-attachment-frame .edit-media-header .right.disabled:hover {
|
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
background: inherit;
|
background: inherit;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
pointer-events: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-attachment-frame .media-frame-content,
|
.edit-attachment-frame .media-frame-content,
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -1001,7 +1001,7 @@ MediaDetails = AttachmentDisplay.extend(/** @lends wp.media.view.MediaDetails.pr
|
||||||
AttachmentDisplay.prototype.render.apply( this, arguments );
|
AttachmentDisplay.prototype.render.apply( this, arguments );
|
||||||
|
|
||||||
setTimeout( _.bind( function() {
|
setTimeout( _.bind( function() {
|
||||||
this.resetFocus();
|
this.scrollToTop();
|
||||||
}, this ), 10 );
|
}, this ), 10 );
|
||||||
|
|
||||||
this.settings = _.defaults( {
|
this.settings = _.defaults( {
|
||||||
|
@ -1011,7 +1011,7 @@ MediaDetails = AttachmentDisplay.extend(/** @lends wp.media.view.MediaDetails.pr
|
||||||
return this.setMedia();
|
return this.setMedia();
|
||||||
},
|
},
|
||||||
|
|
||||||
resetFocus: function() {
|
scrollToTop: function() {
|
||||||
this.$( '.embed-media-settings' ).scrollTop( 0 );
|
this.$( '.embed-media-settings' ).scrollTop( 0 );
|
||||||
}
|
}
|
||||||
},/** @lends wp.media.view.MediaDetails */{
|
},/** @lends wp.media.view.MediaDetails */{
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -718,8 +718,9 @@ EditAttachments = MediaFrame.extend(/** @lends wp.media.view.MediaFrame.EditAtta
|
||||||
|
|
||||||
// Completely destroy the modal DOM element when closing it.
|
// Completely destroy the modal DOM element when closing it.
|
||||||
this.modal.on( 'close', _.bind( function() {
|
this.modal.on( 'close', _.bind( function() {
|
||||||
$( 'body' ).off( 'keydown.media-modal' ); /* remove the keydown event */
|
// Remove the keydown event.
|
||||||
// Restore the original focus item if possible
|
$( '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();
|
$( 'li.attachment[data-id="' + this.model.get( 'id' ) +'"]' ).focus();
|
||||||
this.resetRoute();
|
this.resetRoute();
|
||||||
}, this ) );
|
}, this ) );
|
||||||
|
@ -800,8 +801,8 @@ EditAttachments = MediaFrame.extend(/** @lends wp.media.view.MediaFrame.EditAtta
|
||||||
},
|
},
|
||||||
|
|
||||||
toggleNav: function() {
|
toggleNav: function() {
|
||||||
this.$('.left').toggleClass( 'disabled', ! this.hasPrevious() );
|
this.$( '.left' ).prop( 'disabled', ! this.hasPrevious() );
|
||||||
this.$('.right').toggleClass( 'disabled', ! this.hasNext() );
|
this.$( '.right' ).prop( 'disabled', ! this.hasNext() );
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -831,8 +832,10 @@ EditAttachments = MediaFrame.extend(/** @lends wp.media.view.MediaFrame.EditAtta
|
||||||
if ( ! this.hasPrevious() ) {
|
if ( ! this.hasPrevious() ) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.trigger( 'refresh', this.library.at( this.getCurrentIndex() - 1 ) );
|
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 @@ EditAttachments = MediaFrame.extend(/** @lends wp.media.view.MediaFrame.EditAtta
|
||||||
if ( ! this.hasNext() ) {
|
if ( ! this.hasNext() ) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.trigger( 'refresh', this.library.at( this.getCurrentIndex() + 1 ) );
|
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() {
|
getCurrentIndex: function() {
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -3655,8 +3655,7 @@ Post = Select.extend(/** @lends wp.media.view.MediaFrame.Post.prototype */{
|
||||||
frame.close();
|
frame.close();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Keep focus inside media modal
|
// Move focus to the modal after canceling a Gallery.
|
||||||
// after canceling a gallery
|
|
||||||
this.controller.modal.focusManager.focus();
|
this.controller.modal.focusManager.focus();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -3682,6 +3681,9 @@ Post = Select.extend(/** @lends wp.media.view.MediaFrame.Post.prototype */{
|
||||||
} else {
|
} else {
|
||||||
frame.close();
|
frame.close();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Move focus to the modal after canceling an Audio Playlist.
|
||||||
|
this.controller.modal.focusManager.focus();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
separateCancel: new wp.media.View({
|
separateCancel: new wp.media.View({
|
||||||
|
@ -3706,6 +3708,9 @@ Post = Select.extend(/** @lends wp.media.view.MediaFrame.Post.prototype */{
|
||||||
} else {
|
} else {
|
||||||
frame.close();
|
frame.close();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Move focus to the modal after canceling a Video Playlist.
|
||||||
|
this.controller.modal.focusManager.focus();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
separateCancel: new wp.media.View({
|
separateCancel: new wp.media.View({
|
||||||
|
@ -3723,10 +3728,6 @@ Post = Select.extend(/** @lends wp.media.view.MediaFrame.Post.prototype */{
|
||||||
}).render();
|
}).render();
|
||||||
|
|
||||||
this.content.set( view );
|
this.content.set( view );
|
||||||
|
|
||||||
if ( ! wp.media.isTouchDevice ) {
|
|
||||||
view.url.focus();
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
editSelectionContent: function() {
|
editSelectionContent: function() {
|
||||||
|
@ -3848,10 +3849,10 @@ Post = Select.extend(/** @lends wp.media.view.MediaFrame.Post.prototype */{
|
||||||
multiple: true
|
multiple: true
|
||||||
}) );
|
}) );
|
||||||
|
|
||||||
this.controller.setState('gallery-edit');
|
// Jump to Edit Gallery view.
|
||||||
|
this.controller.setState( 'gallery-edit' );
|
||||||
|
|
||||||
// Keep focus inside media modal
|
// Move focus to the modal after jumping to Edit Gallery view.
|
||||||
// after jumping to gallery view
|
|
||||||
this.controller.modal.focusManager.focus();
|
this.controller.modal.focusManager.focus();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -3878,10 +3879,10 @@ Post = Select.extend(/** @lends wp.media.view.MediaFrame.Post.prototype */{
|
||||||
multiple: true
|
multiple: true
|
||||||
}) );
|
}) );
|
||||||
|
|
||||||
this.controller.setState('playlist-edit');
|
// Jump to Edit Audio Playlist view.
|
||||||
|
this.controller.setState( 'playlist-edit' );
|
||||||
|
|
||||||
// Keep focus inside media modal
|
// Move focus to the modal after jumping to Edit Audio Playlist view.
|
||||||
// after jumping to playlist view
|
|
||||||
this.controller.modal.focusManager.focus();
|
this.controller.modal.focusManager.focus();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -3908,10 +3909,10 @@ Post = Select.extend(/** @lends wp.media.view.MediaFrame.Post.prototype */{
|
||||||
multiple: true
|
multiple: true
|
||||||
}) );
|
}) );
|
||||||
|
|
||||||
this.controller.setState('video-playlist-edit');
|
// Jump to Edit Video Playlist view.
|
||||||
|
this.controller.setState( 'video-playlist-edit' );
|
||||||
|
|
||||||
// Keep focus inside media modal
|
// Move focus to the modal after jumping to Edit Video Playlist view.
|
||||||
// after jumping to video playlist view
|
|
||||||
this.controller.modal.focusManager.focus();
|
this.controller.modal.focusManager.focus();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -3981,6 +3982,8 @@ Post = Select.extend(/** @lends wp.media.view.MediaFrame.Post.prototype */{
|
||||||
edit.get('library').add( state.get('selection').models );
|
edit.get('library').add( state.get('selection').models );
|
||||||
state.trigger('reset');
|
state.trigger('reset');
|
||||||
controller.setState('gallery-edit');
|
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();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -4038,6 +4041,8 @@ Post = Select.extend(/** @lends wp.media.view.MediaFrame.Post.prototype */{
|
||||||
edit.get('library').add( state.get('selection').models );
|
edit.get('library').add( state.get('selection').models );
|
||||||
state.trigger('reset');
|
state.trigger('reset');
|
||||||
controller.setState('playlist-edit');
|
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();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -4092,6 +4097,8 @@ Post = Select.extend(/** @lends wp.media.view.MediaFrame.Post.prototype */{
|
||||||
edit.get('library').add( state.get('selection').models );
|
edit.get('library').add( state.get('selection').models );
|
||||||
state.trigger('reset');
|
state.trigger('reset');
|
||||||
controller.setState('video-playlist-edit');
|
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();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -4427,10 +4434,12 @@ Modal = wp.media.View.extend(/** @lends wp.media.view.Modal.prototype */{
|
||||||
// Hide modal and remove restricted media modal tab focus once it's closed
|
// Hide modal and remove restricted media modal tab focus once it's closed
|
||||||
this.$el.hide().undelegate( 'keydown' );
|
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 ) {
|
if ( null !== this.clickedOpenerEl ) {
|
||||||
|
// Move focus back to the element that opened the modal.
|
||||||
this.clickedOpenerEl.focus();
|
this.clickedOpenerEl.focus();
|
||||||
} else {
|
} else {
|
||||||
|
// Fallback to the admin page main element.
|
||||||
$( '#wpbody-content' )
|
$( '#wpbody-content' )
|
||||||
.attr( 'tabindex', '-1' )
|
.attr( 'tabindex', '-1' )
|
||||||
.focus();
|
.focus();
|
||||||
|
@ -4519,11 +4528,20 @@ var FocusManager = wp.media.View.extend(/** @lends wp.media.view.FocusManager.pr
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 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() {
|
focus: function() {
|
||||||
this.$( '.media-menu-item' ).filter( ':visible' ).first().focus();
|
this.$( '.media-modal' ).focus();
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {Object} event
|
* @param {Object} event
|
||||||
*/
|
*/
|
||||||
|
@ -4535,8 +4553,7 @@ var FocusManager = wp.media.View.extend(/** @lends wp.media.view.FocusManager.pr
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Skip the file input added by Plupload.
|
tabbables = this.getTabbables();
|
||||||
tabbables = this.$( ':tabbable' ).not( '.moxie-shim input[type="file"]' );
|
|
||||||
|
|
||||||
// Keep tab focus within media modal while it's open
|
// Keep tab focus within media modal while it's open
|
||||||
if ( tabbables.last()[0] === event.target && ! event.shiftKey ) {
|
if ( tabbables.last()[0] === event.target && ! event.shiftKey ) {
|
||||||
|
@ -5177,7 +5194,7 @@ UploaderStatus = View.extend(/** @lends wp.media.view.UploaderStatus.prototype *
|
||||||
_.invoke( errors, 'remove' );
|
_.invoke( errors, 'remove' );
|
||||||
}
|
}
|
||||||
wp.Uploader.errors.reset();
|
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();
|
this.controller.modal.focusManager.focus();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -5745,8 +5762,7 @@ module.exports = PriorityList;
|
||||||
/* 68 */
|
/* 68 */
|
||||||
/***/ (function(module, exports) {
|
/***/ (function(module, exports) {
|
||||||
|
|
||||||
var $ = jQuery,
|
var MenuItem;
|
||||||
MenuItem;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* wp.media.view.MenuItem
|
* wp.media.view.MenuItem
|
||||||
|
@ -5784,12 +5800,6 @@ MenuItem = wp.media.View.extend(/** @lends wp.media.view.MenuItem.prototype */{
|
||||||
} else {
|
} else {
|
||||||
this.click();
|
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();
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
click: function() {
|
click: function() {
|
||||||
|
@ -6759,7 +6769,7 @@ Attachments = View.extend(/** @lends wp.media.view.Attachments.prototype */{
|
||||||
|
|
||||||
this.collection.on( 'reset', this.render, this );
|
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.
|
// Throttle the scroll handler and bind this.
|
||||||
this.scroll = _.chain( this.scroll ).bind( this ).throttle( this.options.refreshSensitivity ).value();
|
this.scroll = _.chain( this.scroll ).bind( this ).throttle( this.options.refreshSensitivity ).value();
|
||||||
|
@ -6807,12 +6817,28 @@ Attachments = View.extend(/** @lends wp.media.view.Attachments.prototype */{
|
||||||
* @returns {void}
|
* @returns {void}
|
||||||
*/
|
*/
|
||||||
attachmentFocus: function() {
|
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.
|
* 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
|
* @since 4.0.0
|
||||||
*
|
*
|
||||||
* @returns {void}
|
* @returns {void}
|
||||||
|
@ -7584,6 +7610,7 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro
|
||||||
},
|
},
|
||||||
|
|
||||||
editSelection: function( modal ) {
|
editSelection: function( modal ) {
|
||||||
|
// When editing a selection, move focus to the "Return to library" button.
|
||||||
modal.$( '.media-button-backToLibrary' ).focus();
|
modal.$( '.media-button-backToLibrary' ).focus();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -8066,8 +8093,7 @@ Selection = wp.media.View.extend(/** @lends wp.media.view.Selection.prototype */
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
this.collection.reset();
|
this.collection.reset();
|
||||||
|
|
||||||
// Keep focus inside media modal
|
// Move focus to the modal.
|
||||||
// after clear link is selected
|
|
||||||
this.controller.modal.focusManager.focus();
|
this.controller.modal.focusManager.focus();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -8380,11 +8406,6 @@ AttachmentDisplay = Settings.extend(/** @lends wp.media.view.Settings.Attachment
|
||||||
}
|
}
|
||||||
|
|
||||||
$input.closest( '.setting' ).removeClass( 'hidden' );
|
$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();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -8443,6 +8464,7 @@ module.exports = Playlist;
|
||||||
|
|
||||||
var Attachment = wp.media.view.Attachment,
|
var Attachment = wp.media.view.Attachment,
|
||||||
l10n = wp.media.view.l10n,
|
l10n = wp.media.view.l10n,
|
||||||
|
$ = jQuery,
|
||||||
Details;
|
Details;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -8488,35 +8510,98 @@ Details = Attachment.extend(/** @lends wp.media.view.Attachment.Details.prototyp
|
||||||
Attachment.prototype.initialize.apply( this, arguments );
|
Attachment.prototype.initialize.apply( this, arguments );
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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
|
* @param {Object} event
|
||||||
*/
|
*/
|
||||||
deleteAttachment: function( event ) {
|
deleteAttachment: function( event ) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
|
this.getFocusableElements();
|
||||||
|
|
||||||
if ( window.confirm( l10n.warnDelete ) ) {
|
if ( window.confirm( l10n.warnDelete ) ) {
|
||||||
this.model.destroy();
|
this.model.destroy();
|
||||||
// Keep focus inside media modal
|
this.moveFocus();
|
||||||
// after image is deleted
|
|
||||||
this.controller.modal.focusManager.focus();
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* @param {Object} event
|
* @param {Object} event
|
||||||
*/
|
*/
|
||||||
trashAttachment: function( event ) {
|
trashAttachment: function( event ) {
|
||||||
var library = this.controller.library;
|
var library = this.controller.library,
|
||||||
|
self = this;
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
|
this.getFocusableElements();
|
||||||
|
|
||||||
|
// When in the Media Library and the Media trash is enabled.
|
||||||
if ( wp.media.view.settings.mediaTrash &&
|
if ( wp.media.view.settings.mediaTrash &&
|
||||||
'edit-metadata' === this.controller.content.mode() ) {
|
'edit-metadata' === this.controller.content.mode() ) {
|
||||||
|
|
||||||
this.model.set( 'status', 'trash' );
|
this.model.set( 'status', 'trash' );
|
||||||
this.model.save().done( function() {
|
this.model.save().done( function() {
|
||||||
library._requery( true );
|
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.model.destroy();
|
||||||
|
this.moveFocus();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
|
@ -8546,8 +8631,8 @@ Details = Attachment.extend(/** @lends wp.media.view.Attachment.Details.prototyp
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* When reverse tabbing(shift+tab) out of the right details panel, deliver
|
* When reverse tabbing (shift+tab) out of the right details panel,
|
||||||
* the focus to the item in the list that was being edited.
|
* move focus to the item that was being edited in the attachments list.
|
||||||
*
|
*
|
||||||
* @param {Object} event
|
* @param {Object} event
|
||||||
*/
|
*/
|
||||||
|
@ -8556,11 +8641,6 @@ Details = Attachment.extend(/** @lends wp.media.view.Attachment.Details.prototyp
|
||||||
this.controller.trigger( 'attachment:details:shift-tab', event );
|
this.controller.trigger( 'attachment:details:shift-tab', event );
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
if ( 37 === event.keyCode || 38 === event.keyCode || 39 === event.keyCode || 40 === event.keyCode ) {
|
|
||||||
this.controller.trigger( 'attachment:keydown:arrow', event );
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -8852,24 +8932,8 @@ EmbedUrl = View.extend(/** @lends wp.media.view.EmbedUrl.prototype */{
|
||||||
return this;
|
return this;
|
||||||
},
|
},
|
||||||
|
|
||||||
ready: function() {
|
|
||||||
if ( ! wp.media.isTouchDevice ) {
|
|
||||||
this.focus();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
url: function( event ) {
|
url: function( event ) {
|
||||||
this.model.set( 'url', $.trim( event.target.value ) );
|
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();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -9095,7 +9159,7 @@ ImageDetails = AttachmentDisplay.extend(/** @lends wp.media.view.ImageDetails.pr
|
||||||
},
|
},
|
||||||
|
|
||||||
postRender: function() {
|
postRender: function() {
|
||||||
setTimeout( _.bind( this.resetFocus, this ), 10 );
|
setTimeout( _.bind( this.scrollToTop, this ), 10 );
|
||||||
this.toggleLinkSettings();
|
this.toggleLinkSettings();
|
||||||
if ( window.getUserSetting( 'advImgDetails' ) === 'show' ) {
|
if ( window.getUserSetting( 'advImgDetails' ) === 'show' ) {
|
||||||
this.toggleAdvanced( true );
|
this.toggleAdvanced( true );
|
||||||
|
@ -9103,8 +9167,7 @@ ImageDetails = AttachmentDisplay.extend(/** @lends wp.media.view.ImageDetails.pr
|
||||||
this.trigger( 'post-render' );
|
this.trigger( 'post-render' );
|
||||||
},
|
},
|
||||||
|
|
||||||
resetFocus: function() {
|
scrollToTop: function() {
|
||||||
this.$( '.link-to-custom' ).blur();
|
|
||||||
this.$( '.embed-media-settings' ).scrollTop( 0 );
|
this.$( '.embed-media-settings' ).scrollTop( 0 );
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -9436,12 +9499,7 @@ EditImage = View.extend(/** @lends wp.media.view.EditImage.prototype */{
|
||||||
},
|
},
|
||||||
|
|
||||||
loadEditor: function() {
|
loadEditor: function() {
|
||||||
var dfd = this.editor.open( this.model.get('id'), this.model.get('nonces').edit, this );
|
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();
|
|
||||||
},
|
},
|
||||||
|
|
||||||
back: function() {
|
back: function() {
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -323,8 +323,8 @@ function wp_print_media_templates() {
|
||||||
<?php // Template for the Attachment Details layout in the media browser. ?>
|
<?php // Template for the Attachment Details layout in the media browser. ?>
|
||||||
<script type="text/html" id="tmpl-edit-attachment-frame">
|
<script type="text/html" id="tmpl-edit-attachment-frame">
|
||||||
<div class="edit-media-header">
|
<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="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( 'Next' ); ?></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>
|
<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>
|
</div>
|
||||||
<div class="media-frame-title"></div>
|
<div class="media-frame-title"></div>
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
*
|
*
|
||||||
* @global string $wp_version
|
* @global string $wp_version
|
||||||
*/
|
*/
|
||||||
$wp_version = '5.3-alpha-45522';
|
$wp_version = '5.3-alpha-45524';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||||
|
|
Loading…
Reference in New Issue