enmi-conf.org: comparison wp/wp-includes/js/media-views.js

Mercurial Mercurial > enmi-conf.org / comparison

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

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

changeset 16	a86126ab1dd4
parent 9	177826044cd9
child 18	be944660c56a

equal deleted inserted replaced

-:3d4e9c994f10
+:a86126ab1dd4
 delete l10n.settings;
 // Copy the `post` setting over to the model settings.
 media.model.settings.post = media.view.settings.post;
-// Check if the browser supports CSS 3.0 transitions
+// Check if the browser supports CSS 3.0 transitions.
 $.support.transition = (function(){
 	var style = document.documentElement.style,
 		transitions = {
 			WebkitTransition: 'webkitTransitionEnd',
 			MozTransition:    'transitionend',
 /**
 * Makes it easier to bind events using transitions.
 *
 * @param {string} selector
-* @param {Number} sensitivity
+* @param {number} sensitivity
-* @returns {Promise}
+* @return {Promise}
 */
 media.transition = function( selector, sensitivity ) {
 	var deferred = $.Deferred();
 	sensitivity = sensitivity || 2000;
 *
 * @memberOf wp.media.controller
 *
 * @class
 *
-* @param {object}        options          Options hash for the region.
+* @param {Object}        options          Options hash for the region.
 * @param {string}        options.id       Unique identifier for the region.
 * @param {Backbone.View} options.view     A parent view the region exists within.
 * @param {string}        options.selector jQuery selector for the region within the parent view.
 */
 var Region = function( options ) {
 	 * @param {string} mode
 	 *
 	 * @fires Region#activate
 	 * @fires Region#deactivate
 	 *
-	 * @returns {wp.media.controller.Region} Returns itself to allow chaining.
+	 * @return {wp.media.controller.Region} Returns itself to allow chaining.
 	 */
 	mode: function( mode ) {
 		if ( ! mode ) {
 			return this._mode;
 		}
 	 * @param {string} mode
 	 *
 	 * @fires Region#create
 	 * @fires Region#render
 	 *
-	 * @returns {wp.media.controller.Region} Returns itself to allow chaining
+	 * @return {wp.media.controller.Region} Returns itself to allow chaining.
 	 */
 	render: function( mode ) {
 		// If the mode isn't active, activate it.
 		if ( mode && mode !== this._mode ) {
 			return this.mode( mode );
 	/**
 	 * Get the region's view.
 	 *
 	 * @since 3.5.0
 	 *
-	 * @returns {wp.media.View}
+	 * @return {wp.media.View}
 	 */
 	get: function() {
 		return this.view.views.first( this.selector );
 	},
 	 *
 	 * @since 3.5.0
 	 *
 	 * @param {Array|Object} views
 	 * @param {Object} [options={}]
-	 * @returns {wp.Backbone.Subviews} Subviews is returned to allow chaining
+	 * @return {wp.Backbone.Subviews} Subviews is returned to allow chaining.
 	 */
 	set: function( views, options ) {
 		if ( options ) {
 			options.add = false;
 		}
 	 * Trigger regional view events on the frame.
 	 *
 	 * @since 3.5.0
 	 *
 	 * @param {string} event
-	 * @returns {undefined|wp.media.controller.Region} Returns itself to allow chaining.
+	 * @return {undefined|wp.media.controller.Region} Returns itself to allow chaining.
 	 */
 	trigger: function( event ) {
 		var base, args;
 		if ( ! this._mode ) {
 *
 * @class
 * @augments Backbone.Model
 * @mixin
 * @mixes Backbone.Events
-*
-* @param {Array} states
 */
-var StateMachine = function( states ) {
+var StateMachine = function() {
-	// @todo This is dead code. The states collection gets created in media.view.Frame._createStates.
+	return {
-	this.states = new Backbone.Collection( states );
+		// Use Backbone's self-propagating `extend` inheritance method.
+		extend: Backbone.Model.extend
+	};
 };
-// Use Backbone's self-propagating `extend` inheritance method.
-StateMachine.extend = Backbone.Model.extend;
 _.extend( StateMachine.prototype, Backbone.Events,/** @lends wp.media.controller.StateMachine.prototype */{
 	/**
 	 * Fetch a state.
 	 *
 	 * If no `id` is provided, returns the active state.
 	 *
 	 * Implicitly creates states.
 	 *
 	 * Ensure that the `states` collection exists so the `StateMachine`
-	 *   can be used as a mixin.
+	 * can be used as a mixin.
 	 *
 	 * @since 3.5.0
 	 *
 	 * @param {string} id
-	 * @returns {wp.media.controller.State} Returns a State model
+	 * @return {wp.media.controller.State} Returns a State model from
-	 *   from the StateMachine collection
+	 *                                     the StateMachine collection.
 	 */
 	state: function( id ) {
 		this.states = this.states || new Backbone.Collection();
 		// Default to the active state.
 	 * @param {string} id
 	 *
 	 * @fires wp.media.controller.State#deactivate
 	 * @fires wp.media.controller.State#activate
 	 *
-	 * @returns {wp.media.controller.StateMachine} Returns itself to allow chaining
+	 * @return {wp.media.controller.StateMachine} Returns itself to allow chaining.
 	 */
 	setState: function( id ) {
 		var previous = this.state();
 		if ( ( previous && id === previous.id ) || ! this.states || ! this.states.get( id ) ) {
 	 * Call the `state()` method with no parameters to retrieve the current
 	 * active state.
 	 *
 	 * @since 3.5.0
 	 *
-	 * @returns {wp.media.controller.State} Returns a State model
+	 * @return {wp.media.controller.State} Returns a State model from
-	 *    from the StateMachine collection
+	 *                                     the StateMachine collection.
 	 */
 	lastState: function() {
 		if ( this._lastState ) {
 			return this.state( this._lastState );
 		}
 _.each([ 'on', 'off', 'trigger' ], function( method ) {
 	/**
 	 * @function on
 	 * @memberOf wp.media.controller.StateMachine
 	 * @instance
-	 * @returns {wp.media.controller.StateMachine} Returns itself to allow chaining.
+	 * @return {wp.media.controller.StateMachine} Returns itself to allow chaining.
 	 */
 	/**
 	 * @function off
 	 * @memberOf wp.media.controller.StateMachine
 	 * @instance
-	 * @returns {wp.media.controller.StateMachine} Returns itself to allow chaining.
+	 * @return {wp.media.controller.StateMachine} Returns itself to allow chaining.
 	 */
 	/**
 	 * @function trigger
 	 * @memberOf wp.media.controller.StateMachine
 	 * @instance
-	 * @returns {wp.media.controller.StateMachine} Returns itself to allow chaining.
+	 * @return {wp.media.controller.StateMachine} Returns itself to allow chaining.
 	 */
 	StateMachine.prototype[ method ] = function() {
 		// Ensure that the `states` collection exists so the `StateMachine`
 		// can be used as a mixin.
 		this.states = this.states || new Backbone.Collection();
 	 * @since 3.5.0
 	 */
 	reset: function() {},
 	/**
+	 * @since 3.5.0
 	 * @access private
-	 * @since 3.5.0
 	 */
 	_ready: function() {
 		this._updateMenu();
 	},
 	/**
+	 * @since 3.5.0
 	 * @access private
-	 * @since 3.5.0
 	*/
 	_preActivate: function() {
 		this.active = true;
 	},
 	/**
+	 * @since 3.5.0
 	 * @access private
-	 * @since 3.5.0
 	 */
 	_postActivate: function() {
 		this.on( 'change:menu', this._menu, this );
 		this.on( 'change:titleMode', this._title, this );
 		this.on( 'change:content', this._content, this );
 		this._content();
 		this._router();
 	},
 	/**
+	 * @since 3.5.0
 	 * @access private
-	 * @since 3.5.0
 	 */
 	_deactivate: function() {
 		this.active = false;
 		this.frame.off( 'title:render:default', this._renderTitle, this );
 		this.off( 'change:content', this._content, this );
 		this.off( 'change:toolbar', this._toolbar, this );
 	},
 	/**
+	 * @since 3.5.0
 	 * @access private
-	 * @since 3.5.0
 	 */
 	_title: function() {
 		this.frame.title.render( this.get('titleMode') || 'default' );
 	},
 	/**
+	 * @since 3.5.0
 	 * @access private
-	 * @since 3.5.0
 	 */
 	_renderTitle: function( view ) {
 		view.$el.text( this.get('title') || '' );
 	},
 	/**
+	 * @since 3.5.0
 	 * @access private
-	 * @since 3.5.0
 	 */
 	_router: function() {
 		var router = this.frame.router,
 			mode = this.get('router'),
 			view;
 			view.select( this.frame.content.mode() );
 		}
 	},
 	/**
+	 * @since 3.5.0
 	 * @access private
-	 * @since 3.5.0
 	 */
 	_menu: function() {
 		var menu = this.frame.menu,
 			mode = this.get('menu'),
 			view;
 			view.select( this.id );
 		}
 	},
 	/**
+	 * @since 3.5.0
 	 * @access private
-	 * @since 3.5.0
 	 */
 	_updateMenu: function() {
 		var previous = this.previous('menu'),
 			menu = this.get('menu');
 	},
 	/**
 	 * Create a view in the media menu for the state.
 	 *
+	 * @since 3.5.0
 	 * @access private
-	 * @since 3.5.0
 	 *
 	 * @param {media.view.Menu} view The menu view.
 	 */
 	_renderMenu: function( view ) {
 		var menuItem = this.get('menuItem'),
 		if ( ! this.get('syncSelection') || ! manager || ! selection ) {
 			return;
 		}
-		// If the selection supports multiple items, validate the stored
+		/*
-		// attachments based on the new selection's conditions. Record
+		 * If the selection supports multiple items, validate the stored
-		// the attachments that are not included; we'll maintain a
+		 * attachments based on the new selection's conditions. Record
-		// reference to those. Other attachments are considered in flux.
+		 * the attachments that are not included; we'll maintain a
+		 * reference to those. Other attachments are considered in flux.
+		 */
 		if ( selection.multiple ) {
 			selection.reset( [], { silent: true });
 			selection.validateAll( manager.attachments );
 			manager.difference = _.difference( manager.attachments.models, selection.models );
 		}
 	 * Create a model to represent display settings (alignment, etc.) for an attachment.
 	 *
 	 * @since 3.5.0
 	 *
 	 * @param {wp.media.model.Attachment} attachment
-	 * @returns {Backbone.Model}
+	 * @return {Backbone.Model}
 	 */
 	display: function( attachment ) {
 		var displays = this._displays;
 		if ( ! displays[ attachment.cid ] ) {
 	 * Given an attachment, create attachment display settings properties.
 	 *
 	 * @since 3.6.0
 	 *
 	 * @param {wp.media.model.Attachment} attachment
-	 * @returns {Object}
+	 * @return {Object}
 	 */
 	defaultDisplaySettings: function( attachment ) {
 		var settings = _.clone( this._defaultDisplaySettings );
-		if ( settings.canEmbed = this.canEmbed( attachment ) ) {
+		settings.canEmbed = this.canEmbed( attachment );
+		if ( settings.canEmbed ) {
 			settings.link = 'embed';
 		} else if ( ! this.isImageAttachment( attachment ) && settings.link === 'none' ) {
 			settings.link = 'file';
 		}
 	 * Whether an attachment is image.
 	 *
 	 * @since 4.4.1
 	 *
 	 * @param {wp.media.model.Attachment} attachment
-	 * @returns {Boolean}
+	 * @return {boolean}
 	 */
 	isImageAttachment: function( attachment ) {
 		// If uploading, we know the filename but not the mime type.
 		if ( attachment.get('uploading') ) {
 			return /\.(jpe?g|png|gif)$/i.test( attachment.get('filename') );
 	 * Whether an attachment can be embedded (audio or video).
 	 *
 	 * @since 3.6.0
 	 *
 	 * @param {wp.media.model.Attachment} attachment
-	 * @returns {Boolean}
+	 * @return {boolean}
 	 */
 	canEmbed: function( attachment ) {
 		// If uploading, we know the filename but not the mime type.
 		if ( ! attachment.get('uploading') ) {
 			var type = attachment.get('type');
 	/**
 	 * Initializes the library. Creates a library of images if a library isn't supplied.
 	 *
 	 * @since 3.5.0
 	 *
-	 * @returns {void}
+	 * @return {void}
 	 */
 	initialize: function() {
 		if ( ! this.get('library') ) {
 			this.set( 'library', wp.media.query({ type: 'image' }) );
 		}
 	 * Removes all event listeners if in edit mode. Creates a validator to check an attachment.
 	 * Resets library and re-enables event listeners. Activates edit mode. Calls the parent's activate method.
 	 *
 	 * @since 3.5.0
 	 *
-	 * @returns {void}
+	 * @return {void}
 	 */
 	activate: function() {
 		var library = this.get('library'),
 			edit    = this.frame.state('gallery-edit').get('library');
 * @augments wp.media.controller.Library
 * @augments wp.media.controller.State
 * @augments Backbone.Model
 *
 * @param {object}                     [attributes]                         The attributes hash passed to the state.
-* @param {string}                     [attributes.id=library]      Unique identifier.
+* @param {string}                     [attributes.id=library]              Unique identifier.
-* @param {string}                     attributes.title                    Title for the state. Displays in the frame's title region.
+* @param {string}                     attributes.title                     Title for the state. Displays in the frame's title region.
 * @param {boolean}                    [attributes.multiple=add]            Whether multi-select is enabled. @todo 'add' doesn't seem do anything special, and gets used as a boolean.
 * @param {wp.media.model.Attachments} [attributes.library]                 The attachments collection to browse.
 *                                                                          If one is not supplied, a collection of attachments of the specified type will be created.
 * @param {boolean|string}             [attributes.filterable=uploaded]     Whether the library is filterable, and if so what filters should be shown.
 *                                                                          Accepts 'all', 'uploaded', or 'unattached'.
 * @param {boolean}                    [attributes.autoSelect=true]         Whether an uploaded attachment should be automatically added to the selection.
 * @param {boolean}                    [attributes.contentUserSetting=true] Whether the content region's mode should be set and persisted per user.
 * @param {int}                        [attributes.priority=100]            The priority for the state link in the media menu.
 * @param {boolean}                    [attributes.syncSelection=false]     Whether the Attachments selection should be persisted from the last state.
 *                                                                          Defaults to false because for this state, because the library of the Edit Gallery state is the selection.
-* @param {string}                     attributes.type                   The collection's media type. (e.g. 'video').
+* @param {string}                     attributes.type                      The collection's media type. (e.g. 'video').
-* @param {string}                     attributes.collectionType         The collection type. (e.g. 'playlist').
+* @param {string}                     attributes.collectionType            The collection type. (e.g. 'playlist').
 */
 CollectionAdd = Library.extend(/** @lends wp.media.controller.CollectionAdd.prototype */{
 	defaults: _.defaults( {
 		// Selection defaults. @see media.model.Selection
 		multiple:      'add',
 		// that do not exist in gallery's library.
 		library.validator = function( attachment ) {
 			return !! this.mirroring.get( attachment.cid ) && ! edit.get( attachment.cid ) && Selection.prototype.validator.apply( this, arguments );
 		};
-		// Reset the library to ensure that all attachments are re-added
+		/*
-		// to the collection. Do so silently, as calling `observe` will
+		 * Reset the library to ensure that all attachments are re-added
-		// trigger the `reset` event.
+		 * to the collection. Do so silently, as calling `observe` will
+		 * trigger the `reset` event.
+		 */
 		library.reset( library.mirroring.models, { silent: true });
 		library.observe( edit );
 		this.set('editLibrary', edit);
 		Library.prototype.activate.apply( this, arguments );
 	/**
 	 * Activates a frame for editing a featured image.
 	 *
 	 * @since 3.9.0
 	 *
-	 * @returns {void}
+	 * @return {void}
 	 */
 	activate: function() {
 		this.frame.on( 'toolbar:render:edit-image', _.bind( this.toolbar, this ) );
 	},
 	/**
 	 * Deactivates a frame for editing a featured image.
 	 *
 	 * @since 3.9.0
 	 *
-	 * @returns {void}
+	 * @return {void}
 	 */
 	deactivate: function() {
 		this.frame.off( 'toolbar:render:edit-image' );
 	},
 	 * In case there is a previous state it sets that previous state otherwise it
 	 * closes the frame.
 	 *
 	 * @since 3.9.0
 	 *
-	 * @returns {void}
+	 * @return {void}
 	 */
 	toolbar: function() {
 		var frame = this.frame,
 			lastState = frame.lastState(),
 			previous = lastState && lastState.id;
 			attributes = {
 				type: 'link',
 				scanners: []
 			};
-		// Scan is triggered with the list of `attributes` to set on the
+		/*
-		// state, useful for the 'type' attribute and 'scanners' attribute,
+		 * Scan is triggered with the list of `attributes` to set on the
-		// an array of promise objects for asynchronous scan operations.
+		 * state, useful for the 'type' attribute and 'scanners' attribute,
+		 * an array of promise objects for asynchronous scan operations.
+		 */
 		if ( this.props.get('url') ) {
 			this.trigger( 'scan', attributes );
 		}
 		if ( attributes.scanners.length ) {
 	/**
 	 * Shows the crop image window when called from the Add new image button.
 	 *
 	 * @since 4.2.0
 	 *
-	 * @returns {void}
+	 * @return {void}
 	 */
 	activate: function() {
 		this.frame.on( 'content:create:crop', this.createCropContent, this );
 		this.frame.on( 'close', this.removeCropper, this );
 		this.set('selection', new Backbone.Collection(this.frame._selection.single));
 	/**
 	 * Changes the state of the toolbar window to browse mode.
 	 *
 	 * @since 4.2.0
 	 *
-	 * @returns {void}
+	 * @return {void}
 	 */
 	deactivate: function() {
 		this.frame.toolbar.mode('browse');
 	},
 	 *
 	 * @since 4.2.0
 	 *
 	 * @fires crop window
 	 *
-	 * @returns {void}
+	 * @return {void}
 	 */
 	createCropContent: function() {
 		this.cropperView = new wp.media.view.Cropper({
 			controller: this,
 			attachment: this.get('selection').first()
 	/**
 	 * Removes the image selection and closes the cropping window.
 	 *
 	 * @since 4.2.0
 	 *
-	 * @returns {void}
+	 * @return {void}
 	 */
 	removeCropper: function() {
 		this.imgSelect.cancelSelection();
 		this.imgSelect.setOptions({remove: true});
 		this.imgSelect.update();
 	/**
 	 * Checks if cropping can be skipped and creates crop toolbar accordingly.
 	 *
 	 * @since 4.2.0
 	 *
-	 * @returns {void}
+	 * @return {void}
 	 */
 	createCropToolbar: function() {
 		var canSkipCrop, toolbarOptions;
 		canSkipCrop = this.get('canSkipCrop') || false;
 	/**
 	 * Creates an object with the image attachment and crop properties.
 	 *
 	 * @since 4.2.0
 	 *
-	 * @returns {$.promise} A jQuery promise with the custom header crop details.
+	 * @return {$.promise} A jQuery promise with the custom header crop details.
 	 */
 	doCrop: function( attachment ) {
 		return wp.ajax.post( 'custom-header-crop', _.extend(
 			{},
 			this.defaults.doCropArgs,
 	 *
 	 * @since 4.3.0
 	 *
 	 * @param {Object} attachment The attachment to crop.
 	 *
-	 * @returns {$.promise} A jQuery promise that represents the crop image request.
+	 * @return {$.promise} A jQuery promise that represents the crop image request.
 	 */
 	doCrop: function( attachment ) {
 		var cropDetails = attachment.get( 'cropDetails' ),
 			control = this.get( 'control' ),
 			ratio = cropDetails.width / cropDetails.height;
 	/**
 	 * @todo The internal comment mentions this might have been a stop-gap
 	 *       before Backbone 0.9.8 came out. Figure out if Backbone core takes
 	 *       care of this in Backbone.View now.
 	 *
-	 * @returns {wp.media.View} Returns itself to allow chaining
+	 * @return {wp.media.View} Returns itself to allow chaining.
 	 */
 	dispose: function() {
-		// Undelegating events, removing events from the model, and
+		/*
-		// removing events from the controller mirror the code for
+		 * Undelegating events, removing events from the model, and
-		// `Backbone.View.dispose` in Backbone 0.9.8 development.
+		 * removing events from the controller mirror the code for
+		 * `Backbone.View.dispose` in Backbone 0.9.8 development.
+		 */
 		this.undelegateEvents();
 		if ( this.model && this.model.off ) {
 			this.model.off( null, null, this );
 		}
 		}
 		return this;
 	},
 	/**
-	 * @returns {wp.media.View} Returns itself to allow chaining
+	 * @return {wp.media.View} Returns itself to allow chaining.
 	 */
 	remove: function() {
 		this.dispose();
 		/**
 		 * call 'remove' directly on the parent class
 		}, this );
 	},
 	/**
 	 * Reset all states on the frame to their defaults.
 	 *
-	 * @returns {wp.media.view.Frame} Returns itself to allow chaining
+	 * @return {wp.media.view.Frame} Returns itself to allow chaining.
 	 */
 	reset: function() {
 		this.states.invoke( 'trigger', 'reset' );
 		return this;
 	},
 	},
 	/**
 	 * Activate a mode on the frame.
 	 *
 	 * @param string mode Mode ID.
-	 * @returns {this} Returns itself to allow chaining.
+	 * @return {this} Returns itself to allow chaining.
 	 */
 	activateMode: function( mode ) {
 		// Bail if the mode is already active.
 		if ( this.isModeActive( mode ) ) {
 			return;
 	},
 	/**
 	 * Deactivate a mode on the frame.
 	 *
 	 * @param string mode Mode ID.
-	 * @returns {this} Returns itself to allow chaining.
+	 * @return {this} Returns itself to allow chaining.
 	 */
 	deactivateMode: function( mode ) {
 		// Bail if the mode isn't active.
 		if ( ! this.isModeActive( mode ) ) {
 			return this;
 		return this;
 	},
 	/**
 	 * Check if a mode is enabled on the frame.
 	 *
-	 * @param  string mode Mode ID.
+	 * @param string mode Mode ID.
 	 * @return bool
 	 */
 	isModeActive: function( mode ) {
 		return Boolean( this.activeModes.where( { id: mode } ).length );
 	}
 /***/ }),
 /* 51 */
 /***/ (function(module, exports) {
 var Frame = wp.media.view.Frame,
+	l10n = wp.media.view.l10n,
 	$ = jQuery,
 	MediaFrame;
 /**
 * wp.media.view.MediaFrame
 	className: 'media-frame',
 	template:  wp.template('media-frame'),
 	regions:   ['menu','title','content','toolbar','router'],
 	events: {
-		'click div.media-frame-title h1': 'toggleMenu'
+		'click .media-frame-menu-toggle': 'toggleMenu'
 	},
 	/**
 	 * @constructs
 	 */
 	initialize: function() {
 		Frame.prototype.initialize.apply( this, arguments );
 		_.defaults( this.options, {
-			title:    '',
+			title:    l10n.mediaFrameDefaultTitle,
 			modal:    true,
 			uploader: true
 		});
 		// Ensure core UI is enabled.
 		// Bind default title creation.
 		this.on( 'title:create:default', this.createTitle, this );
 		this.title.mode('default');
-		this.on( 'title:render', function( view ) {
-			view.$el.append( '<span class="dashicons dashicons-arrow-down"></span>' );
-		});
 		// Bind default menu.
 		this.on( 'menu:create:default', this.createMenu, this );
-	},
-	/**
+		// Set the menu ARIA tab panel attributes when the modal opens.
-	 * @returns {wp.media.view.MediaFrame} Returns itself to allow chaining
+		this.on( 'open', this.setMenuTabPanelAriaAttributes, this );
+		// Set the router ARIA tab panel attributes when the modal opens.
+		this.on( 'open', this.setRouterTabPanelAriaAttributes, this );
+		// Update the menu ARIA tab panel attributes when the content updates.
+		this.on( 'content:render', this.setMenuTabPanelAriaAttributes, this );
+		// Update the router ARIA tab panel attributes when the content updates.
+		this.on( 'content:render', this.setRouterTabPanelAriaAttributes, this );
+	},
+	/**
+	 * Sets the attributes to be used on the menu ARIA tab panel.
+	 *
+	 * @since 5.3.0
+	 *
+	 * @return {void}
+	 */
+	setMenuTabPanelAriaAttributes: function() {
+		var stateId = this.state().get( 'id' ),
+			tabPanelEl = this.$el.find( '.media-frame-tab-panel' ),
+			ariaLabelledby;
+		tabPanelEl.removeAttr( 'role aria-labelledby tabindex' );
+		if ( this.state().get( 'menu' ) && this.menuView && this.menuView.isVisible ) {
+			ariaLabelledby = 'menu-item-' + stateId;
+			// Set the tab panel attributes only if the tabs are visible.
+			tabPanelEl
+				.attr( {
+					role: 'tabpanel',
+					'aria-labelledby': ariaLabelledby,
+					tabIndex: '0'
+				} );
+		}
+	},
+	/**
+	 * Sets the attributes to be used on the router ARIA tab panel.
+	 *
+	 * @since 5.3.0
+	 *
+	 * @return {void}
+	 */
+	setRouterTabPanelAriaAttributes: function() {
+		var tabPanelEl = this.$el.find( '.media-frame-content' ),
+			ariaLabelledby;
+		tabPanelEl.removeAttr( 'role aria-labelledby tabindex' );
+		// Set the tab panel attributes only if the tabs are visible.
+		if ( this.state().get( 'router' ) && this.routerView && this.routerView.isVisible && this.content._mode ) {
+			ariaLabelledby = 'menu-item-' + this.content._mode;
+			tabPanelEl
+				.attr( {
+					role: 'tabpanel',
+					'aria-labelledby': ariaLabelledby,
+					tabIndex: '0'
+				} );
+		}
+	},
+	/**
+	 * @return {wp.media.view.MediaFrame} Returns itself to allow chaining.
 	 */
 	render: function() {
 		// Activate the default state if no active state exists.
 		if ( ! this.state() && this.options.state ) {
 			this.setState( this.options.state );
 	 * @param {Object} menu
 	 * @this wp.media.controller.Region
 	 */
 	createMenu: function( menu ) {
 		menu.view = new wp.media.view.Menu({
-			controller: this
+			controller: this,
+			attributes: {
+				role:               'tablist',
+				'aria-orientation': 'vertical'
+			}
 		});
-	},
+		this.menuView = menu.view;
-	toggleMenu: function() {
+	},
-		this.$el.find( '.media-menu' ).toggleClass( 'visible' );
+	toggleMenu: function( event ) {
+		var menu = this.$el.find( '.media-menu' );
+		menu.toggleClass( 'visible' );
+		$( event.target ).attr( 'aria-expanded', menu.hasClass( 'visible' ) );
 	},
 	/**
 	 * @param {Object} toolbar
 	 * @this wp.media.controller.Region
 	 * @param {Object} router
 	 * @this wp.media.controller.Region
 	 */
 	createRouter: function( router ) {
 		router.view = new wp.media.view.Router({
-			controller: this
+			controller: this,
+			attributes: {
+				role:               'tablist',
+				'aria-orientation': 'horizontal'
+			}
 		});
+		this.routerView = router.view;
 	},
 	/**
 	 * @param {Object} options
 	 */
 	createIframeStates: function( options ) {
 	/**
 	 * @function open
 	 * @memberOf wp.media.view.MediaFrame
 	 * @instance
 	 *
-	 * @returns {wp.media.view.MediaFrame} Returns itself to allow chaining
+	 * @return {wp.media.view.MediaFrame} Returns itself to allow chaining.
 	 */
 	/**
 	 * @function close
 	 * @memberOf wp.media.view.MediaFrame
 	 * @instance
 	 *
-	 * @returns {wp.media.view.MediaFrame} Returns itself to allow chaining
+	 * @return {wp.media.view.MediaFrame} Returns itself to allow chaining.
 	 */
 	/**
 	 * @function attach
 	 * @memberOf wp.media.view.MediaFrame
 	 * @instance
 	 *
-	 * @returns {wp.media.view.MediaFrame} Returns itself to allow chaining
+	 * @return {wp.media.view.MediaFrame} Returns itself to allow chaining.
 	 */
 	/**
 	 * @function detach
 	 * @memberOf wp.media.view.MediaFrame
 	 * @instance
 	 *
-	 * @returns {wp.media.view.MediaFrame} Returns itself to allow chaining
+	 * @return {wp.media.view.MediaFrame} Returns itself to allow chaining.
 	 */
 	/**
 	 * @function escape
 	 * @memberOf wp.media.view.MediaFrame
 	 * @instance
 	 *
-	 * @returns {wp.media.view.MediaFrame} Returns itself to allow chaining
+	 * @return {wp.media.view.MediaFrame} Returns itself to allow chaining.
 	 */
 	MediaFrame.prototype[ method ] = function() {
 		if ( this.modal ) {
 			this.modal[ method ].apply( this.modal, arguments );
 		}
 			attachments: new wp.media.model.Attachments(),
 			difference: []
 		};
 	},
+	editImageContent: function() {
+		var image = this.state().get('image'),
+			view = new wp.media.view.EditImage( { model: image, controller: this } ).render();
+		this.content.set( view );
+		// After creating the wrapper view, load the actual editor via an Ajax call.
+		view.loadEditor();
+	},
 	/**
 	 * Create the default states on the frame.
 	 */
 	createStates: function() {
 		var options = this.options;
 			new wp.media.controller.Library({
 				library:   wp.media.query( options.library ),
 				multiple:  options.multiple,
 				title:     options.title,
 				priority:  20
-			})
+			}),
+			new wp.media.controller.EditImage( { model: options.editImage } )
 		]);
 	},
 	/**
 	 * Bind region mode event callbacks.
 		this.on( 'router:create:browse', this.createRouter, this );
 		this.on( 'router:render:browse', this.browseRouter, this );
 		this.on( 'content:create:browse', this.browseContent, this );
 		this.on( 'content:render:upload', this.uploadContent, this );
 		this.on( 'toolbar:create:select', this.createSelectToolbar, this );
+		this.on( 'content:render:edit-image', this.editImageContent, this );
 	},
 	/**
 	 * Render callback for the router region in the `browse` mode.
 	 *
 		Select.prototype.bindHandlers.apply( this, arguments );
 		this.on( 'activate', this.activate, this );
-		// Only bother checking media type counts if one of the counts is zero
+		// Only bother checking media type counts if one of the counts is zero.
 		checkCounts = _.find( this.counts, function( type ) {
 			return type.count === 0;
 		} );
 		if ( typeof checkCounts !== 'undefined' ) {
 			}, this );
 		}, this );
 	},
 	activate: function() {
-		// Hide menu items for states tied to particular media types if there are no items
+		// Hide menu items for states tied to particular media types if there are no items.
 		_.each( this.counts, function( type ) {
 			if ( type.count < 1 ) {
 				this.menuItemVisibility( type.state, 'hide' );
 			}
 		}, this );
 			this.counts[ attr ].count++;
 			this.menuItemVisibility( this.counts[ attr ].state, 'show' );
 		}
 	},
-	// Menus
+	// Menus.
 	/**
 	 * @param {wp.Backbone.View} view
 	 */
 	mainMenu: function( view ) {
 		view.set({
 			'library-separator': new wp.media.View({
-				className: 'separator',
+				className:  'separator',
-				priority: 100
+				priority:   100,
+				attributes: {
+					role: 'presentation'
+				}
 			})
 		});
 	},
 	menuItemVisibility: function( state, visibility ) {
 						frame.setState( previous );
 					} else {
 						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();
 				}
 			},
 			separateCancel: new wp.media.View({
 				className: 'separator',
 					if ( previous ) {
 						frame.setState( previous );
 					} else {
 						frame.close();
 					}
+					// Move focus to the modal after canceling an Audio Playlist.
+					this.controller.modal.focusManager.focus();
 				}
 			},
 			separateCancel: new wp.media.View({
 				className: 'separator',
 				priority: 40
 					if ( previous ) {
 						frame.setState( previous );
 					} else {
 						frame.close();
 					}
+					// Move focus to the modal after canceling a Video Playlist.
+					this.controller.modal.focusManager.focus();
 				}
 			},
 			separateCancel: new wp.media.View({
 				className: 'separator',
 				priority: 40
 			})
 		});
 	},
-	// Content
+	// Content.
 	embedContent: function() {
 		var view = new wp.media.view.Embed({
 			controller: this,
 			model:      this.state()
 		}).render();
 		this.content.set( view );
-		if ( ! wp.media.isTouchDevice ) {
-			view.url.focus();
-		}
 	},
 	editSelectionContent: function() {
 		var state = this.state(),
 			selection = state.get('selection'),
 			text:     l10n.returnToLibrary,
 			priority: -100,
 			click: function() {
 				this.controller.content.mode('browse');
+				// Move focus to the modal when jumping back from Edit Selection to Add Media view.
+				this.controller.modal.focusManager.focus();
 			}
 		});
 		// Browse our library of attachments.
 		this.content.set( view );
-		// Trigger the controller to set focus
+		// Trigger the controller to set focus.
 		this.trigger( 'edit:selection', this );
 	},
 	editImageContent: function() {
 		var image = this.state().get('image'),
 			view = new wp.media.view.EditImage( { model: image, controller: this } ).render();
 		this.content.set( view );
-		// after creating the wrapper view, load the actual editor via an ajax call
+		// After creating the wrapper view, load the actual editor via an Ajax call.
 		view.loadEditor();
 	},
-	// Toolbars
+	// Toolbars.
 	/**
 	 * @param {wp.Backbone.View} view
 	 */
 	selectionStatusToolbar: function( view ) {
 				edit.set( 'library', new wp.media.model.Selection( models, {
 					props:    selection.props.toJSON(),
 					multiple: true
 				}) );
-				this.controller.setState('gallery-edit');
+				// Jump to Edit Gallery view.
+				this.controller.setState( 'gallery-edit' );
-				// Keep focus inside media modal
-				// after jumping to gallery view
+				// Move focus to the modal after jumping to Edit Gallery view.
 				this.controller.modal.focusManager.focus();
 			}
 		});
 	},
 				edit.set( 'library', new wp.media.model.Selection( models, {
 					props:    selection.props.toJSON(),
 					multiple: true
 				}) );
-				this.controller.setState('playlist-edit');
+				// Jump to Edit Audio Playlist view.
+				this.controller.setState( 'playlist-edit' );
-				// Keep focus inside media modal
-				// after jumping to playlist view
+				// Move focus to the modal after jumping to Edit Audio Playlist view.
 				this.controller.modal.focusManager.focus();
 			}
 		});
 	},
 				edit.set( 'library', new wp.media.model.Selection( models, {
 					props:    selection.props.toJSON(),
 					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
-				// after jumping to video playlist view
+				// Move focus to the modal after jumping to Edit Video Playlist view.
 				this.controller.modal.focusManager.focus();
 			}
 		});
 	},
 							edit = controller.state('gallery-edit');
 						edit.get('library').add( state.get('selection').models );
 						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();
 					}
 				}
 			}
 		}) );
 	},
 							edit = controller.state('playlist-edit');
 						edit.get('library').add( state.get('selection').models );
 						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();
 					}
 				}
 			}
 		}) );
 	},
 							edit = controller.state('video-playlist-edit');
 						edit.get('library').add( state.get('selection').models );
 						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();
 					}
 				}
 			}
 		}) );
 	}
 		Select.prototype.bindHandlers.apply( this, arguments );
 		this.on( 'menu:create:image-details', this.createMenu, this );
 		this.on( 'content:create:image-details', this.imageDetailsContent, this );
 		this.on( 'content:render:edit-image', this.editImageContent, this );
 		this.on( 'toolbar:render:image-details', this.renderImageDetailsToolbar, this );
-		// override the select toolbar
+		// Override the select toolbar.
 		this.on( 'toolbar:render:replace', this.renderReplaceImageToolbar, this );
 	},
 	createStates: function() {
 		this.states.add([
 		view = new wp.media.view.EditImage( { model: model, controller: this } ).render();
 		this.content.set( view );
-		// after bringing in the frame, load the actual editor via an ajax call
+		// After bringing in the frame, load the actual editor via an Ajax call.
 		view.loadEditor();
 	},
 	renderImageDetailsToolbar: function() {
 						var controller = this.controller,
 							state = controller.state();
 						controller.close();
-						// not sure if we want to use wp.media.string.image which will create a shortcode or
+						// Not sure if we want to use wp.media.string.image which will create a shortcode or
-						// perhaps wp.html.string to at least to build the <img />
+						// perhaps wp.html.string to at least to build the <img />.
 						state.trigger( 'update', controller.image.toJSON() );
 						// Restore and reset the default state.
 						controller.setState( controller.options.state );
 						controller.reset();
 		this.toolbar.set( new wp.media.view.Toolbar({
 			controller: this,
 			items: {
 				back: {
 					text:     l10n.back,
-					priority: 20,
+					priority: 80,
 					click:    function() {
 						if ( previous ) {
 							frame.setState( previous );
 						} else {
 							frame.close();
 				},
 				replace: {
 					style:    'primary',
 					text:     l10n.replace,
-					priority: 80,
+					priority: 20,
 					requires: { selection: true },
 					click: function() {
 						var controller = this.controller,
 							state = controller.state(),
 						controller.close();
 						controller.image.changeAttachment( attachment, state.display( attachment ) );
-						// not sure if we want to use wp.media.string.image which will create a shortcode or
+						// Not sure if we want to use wp.media.string.image which will create a shortcode or
-						// perhaps wp.html.string to at least to build the <img />
+						// perhaps wp.html.string to at least to build the <img />.
 						state.trigger( 'replace', controller.image.toJSON() );
 						// Restore and reset the default state.
 						controller.setState( controller.options.state );
 						controller.reset();
 		this.focusManager = new wp.media.view.FocusManager({
 			el: this.el
 		});
 	},
 	/**
-	 * @returns {Object}
+	 * @return {Object}
 	 */
 	prepare: function() {
 		return {
 			title:          this.options.title,
 			hasCloseButton: this.options.hasCloseButton
 		};
 	},
 	/**
-	 * @returns {wp.media.view.Modal} Returns itself to allow chaining
+	 * @return {wp.media.view.Modal} Returns itself to allow chaining.
 	 */
 	attach: function() {
 		if ( this.views.attached ) {
 			return this;
 		}
 		return this.propagate('attach');
 	},
 	/**
-	 * @returns {wp.media.view.Modal} Returns itself to allow chaining
+	 * @return {wp.media.view.Modal} Returns itself to allow chaining.
 	 */
 	detach: function() {
 		if ( this.$el.is(':visible') ) {
 			this.close();
 		}
 		this.views.attached = false;
 		return this.propagate('detach');
 	},
 	/**
-	 * @returns {wp.media.view.Modal} Returns itself to allow chaining
+	 * @return {wp.media.view.Modal} Returns itself to allow chaining.
 	 */
 	open: function() {
 		var $el = this.$el,
 			mceEditor;
 		// Disable page scrolling.
 		$( 'body' ).addClass( 'modal-open' );
 		$el.show();
-		// Try to close the onscreen keyboard
+		// Try to close the onscreen keyboard.
 		if ( 'ontouchend' in document ) {
 			if ( ( mceEditor = window.tinymce && window.tinymce.activeEditor ) && ! mceEditor.isHidden() && mceEditor.iframeElement ) {
 				mceEditor.iframeElement.focus();
 				mceEditor.iframeElement.blur();
 		return this.propagate('open');
 	},
 	/**
 	 * @param {Object} options
-	 * @returns {wp.media.view.Modal} Returns itself to allow chaining
+	 * @return {wp.media.view.Modal} Returns itself to allow chaining.
 	 */
 	close: function( options ) {
 		if ( ! this.views.attached || ! this.$el.is(':visible') ) {
 			return this;
 		}
 		// Enable page scrolling.
 		$( 'body' ).removeClass( 'modal-open' );
-		// 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' );
 		/*
 		 * Make visible again to assistive technologies all body children that
 		 * have been made hidden when the modal opened.
 		 */
 		this.focusManager.removeAriaHiddenFromBodyChildren();
-		// 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' )
 				.focus();
 		}
 		}
 		return this;
 	},
 	/**
-	 * @returns {wp.media.view.Modal} Returns itself to allow chaining
+	 * @return {wp.media.view.Modal} Returns itself to allow chaining.
 	 */
 	escape: function() {
 		return this.close({ escape: true });
 	},
 	/**
 		this.escape();
 	},
 	/**
 	 * @param {Array|Object} content Views to register to '.media-modal-content'
-	 * @returns {wp.media.view.Modal} Returns itself to allow chaining
+	 * @return {wp.media.view.Modal} Returns itself to allow chaining.
 	 */
 	content: function( content ) {
 		this.views.set( '.media-modal-content', content );
 		return this;
 	},
 	/**
 	 * Triggers a modal event and if the `propagate` option is set,
 	 * forwards events to the modal's controller.
 	 *
 	 * @param {string} id
-	 * @returns {wp.media.view.Modal} Returns itself to allow chaining
+	 * @return {wp.media.view.Modal} Returns itself to allow chaining.
 	 */
 	propagate: function( id ) {
 		this.trigger( id );
 		if ( this.options.propagate ) {
 /***/ }),
 /* 56 */
 /***/ (function(module, exports) {
+var $ = jQuery;
 /**
 * wp.media.view.FocusManager
 *
 * @memberOf wp.media.view
 * @augments Backbone.View
 */
 var FocusManager = wp.media.View.extend(/** @lends wp.media.view.FocusManager.prototype */{
 	events: {
-		'keydown': 'constrainTabbing'
+		'keydown': 'focusManagementMode'
 	},
 	/**
-	 * Moves focus to the first visible menu item in the modal.
+	 * Initializes the Focus Manager.
+	 *
+	 * @param {Object} options The Focus Manager options.
+	 *
+	 * @since 5.3.0
+	 *
+	 * @return {void}
+	 */
+	initialize: function( options ) {
+		this.mode                    = options.mode || 'constrainTabbing';
+		this.tabsAutomaticActivation = options.tabsAutomaticActivation || false;
+	},
+	/**
+	 * Determines which focus management mode to use.
+	 *
+	 * @since 5.3.0
+	 *
+	 * @param {Object} event jQuery event object.
+	 *
+	 * @return {void}
+	 */
+	focusManagementMode: function( event ) {
+		if ( this.mode === 'constrainTabbing' ) {
+			this.constrainTabbing( event );
+		}
+		if ( this.mode === 'tabsNavigation' ) {
+			this.tabsNavigation( event );
+		}
+	},
+	/**
+	 * Gets all the tabbable elements.
+	 *
+	 * @since 5.3.0
+	 *
+	 * @return {Object} A jQuery collection of 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.
 	 *
 	 * @since 3.5.0
 	 *
-	 * @returns {void}
+	 * @return {void}
 	 */
 	focus: function() {
-		this.$( '.media-menu-item' ).filter( ':visible' ).first().focus();
+		this.$( '.media-modal' ).focus();
 	},
 	/**
 	 * Constrains navigation with the Tab key within the media view element.
 	 *
 	 * @since 4.0.0
 	 *
 	 * @param {Object} event A keydown jQuery event.
 	 *
-	 * @returns {void}
+	 * @return {void}
 	 */
 	constrainTabbing: function( event ) {
 		var tabbables;
 		// Look for the tab key.
 		if ( 9 !== event.keyCode ) {
 			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 ) {
 			tabbables.first().focus();
 			return false;
 		} else if ( tabbables.first()[0] === event.target && event.shiftKey ) {
 			tabbables.last().focus();
 			return false;
 		}
 	},
 	/**
-	 * Hides from assistive technologies all the body children except the
+	 * Hides from assistive technologies all the body children.
-	 * provided element and other elements that should not be hidden.
+	 *
+	 * Sets an `aria-hidden="true"` attribute on all the body children except
+	 * the provided element and other elements that should not be hidden.
 	 *
 	 * The reason why we use `aria-hidden` is that `aria-modal="true"` is buggy
-	 * in Safari 11.1 and support is spotty in other browsers. In the future we
+	 * in Safari 11.1 and support is spotty in other browsers. Also, `aria-modal="true"`
-	 * should consider to remove this helper function and only use `aria-modal="true"`.
+	 * prevents the `wp.a11y.speak()` ARIA live regions to work as they're outside
+	 * of the modal dialog and get hidden from assistive technologies.
 	 *
 	 * @since 5.2.3
 	 *
-	 * @param {object} visibleElement The jQuery object representing the element that should not be hidden.
+	 * @param {Object} visibleElement The jQuery object representing the element that should not be hidden.
 	 *
-	 * @returns {void}
+	 * @return {void}
 	 */
 	setAriaHiddenOnBodyChildren: function( visibleElement ) {
 		var bodyChildren,
 			self = this;
 		this.isBodyAriaHidden = true;
 	},
 	/**
-	 * Makes visible again to assistive technologies all body children
+	 * Unhides from assistive technologies all the body children.
+	 *
+	 * Makes visible again to assistive technologies all the body children
 	 * previously hidden and stored in this.ariaHiddenElements.
 	 *
 	 * @since 5.2.3
 	 *
-	 * @returns {void}
+	 * @return {void}
 	 */
 	removeAriaHiddenFromBodyChildren: function() {
 		_.each( this.ariaHiddenElements, function( element ) {
 			element.removeAttribute( 'aria-hidden' );
 		} );
 	/**
 	 * Determines if the passed element should not be hidden from assistive technologies.
 	 *
 	 * @since 5.2.3
 	 *
-	 * @param {object} element The DOM element that should be checked.
+	 * @param {Object} element The DOM element that should be checked.
 	 *
-	 * @returns {boolean} Whether the element should not be hidden from assistive technologies.
+	 * @return {boolean} Whether the element should not be hidden from assistive technologies.
 	 */
 	elementShouldBeHidden: function( element ) {
 		var role = element.getAttribute( 'role' ),
 			liveRegionsRoles = [ 'alert', 'status', 'log', 'marquee', 'timer' ];
 	 * Stores an array of DOM elements that should be hidden from assistive
 	 * technologies, for example when the media modal dialog opens.
 	 *
 	 * @since 5.2.3
 	 */
-	ariaHiddenElements: []
+	ariaHiddenElements: [],
+	/**
+	 * Holds the jQuery collection of ARIA tabs.
+	 *
+	 * @since 5.3.0
+	 */
+	tabs: $(),
+	/**
+	 * Sets up tabs in an ARIA tabbed interface.
+	 *
+	 * @since 5.3.0
+	 *
+	 * @param {Object} event jQuery event object.
+	 *
+	 * @return {void}
+	 */
+	setupAriaTabs: function() {
+		this.tabs = this.$( '[role="tab"]' );
+		// Set up initial attributes.
+		this.tabs.attr( {
+			'aria-selected': 'false',
+			tabIndex: '-1'
+		} );
+		// Set up attributes on the initially active tab.
+		this.tabs.filter( '.active' )
+			.removeAttr( 'tabindex' )
+			.attr( 'aria-selected', 'true' );
+	},
+	/**
+	 * Enables arrows navigation within the ARIA tabbed interface.
+	 *
+	 * @since 5.3.0
+	 *
+	 * @param {Object} event jQuery event object.
+	 *
+	 * @return {void}
+	 */
+	tabsNavigation: function( event ) {
+		var orientation = 'horizontal',
+			keys = [ 32, 35, 36, 37, 38, 39, 40 ];
+		// Return if not Spacebar, End, Home, or Arrow keys.
+		if ( keys.indexOf( event.which ) === -1 ) {
+			return;
+		}
+		// Determine navigation direction.
+		if ( this.$el.attr( 'aria-orientation' ) === 'vertical' ) {
+			orientation = 'vertical';
+		}
+		// Make Up and Down arrow keys do nothing with horizontal tabs.
+		if ( orientation === 'horizontal' && [ 38, 40 ].indexOf( event.which ) !== -1 ) {
+			return;
+		}
+		// Make Left and Right arrow keys do nothing with vertical tabs.
+		if ( orientation === 'vertical' && [ 37, 39 ].indexOf( event.which ) !== -1 ) {
+			return;
+		}
+		this.switchTabs( event, this.tabs );
+	},
+	/**
+	 * Switches tabs in the ARIA tabbed interface.
+	 *
+	 * @since 5.3.0
+	 *
+	 * @param {Object} event jQuery event object.
+	 *
+	 * @return {void}
+	 */
+	switchTabs: function( event ) {
+		var key   = event.which,
+			index = this.tabs.index( $( event.target ) ),
+			newIndex;
+		switch ( key ) {
+			// Space bar: Activate current targeted tab.
+			case 32: {
+				this.activateTab( this.tabs[ index ] );
+				break;
+			}
+			// End key: Activate last tab.
+			case 35: {
+				event.preventDefault();
+				this.activateTab( this.tabs[ this.tabs.length - 1 ] );
+				break;
+			}
+			// Home key: Activate first tab.
+			case 36: {
+				event.preventDefault();
+				this.activateTab( this.tabs[ 0 ] );
+				break;
+			}
+			// Left and up keys: Activate previous tab.
+			case 37:
+			case 38: {
+				event.preventDefault();
+				newIndex = ( index - 1 ) < 0 ? this.tabs.length - 1 : index - 1;
+				this.activateTab( this.tabs[ newIndex ] );
+				break;
+			}
+			// Right and down keys: Activate next tab.
+			case 39:
+			case 40: {
+				event.preventDefault();
+				newIndex = ( index + 1 ) === this.tabs.length ? 0 : index + 1;
+				this.activateTab( this.tabs[ newIndex ] );
+				break;
+			}
+		}
+	},
+	/**
+	 * Sets a single tab to be focusable and semantically selected.
+	 *
+	 * @since 5.3.0
+	 *
+	 * @param {Object} tab The tab DOM element.
+	 *
+	 * @return {void}
+	 */
+	activateTab: function( tab ) {
+		if ( ! tab ) {
+			return;
+		}
+		// The tab is a DOM element: no need for jQuery methods.
+		tab.focus();
+		// Handle automatic activation.
+		if ( this.tabsAutomaticActivation ) {
+			tab.removeAttribute( 'tabindex' );
+			tab.setAttribute( 'aria-selected', 'true' );
+			tab.click();
+			return;
+		}
+		// Handle manual activation.
+		$( tab ).on( 'click', function() {
+			tab.removeAttribute( 'tabindex' );
+			tab.setAttribute( 'aria-selected', 'true' );
+		} );
+	}
 });
 module.exports = FocusManager;
 	},
 	/**
 	 * Check browser support for drag'n'drop.
 	 *
-	 * @return Boolean
+	 * @return {boolean}
 	 */
 	browserSupport: function() {
 		var supports = false, div = document.createElement('div');
 		supports = ( 'draggable' in div ) || ( 'ondragstart' in div && 'ondrop' in div );
 	/**
 	 * When a file is dropped on the editor uploader, open up an editor media workflow
 	 * and upload the file immediately.
 	 *
-	 * @param  {jQuery.Event} event The 'drop' event.
+	 * @param {jQuery.Event} event The 'drop' event.
 	 */
 	drop: function( event ) {
 		var $wrap, uploadView;
 		this.containerDragleave( event );
 		}
 		return data;
 	},
 	/**
-	 * @returns {wp.media.view.UploaderInline} Returns itself to allow chaining
+	 * @return {wp.media.view.UploaderInline} Returns itself to allow chaining.
 	 */
 	dispose: function() {
 		if ( this.disposing ) {
 			/**
 			 * call 'dispose' directly on the parent class
 			 */
 			return View.prototype.dispose.apply( this, arguments );
 		}
-		// Run remove on `dispose`, so we can be sure to refresh the
+		/*
-		// uploader with a view-less DOM. Track whether we're disposing
+		 * Run remove on `dispose`, so we can be sure to refresh the
-		// so we don't trigger an infinite loop.
+		 * uploader with a view-less DOM. Track whether we're disposing
+		 * so we don't trigger an infinite loop.
+		 */
 		this.disposing = true;
 		return this.remove();
 	},
 	/**
-	 * @returns {wp.media.view.UploaderInline} Returns itself to allow chaining
+	 * @return {wp.media.view.UploaderInline} Returns itself to allow chaining.
 	 */
 	remove: function() {
 		/**
 		 * call 'remove' directly on the parent class
 		 */
 		if ( uploader ) {
 			uploader.refresh();
 		}
 	},
 	/**
-	 * @returns {wp.media.view.UploaderInline}
+	 * @return {wp.media.view.UploaderInline}
 	 */
 	ready: function() {
 		var $browser = this.options.$browser,
 			$placeholder;
 		this.errors.reset();
 		this.errors.on( 'add remove reset', this.visibility, this );
 		this.errors.on( 'add', this.error, this );
 	},
 	/**
-	 * @returns {wp.media.view.UploaderStatus}
+	 * @return {wp.media.view.UploaderStatus}
 	 */
 	dispose: function() {
 		wp.Uploader.queue.off( null, null, this );
 		/**
 		 * call 'dispose' directly on the parent class
 		this.$total.text( queue.length );
 		this.$filename.html( active ? this.filename( active.get('filename') ) : '' );
 	},
 	/**
 	 * @param {string} filename
-	 * @returns {string}
+	 * @return {string}
 	 */
 	filename: function( filename ) {
 		return _.escape( filename );
 	},
 	/**
 	 * @param {Backbone.Model} error
 	 */
 	error: function( error ) {
-		this.views.add( '.upload-errors', new wp.media.view.UploaderStatusError({
+		var statusError = new wp.media.view.UploaderStatusError( {
-			filename: this.filename( error.get('file').name ),
+			filename: this.filename( error.get( 'file' ).name ),
-			message:  error.get('message')
+			message:  error.get( 'message' )
-		}), { at: 0 });
+		} );
+		// Can show additional info here while retrying to create image sub-sizes.
+		this.views.add( '.upload-errors', statusError, { at: 0 } );
 	},
 	dismiss: function() {
 		var errors = this.views.get('.upload-errors');
 		if ( errors ) {
 			_.invoke( errors, 'remove' );
 		}
 		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();
+		if ( this.controller.modal ) {
+			this.controller.modal.focusManager.focus();
+		}
 	}
 });
 module.exports = UploaderStatus;
 		if ( library ) {
 			library.on( 'add remove reset', this.refresh, this );
 		}
 	},
 	/**
-	 * @returns {wp.media.view.Toolbar} Returns itsef to allow chaining
+	 * @return {wp.media.view.Toolbar} Returns itsef to allow chaining
 	 */
 	dispose: function() {
 		if ( this.selection ) {
 			this.selection.off( null, null, this );
 		}
 	/**
 	 * @param {string} id
 	 * @param {Backbone.View|Object} view
 	 * @param {Object} [options={}]
-	 * @returns {wp.media.view.Toolbar} Returns itself to allow chaining
+	 * @return {wp.media.view.Toolbar} Returns itself to allow chaining.
 	 */
 	set: function( id, view, options ) {
 		var list;
 		options = options || {};
 		return this;
 	},
 	/**
 	 * @param {string} id
-	 * @returns {wp.media.view.Button}
+	 * @return {wp.media.view.Button}
 	 */
 	get: function( id ) {
 		return this._views[ id ];
 	},
 	/**
 	 * @param {string} id
 	 * @param {Object} options
-	 * @returns {wp.media.view.Toolbar} Returns itself to allow chaining
+	 * @return {wp.media.view.Toolbar} Returns itself to allow chaining.
 	 */
 	unset: function( id, options ) {
 		delete this._views[ id ];
 		this.primary.unset( id, options );
 		this.secondary.unset( id, options );
 			}
 			var requires = button.options.requires,
 				disabled = false;
-			// Prevent insertion of attachments if any of them are still uploading
+			// Prevent insertion of attachments if any of them are still uploading.
 			if ( selection && selection.models ) {
 				disabled = _.some( selection.models, function( attachment ) {
 					return attachment.get('uploading') === true;
 				});
 			}
 		}, this );
 		this.listenTo( this.model, 'change', this.render );
 	},
 	/**
-	 * @returns {wp.media.view.Button} Returns itself to allow chaining
+	 * @return {wp.media.view.Button} Returns itself to allow chaining.
 	 */
 	render: function() {
 		var classes = [ 'button', this.className ],
 			model = this.model.toJSON();
 			this.$el.addClass( this.options.classes );
 		}
 	},
 	/**
-	 * @returns {wp.media.view.ButtonGroup}
+	 * @return {wp.media.view.ButtonGroup}
 	 */
 	render: function() {
 		this.$el.html( $( _.pluck( this.buttons, 'el' ) ).detach() );
 		return this;
 	}
 	},
 	/**
 	 * @param {string} id
 	 * @param {wp.media.View|Object} view
 	 * @param {Object} options
-	 * @returns {wp.media.view.PriorityList} Returns itself to allow chaining
+	 * @return {wp.media.view.PriorityList} Returns itself to allow chaining.
 	 */
 	set: function( id, view, options ) {
 		var priority, views, index;
 		options = options || {};
 		return this;
 	},
 	/**
 	 * @param {string} id
-	 * @returns {wp.media.View}
+	 * @return {wp.media.View}
 	 */
 	get: function( id ) {
 		return this._views[ id ];
 	},
 	/**
 	 * @param {string} id
-	 * @returns {wp.media.view.PriorityList}
+	 * @return {wp.media.view.PriorityList}
 	 */
 	unset: function( id ) {
 		var view = this.get( id );
 		if ( view ) {
 		delete this._views[ id ];
 		return this;
 	},
 	/**
 	 * @param {Object} options
-	 * @returns {wp.media.View}
+	 * @return {wp.media.View}
 	 */
 	toView: function( options ) {
 		return new wp.media.View( options );
 	}
 });
 /***/ }),
 /* 68 */
 /***/ (function(module, exports) {
-var $ = jQuery,
+var MenuItem;
-	MenuItem;
 /**
 * wp.media.view.MenuItem
 *
 * @memberOf wp.media.view
 * @augments wp.media.View
 * @augments wp.Backbone.View
 * @augments Backbone.View
 */
 MenuItem = wp.media.View.extend(/** @lends wp.media.view.MenuItem.prototype */{
-	tagName:   'a',
+	tagName:   'button',
 	className: 'media-menu-item',
 	attributes: {
-		href: '#'
+		type: 'button',
+		role: 'tab'
 	},
 	events: {
 		'click': '_click'
 	},
-	/**
-	 * @param {Object} event
+	/**
-	 */
+	 * Allows to override the click event.
-	_click: function( event ) {
+	 */
+	_click: function() {
 		var clickOverride = this.options.click;
-		if ( event ) {
-			event.preventDefault();
-		}
 		if ( clickOverride ) {
 			clickOverride.call( this );
 		} else {
 			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() {
 		var state = this.options.state;
 		if ( state ) {
 			this.controller.setState( state );
-			this.views.parent.$el.removeClass( 'visible' ); // TODO: or hide on any click, see below
+			// Toggle the menu visibility in the responsive view.
-		}
+			this.views.parent.$el.removeClass( 'visible' ); // @todo Or hide on any click, see below.
-	},
+		}
-	/**
+	},
-	 * @returns {wp.media.view.MenuItem} returns itself to allow chaining
+	/**
+	 * @return {wp.media.view.MenuItem} returns itself to allow chaining.
 	 */
 	render: function() {
-		var options = this.options;
+		var options = this.options,
+			menuProperty = options.state || options.contentMode;
 		if ( options.text ) {
 			this.$el.text( options.text );
 		} else if ( options.html ) {
 			this.$el.html( options.html );
 		}
+		// Set the menu item ID based on the frame state associated to the menu item.
+		this.$el.attr( 'id', 'menu-item-' + menuProperty );
 		return this;
 	}
 });
 	className: 'media-menu',
 	property:  'state',
 	ItemView:  MenuItem,
 	region:    'menu',
-	/* TODO: alternatively hide on any click anywhere
+	attributes: {
-	events: {
+		role:               'tablist',
-		'click': 'click'
+		'aria-orientation': 'horizontal'
 	},
-	click: function() {
+	initialize: function() {
-		this.$el.removeClass( 'visible' );
+		this._views = {};
-	},
-	*/
+		this.set( _.extend( {}, this._views, this.options.views ), { silent: true });
+		delete this.options.views;
+		if ( ! this.options.silent ) {
+			this.render();
+		}
+		// Initialize the Focus Manager.
+		this.focusManager = new wp.media.view.FocusManager( {
+			el:   this.el,
+			mode: 'tabsNavigation'
+		} );
+		// The menu is always rendered and can be visible or hidden on some frames.
+		this.isVisible = true;
+	},
 	/**
 	 * @param {Object} options
 	 * @param {string} id
-	 * @returns {wp.media.View}
+	 * @return {wp.media.View}
 	 */
 	toView: function( options, id ) {
 		options = options || {};
 		options[ this.property ] = options[ this.property ] || id;
 		return new this.ItemView( options ).render();
 		/**
 		 * call 'ready' directly on the parent class
 		 */
 		PriorityList.prototype.ready.apply( this, arguments );
 		this.visibility();
+		// Set up aria tabs initial attributes.
+		this.focusManager.setupAriaTabs();
 	},
 	set: function() {
 		/**
 		 * call 'set' directly on the parent class
 			view = this.controller[ region ].get(),
 			views = this.views.get(),
 			hide = ! views || views.length < 2;
 		if ( this === view ) {
+			// Flag this menu as hidden or visible.
+			this.isVisible = ! hide;
+			// Set or remove a CSS class to hide the menu.
 			this.controller.$el.toggleClass( 'hide-' + region, hide );
 		}
 	},
 	/**
 	 * @param {string} id
 			return;
 		}
 		this.deselect();
 		view.$el.addClass('active');
+		// Set up again the aria tabs initial attributes after the menu updates.
+		this.focusManager.setupAriaTabs();
 	},
 	deselect: function() {
 		this.$el.children().removeClass('active');
 	},
 	className: 'media-router',
 	property:  'contentMode',
 	ItemView:  wp.media.view.RouterItem,
 	region:    'router',
+	attributes: {
+		role:               'tablist',
+		'aria-orientation': 'horizontal'
+	},
 	initialize: function() {
 		this.controller.on( 'content:render', this.update, this );
 		// Call 'initialize' directly on the parent class.
 		Menu.prototype.initialize.apply( this, arguments );
 	},
 			// Update the model's details view.
 			this.listenTo( this.model, 'selection:single selection:unsingle', this.details );
 			this.details( this.model, this.controller.state().get('selection') );
 		}
-		this.listenTo( this.controller, 'attachment:compat:waiting attachment:compat:ready', this.updateSave );
+		this.listenTo( this.controller.states, 'attachment:compat:waiting attachment:compat:ready', this.updateSave );
 	},
 	/**
-	 * @returns {wp.media.view.Attachment} Returns itself to allow chaining
+	 * @return {wp.media.view.Attachment} Returns itself to allow chaining.
 	 */
 	dispose: function() {
 		var selection = this.options.selection;
 		// Make sure all settings are saved before removing the view.
 		 */
 		View.prototype.dispose.apply( this, arguments );
 		return this;
 	},
 	/**
-	 * @returns {wp.media.view.Attachment} Returns itself to allow chaining
+	 * @return {wp.media.view.Attachment} Returns itself to allow chaining.
 	 */
 	render: function() {
 		var options = _.defaults( this.model.toJSON(), {
 				orientation:   'landscape',
 				uploading:     false,
 		// Don't do anything inside inputs and on the attachment check and remove buttons.
 		if ( 'INPUT' === event.target.nodeName || 'BUTTON' === event.target.nodeName ) {
 			return;
 		}
-		// Catch arrow events
+		// Catch arrow events.
 		if ( 37 === event.keyCode || 38 === event.keyCode || 39 === event.keyCode || 40 === event.keyCode ) {
 			this.controller.trigger( 'attachment:keydown:arrow', event );
 			return;
 		}
-		// Catch enter and space events
+		// Catch enter and space events.
 		if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) {
 			return;
 		}
 		event.preventDefault();
 		// In the grid view, bubble up an edit:attachment event to the controller.
 		if ( this.controller.isModeActive( 'grid' ) ) {
 			if ( this.controller.isModeActive( 'edit' ) ) {
-				// Pass the current target to restore focus when closing
+				// Pass the current target to restore focus when closing.
 				this.controller.trigger( 'edit:attachment', this.model, event.currentTarget );
 				return;
 			}
 			if ( this.controller.isModeActive( 'select' ) ) {
 			selection.add( model );
 			selection.single( model );
 			return;
 		}
-		// Fixes bug that loses focus when selecting a featured image
+		// Fixes bug that loses focus when selecting a featured image.
 		if ( ! method ) {
 			method = 'add';
 		}
 		if ( method !== 'add' ) {
 			method = 'reset';
 		}
 		if ( this.selected() ) {
-			// If the model is the single model, remove it.
+			/*
-			// If it is not the same as the single model,
+			 * If the model is the single model, remove it.
-			// it now becomes the single model.
+			 * If it is not the same as the single model,
+			 * it now becomes the single model.
+			 */
 			selection[ single === model ? 'remove' : 'single' ]( model );
 		} else {
-			// If the model is not selected, run the `method` on the
+			/*
-			// selection. By default, we `reset` the selection, but the
+			 * If the model is not selected, run the `method` on the
-			// `method` can be set to `add` the model to the selection.
+			 * selection. By default, we `reset` the selection, but the
+			 * `method` can be set to `add` the model to the selection.
+			 */
 			selection[ method ]( model );
 			selection.single( model );
 		}
 	},
 	updateSelect: function() {
 		this[ this.selected() ? 'select' : 'deselect' ]();
 	},
 	/**
-	 * @returns {unresolved|Boolean}
+	 * @return {unresolved|boolean}
 	 */
 	selected: function() {
 		var selection = this.options.selection;
 		if ( selection ) {
 			return !! selection.get( this.model.cid );
 	 */
 	select: function( model, collection ) {
 		var selection = this.options.selection,
 			controller = this.controller;
-		// Check if a selection exists and if it's the collection provided.
+		/*
-		// If they're not the same collection, bail; we're in another
+		 * Check if a selection exists and if it's the collection provided.
-		// selection's event loop.
+		 * If they're not the same collection, bail; we're in another
+		 * selection's event loop.
+		 */
 		if ( ! selection || ( collection && collection !== selection ) ) {
 			return;
 		}
 		// Bail if the model is already selected.
 	 * @param {Backbone.Collection} collection
 	 */
 	deselect: function( model, collection ) {
 		var selection = this.options.selection;
-		// Check if a selection exists and if it's the collection provided.
+		/*
-		// If they're not the same collection, bail; we're in another
+		 * Check if a selection exists and if it's the collection provided.
-		// selection's event loop.
+		 * If they're not the same collection, bail; we're in another
+		 * selection's event loop.
+		 */
 		if ( ! selection || ( collection && collection !== selection ) ) {
 			return;
 		}
 		this.$el.removeClass( 'selected' ).attr( 'aria-checked', false )
 			.find( '.check' ).attr( 'tabindex', '-1' );
 		details = selection.single();
 		this.$el.toggleClass( 'details', details === this.model );
 	},
 	/**
 	 * @param {string} size
-	 * @returns {Object}
+	 * @return {Object}
 	 */
 	imageSize: function( size ) {
 		var sizes = this.model.get('sizes'), matched = false;
 		size = size || 'medium';
 			}, 2000 );
 		});
 	},
 	/**
 	 * @param {string} status
-	 * @returns {wp.media.view.Attachment} Returns itself to allow chaining
+	 * @return {wp.media.view.Attachment} Returns itself to allow chaining.
 	 */
 	updateSave: function( status ) {
 		var save = this._save = this._save || { status: 'ready' };
 		if ( status && status !== save.status ) {
 	},
 	/**
 	 * @param {Object} event
 	 */
 	removeFromLibrary: function( event ) {
-		// Catch enter and space events
+		// Catch enter and space events.
 		if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) {
 			return;
 		}
 		// Stop propagation so the model isn't selected.
 	/**
 	 * Add the model if it isn't in the selection, if it is in the selection,
 	 * remove it.
 	 *
-	 * @param  {[type]} event [description]
+	 * @param {[type]} event [description]
-	 * @return {[type]}       [description]
+	 * @return {[type]} [description]
 	 */
 	checkClickHandler: function ( event ) {
 		var selection = this.options.selection;
 		if ( ! selection ) {
 			return;
 	 * @memberOf wp.media.view.Attachment
 	 * @instance
 	 *
 	 * @param {Backbone.Model} model
 	 * @param {string} value
-	 * @returns {wp.media.view.Attachment} Returns itself to allow chaining
+	 * @return {wp.media.view.Attachment} Returns itself to allow chaining.
 	 */
 	/**
 	 * @function _syncTitle
 	 * @memberOf wp.media.view.Attachment
 	 * @instance
 	 *
 	 * @param {Backbone.Model} model
 	 * @param {string} value
-	 * @returns {wp.media.view.Attachment} Returns itself to allow chaining
+	 * @return {wp.media.view.Attachment} Returns itself to allow chaining.
 	 */
 	/**
 	 * @function _syncArtist
 	 * @memberOf wp.media.view.Attachment
 	 * @instance
 	 *
 	 * @param {Backbone.Model} model
 	 * @param {string} value
-	 * @returns {wp.media.view.Attachment} Returns itself to allow chaining
+	 * @return {wp.media.view.Attachment} Returns itself to allow chaining.
 	 */
 	/**
 	 * @function _syncAlbum
 	 * @memberOf wp.media.view.Attachment
 	 * @instance
 	 *
 	 * @param {Backbone.Model} model
 	 * @param {string} value
-	 * @returns {wp.media.view.Attachment} Returns itself to allow chaining
+	 * @return {wp.media.view.Attachment} Returns itself to allow chaining.
 	 */
 	Attachment.prototype[ method ] = function( model, value ) {
 		var $setting = this.$('[data-setting="' + setting + '"]');
 		if ( ! $setting.length ) {
 			return this;
 		}
-		// If the updated value is in sync with the value in the DOM, there
+		/*
-		// is no need to re-render. If we're currently editing the value,
+		 * If the updated value is in sync with the value in the DOM, there
-		// it will automatically be in sync, suppressing the re-render for
+		 * is no need to re-render. If we're currently editing the value,
-		// the view we're editing, while updating any others.
+		 * it will automatically be in sync, suppressing the re-render for
+		 * the view we're editing, while updating any others.
+		 */
 		if ( value === $setting.find('input, textarea, select, [value]').val() ) {
 			return this;
 		}
 		return 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.
 		this.scroll = _.chain( this.scroll ).bind( this ).throttle( this.options.refreshSensitivity ).value();
 		this.options.scrollElement = this.options.scrollElement || this.el;
 	 *
 	 * @since 4.0.0
 	 *
 	 * @listens window:resize
 	 *
-	 * @returns {void}
+	 * @return {void}
 	 */
 	bindEvents: function() {
 		this.$window.off( this.resizeEvent ).on( this.resizeEvent, _.debounce( this.setColumns, 50 ) );
 	},
 	/**
 	 * Focuses the first item in the collection.
 	 *
 	 * @since 4.0.0
 	 *
-	 * @returns {void}
+	 * @return {void}
 	 */
 	attachmentFocus: function() {
-		this.$( 'li:first' ).focus();
+		/*
+		 * @todo When uploading new attachments, this tries to move focus to
+		 * the attachments 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
 	 *
-	 * @returns {void}
+	 * @return {void}
 	 */
 	restoreFocus: function() {
 		this.$( 'li.selected:first' ).focus();
 	},
 	 *
 	 * @since 4.0.0
 	 *
 	 * @param {KeyboardEvent} event The keyboard event that triggered this function.
 	 *
-	 * @returns {void}
+	 * @return {void}
 	 */
 	arrowEvent: function( event ) {
 		var attachments = this.$el.children( 'li' ),
 			perRow = this.columns,
 			index = attachments.filter( ':focus' ).index(),
 	/**
 	 * Clears any set event handlers.
 	 *
 	 * @since 3.5.0
 	 *
-	 * @returns {void}
+	 * @return {void}
 	 */
 	dispose: function() {
 		this.collection.props.off( null, null, this );
 		if ( this.options.resize ) {
 			this.$window.off( this.resizeEvent );
 	 * Calculates the amount of columns and sets it on the data-columns attribute
 	 * of .media-frame-content.
 	 *
 	 * @since 4.0.0
 	 *
-	 * @returns {void}
+	 * @return {void}
 	 */
 	setColumns: function() {
 		var prev = this.columns,
 			width = this.$el.width();
 	},
 	/**
 	 * Initializes jQuery sortable on the attachment list.
 	 *
-	 * Fails gracefully if jQuery sortable doesn't exist or isn't passed in the
+	 * Fails gracefully if jQuery sortable doesn't exist or isn't passed
-	 * options.
+	 * in the options.
 	 *
 	 * @since 3.5.0
 	 *
 	 * @fires collection:reset
 	 *
-	 * @returns {void}
+	 * @return {void}
 	 */
 	initSortable: function() {
 		var collection = this.collection;
 		if ( ! this.options.sortable || ! $.fn.sortable ) {
 		this.$el.sortable( _.extend({
 			// If the `collection` has a `comparator`, disable sorting.
 			disabled: !! collection.comparator,
 			/*
-			 * Change the position of the attachment as soon as the mouse pointer overlaps a
+			 * Change the position of the attachment as soon as the mouse pointer
-			 * thumbnail.
+			 * overlaps a thumbnail.
 			 */
 			tolerance: 'pointer',
 			// Record the initial `index` of the dragged model.
 			start: function( event, ui ) {
 				collection.saveMenuOrder();
 			}
 		}, this.options.sortable ) );
 		/*
-		 * If the `orderby` property is changed on the `collection`, check to see if we
+		 * If the `orderby` property is changed on the `collection`,
-		 * have a `comparator`. If so, disable sorting.
+		 * check to see if we have a `comparator`. If so, disable sorting.
 		 */
 		collection.props.on( 'change:orderby', function() {
 			this.$el.sortable( 'option', 'disabled', !! collection.comparator );
 		}, this );
 	 * Disables jQuery sortable if collection has a comparator or collection.orderby
 	 * equals menuOrder.
 	 *
 	 * @since 3.5.0
 	 *
-	 * @returns {void}
+	 * @return {void}
 	 */
 	refreshSortable: function() {
 		if ( ! this.options.sortable || ! $.fn.sortable ) {
 			return;
 		}
 	 *
 	 * @since 3.5.0
 	 *
 	 * @param {wp.media.model.Attachment} attachment
 	 *
-	 * @returns {wp.media.View} The created view.
+	 * @return {wp.media.View} The created view.
 	 */
 	createAttachmentView: function( attachment ) {
 		var view = new this.options.AttachmentView({
 			controller:           this.controller,
 			model:                attachment,
 	 * Creates views for every attachment in collection if the collection is not
 	 * empty, otherwise clears all views and loads more attachments.
 	 *
 	 * @since 3.5.0
 	 *
-	 * @returns {void}
+	 * @return {void}
 	 */
 	prepare: function() {
 		if ( this.collection.length ) {
 			this.views.set( this.collection.map( this.createAttachmentView, this ) );
 		} else {
 	 * Triggers the scroll function to check if we should query for additional
 	 * attachments right away.
 	 *
 	 * @since 3.5.0
 	 *
-	 * @returns {void}
+	 * @return {void}
 	 */
 	ready: function() {
 		this.scroll();
 	},
 	 * Shows the spinner if we're close to the bottom. Loads more attachments from
 	 * server if we're {refreshThreshold} times away from the bottom.
 	 *
 	 * @since 3.5.0
 	 *
-	 * @returns {void}
+	 * @return {void}
 	 */
 	scroll: function() {
 		var view = this,
 			el = this.options.scrollElement,
 			scrollTop = el.scrollTop,
 /***/ }),
 /* 77 */
 /***/ (function(module, exports) {
-var l10n = wp.media.view.l10n,
+var Search;
-	Search;
 /**
 * wp.media.view.Search
 *
 * @memberOf wp.media.view
 	tagName:   'input',
 	className: 'search',
 	id:        'media-search-input',
 	attributes: {
-		type:        'search',
+		type: 'search'
-		placeholder: l10n.searchMediaPlaceholder
 	},
 	events: {
-		'input':  'search',
+		'input': 'search'
-		'keyup':  'search'
+	},
-	},
+	/**
-	/**
+	 * @return {wp.media.view.Search} Returns itself to allow chaining.
-	 * @returns {wp.media.view.Search} Returns itself to allow chaining
 	 */
 	render: function() {
 		this.el.value = this.model.escape('search');
 		return this;
 	},
 	search: _.debounce( function( event ) {
-		if ( event.target.value ) {
+		var searchTerm = event.target.value.trim();
-			this.model.set( 'search', event.target.value );
+		// Trigger the search only after 2 ASCII characters.
+		if ( searchTerm && searchTerm.length > 1 ) {
+			this.model.set( 'search', searchTerm );
 		} else {
-			this.model.unset('search');
+			this.model.unset( 'search' );
 		}
-	}, 300 )
+	}, 500 )
 });
 module.exports = Search;
 		if ( this.options.sidebar && 'errors' === this.options.sidebar ) {
 			this.createSidebar();
 		}
 		/*
-		 * For accessibility reasons, place the Inline Uploader before other sections.
+		 * In the grid mode (the Media Library), place the Inline Uploader before
-		 * This way, in the Media Library, it's right after the Add New button, see ticket #37188.
+		 * other sections so that the visual order and the DOM order match. This way,
+		 * the Inline Uploader in the Media Library is right after the "Add New"
+		 * button, see ticket #37188.
 		 */
-		this.createUploader();
+		if ( this.controller.isModeActive( 'grid' ) ) {
+			this.createUploader();
-		/*
-		 * Create a multi-purpose toolbar. Used as main toolbar in the Media Library
+			/*
-		 * and also for other things, for example the "Drag and drop to reorder" and
+			 * Create a multi-purpose toolbar. Used as main toolbar in the Media Library
-		 * "Suggested dimensions" info in the media modal.
+			 * and also for other things, for example the "Drag and drop to reorder" and
-		 */
+			 * "Suggested dimensions" info in the media modal.
-		this.createToolbar();
+			 */
+			this.createToolbar();
+		} else {
+			this.createToolbar();
+			this.createUploader();
+		}
 		// Add a heading before the attachments list.
 		this.createAttachmentsHeading();
 		// Create the list of attachments.
 				this.$el.addClass( 'sidebar-for-errors' );
 			}
 		}
 		this.collection.on( 'add remove reset', this.updateContent, this );
-	},
+		// The non-cached or cached attachments query has completed.
+		this.collection.on( 'attachments:received', this.announceSearchResults, this );
+	},
+	/**
+	 * Updates the `wp.a11y.speak()` ARIA live region with a message to communicate
+	 * the number of search results to screen reader users. This function is
+	 * debounced because the collection updates multiple times.
+	 *
+	 * @since 5.3.0
+	 *
+	 * @return {void}
+	 */
+	announceSearchResults: _.debounce( function() {
+		var count;
+		if ( this.collection.mirroring.args.s ) {
+			count = this.collection.length;
+			if ( 0 === count ) {
+				wp.a11y.speak( l10n.noMediaTryNewSearch );
+				return;
+			}
+			if ( this.collection.hasMore() ) {
+				wp.a11y.speak( l10n.mediaFoundHasMoreResults.replace( '%d', count ) );
+				return;
+			}
+			wp.a11y.speak( l10n.mediaFound.replace( '%d', count ) );
+		}
+	}, 200 ),
 	editSelection: function( modal ) {
+		// When editing a selection, move focus to the "Return to library" button.
 		modal.$( '.media-button-backToLibrary' ).focus();
 	},
 	/**
-	 * @returns {wp.media.view.AttachmentsBrowser} Returns itself to allow chaining
+	 * @return {wp.media.view.AttachmentsBrowser} Returns itself to allow chaining.
 	 */
 	dispose: function() {
 		this.options.selection.off( null, null, this );
 		View.prototype.dispose.apply( this, arguments );
 		return this;
 	},
 	createToolbar: function() {
-		var LibraryViewSwitcher, Filters, toolbarOptions;
+		var LibraryViewSwitcher, Filters, toolbarOptions,
+			showFilterByType = -1 !== $.inArray( this.options.filters, [ 'uploaded', 'all' ] );
 		toolbarOptions = {
 			controller: this.controller
 		};
 		this.toolbar = new wp.media.view.Toolbar( toolbarOptions );
 		this.views.add( this.toolbar );
 		this.toolbar.set( 'spinner', new wp.media.view.Spinner({
-			priority: -60
+			priority: -20
 		}) );
-		if ( -1 !== $.inArray( this.options.filters, [ 'uploaded', 'all' ] ) ) {
+		if ( showFilterByType || this.options.date ) {
-			// "Filters" will return a <select>, need to render
+			/*
-			// screen reader text before
+			 * Create a h2 heading before the select elements that filter attachments.
+			 * This heading is visible in the modal and visually hidden in the grid.
+			 */
+			this.toolbar.set( 'filters-heading', new wp.media.view.Heading( {
+				priority:   -100,
+				text:       l10n.filterAttachments,
+				level:      'h2',
+				className:  'media-attachments-filter-heading'
+			}).render() );
+		}
+		if ( showFilterByType ) {
+			// "Filters" is a <select>, a visually hidden label element needs to be rendered before.
 			this.toolbar.set( 'filtersLabel', new wp.media.view.Label({
 				value: l10n.filterByType,
 				attributes: {
 					'for':  'media-attachment-filters'
 				},
 				this.toolbar.set( 'filters', Filters.render() );
 			}
 		}
-		// Feels odd to bring the global media library switcher into the Attachment
+		/*
-		// browser view. Is this a use case for doAction( 'add:toolbar-items:attachments-browser', this.toolbar );
+		 * Feels odd to bring the global media library switcher into the Attachment browser view.
-		// which the controller can tap into and add this view?
+		 * Is this a use case for doAction( 'add:toolbar-items:attachments-browser', this.toolbar );
+		 * which the controller can tap into and add this view?
+		 */
 		if ( this.controller.isModeActive( 'grid' ) ) {
 			LibraryViewSwitcher = View.extend({
 				className: 'view-switch media-grid-view-switch',
 				template: wp.template( 'media-library-view-switcher')
 			});
 			this.toolbar.set( 'libraryViewSwitcher', new LibraryViewSwitcher({
 				controller: this.controller,
 				priority: -90
 			}).render() );
-			// DateFilter is a <select>, screen reader text needs to be rendered before
+			// DateFilter is a <select>, a visually hidden label element needs to be rendered before.
 			this.toolbar.set( 'dateFilterLabel', new wp.media.view.Label({
 				value: l10n.filterByDate,
 				attributes: {
 					'for': 'media-attachment-date-filters'
 				},
 				controller: this.controller,
 				model:      this.collection.props,
 				priority: -75
 			}).render() );
-			// BulkSelection is a <div> with subviews, including screen reader text
+			// BulkSelection is a <div> with subviews, including screen reader text.
 			this.toolbar.set( 'selectModeToggleButton', new wp.media.view.SelectModeToggleButton({
 				text: l10n.bulkSelect,
 				controller: this.controller,
 				priority: -70
 			}).render() );
 					}
 				}).render() );
 			}
 		} else if ( this.options.date ) {
-			// DateFilter is a <select>, screen reader text needs to be rendered before
+			// DateFilter is a <select>, a visually hidden label element needs to be rendered before.
 			this.toolbar.set( 'dateFilterLabel', new wp.media.view.Label({
 				value: l10n.filterByDate,
 				attributes: {
 					'for': 'media-attachment-date-filters'
 				},
 				priority: -75
 			}).render() );
 		}
 		if ( this.options.search ) {
-			// Search is an input, screen reader text needs to be rendered before
+			// Search is an input, a visually hidden label element needs to be rendered before.
 			this.toolbar.set( 'searchLabel', new wp.media.view.Label({
-				value: l10n.searchMediaLabel,
+				value: l10n.searchLabel,
+				className: 'media-search-input-label',
 				attributes: {
 					'for': 'media-search-input'
 				},
 				priority:   60
 			}).render() );
 			// The single `Attachment` view to be used in the `Attachments` view.
 			AttachmentView: this.options.AttachmentView
 		});
-		// Add keydown listener to the instance of the Attachments view
+		// Add keydown listener to the instance of the Attachments view.
 		this.controller.on( 'attachment:keydown:arrow',     _.bind( this.attachments.arrowEvent, this.attachments ) );
 		this.controller.on( 'attachment:details:shift-tab', _.bind( this.attachments.restoreFocus, this.attachments ) );
 		this.views.add( this.attachments );
 				priority:     160,
 				userSettings: this.model.get('displayUserSettings')
 			}) );
 		}
-		// Show the sidebar on mobile
+		// Show the sidebar on mobile.
 		if ( this.model.id === 'insert' ) {
 			sidebar.$el.addClass( 'visible' );
 		}
 	},
 	disposeSingle: function() {
 		var sidebar = this.sidebar;
 		sidebar.unset('details');
 		sidebar.unset('compat');
 		sidebar.unset('display');
-		// Hide the sidebar on mobile
+		// Hide the sidebar on mobile.
 		sidebar.$el.removeClass( 'visible' );
 	}
 });
 module.exports = AttachmentsBrowser;
 /***/ }),
 /* 83 */
 /***/ (function(module, exports) {
-var l10n = wp.media.view.l10n,
+var _n = wp.i18n._n,
+	sprintf = wp.i18n.sprintf,
 	Selection;
 /**
 * wp.media.view.Selection
 *
 		// If nothing is selected, display nothing.
 		this.$el.toggleClass( 'empty', ! collection.length );
 		this.$el.toggleClass( 'one', 1 === collection.length );
 		this.$el.toggleClass( 'editing', editing );
-		this.$('.count').text( l10n.selected.replace('%d', collection.length) );
+		this.$( '.count' ).text(
+			/* translators: %s: Number of selected media attachments. */
+			sprintf( _n( '%s item selected', '%s items selected', collection.length ), collection.length )
+		);
 	},
 	edit: function( event ) {
 		event.preventDefault();
 		if ( this.options.editable ) {
 	clear: function( event ) {
 		event.preventDefault();
 		this.collection.reset();
-		// Keep focus inside media modal
+		// Move focus to the modal.
-		// after clear link is selected
 		this.controller.modal.focusManager.focus();
 	}
 });
 module.exports = Selection;
 		return _.defaults({
 			model: this.model.toJSON()
 		}, this.options );
 	},
 	/**
-	 * @returns {wp.media.view.Settings} Returns itself to allow chaining
+	 * @return {wp.media.view.Settings} Returns itself to allow chaining.
 	 */
 	render: function() {
 		View.prototype.render.apply( this, arguments );
 		// Select the correct values.
 		_( this.model.attributes ).chain().keys().each( this.update, this );
 				this.model.set( key, $setting.find(':selected').val() );
 			}
 		// Handle button groups.
 		} else if ( $setting.hasClass('button-group') ) {
-			$buttons = $setting.find('button').removeClass('active');
+			$buttons = $setting.find( 'button' )
-			$buttons.filter( '[value="' + value + '"]' ).addClass('active');
+				.removeClass( 'active' )
+				.attr( 'aria-pressed', 'false' );
+			$buttons.filter( '[value="' + value + '"]' )
+				.addClass( 'active' )
+				.attr( 'aria-pressed', 'true' );
 		// Handle text inputs and textareas.
 		} else if ( $setting.is('input[type="text"], textarea') ) {
 			if ( ! $setting.is(':focus') ) {
 				$setting.val( value );
 		// Update the corresponding setting.
 		this.model.set( $setting.data('setting'), value );
 		// If the setting has a corresponding user setting,
 		// update that as well.
-		if ( userSetting = $setting.data('userSetting') ) {
+		userSetting = $setting.data('userSetting');
+		if ( userSetting ) {
 			window.setUserSetting( userSetting, value );
 		}
 	},
 	updateChanges: function( model ) {
 		 * call 'dispose' directly on the parent class
 		 */
 		Settings.prototype.dispose.apply( this, arguments );
 	},
 	/**
-	 * @returns {wp.media.view.AttachmentDisplay} Returns itself to allow chaining
+	 * @return {wp.media.view.AttachmentDisplay} Returns itself to allow chaining.
 	 */
 	render: function() {
 		var attachment = this.options.attachment;
 		if ( attachment ) {
 			_.extend( this.options, {
 		var linkTo = this.model.get('link'),
 			$input = this.$('.link-to-custom'),
 			attachment = this.options.attachment;
 		if ( 'none' === linkTo || 'embed' === linkTo || ( ! attachment && 'custom' !== linkTo ) ) {
-			$input.addClass( 'hidden' );
+			$input.closest( '.setting' ).addClass( 'hidden' );
 			return;
 		}
 		if ( attachment ) {
 			if ( 'post' === linkTo ) {
 			}
 			$input.prop( 'readonly', 'custom' !== linkTo );
 		}
-		$input.removeClass( 'hidden' );
+		$input.closest( '.setting' ).removeClass( 'hidden' );
+		if ( $input.length ) {
-		// If the input is visible, focus and select its contents.
+			$input[0].scrollIntoView();
-		if ( ! wp.media.isTouchDevice && $input.is(':visible') ) {
-			$input.focus()[0].select();
 		}
 	}
 });
 module.exports = AttachmentDisplay;
 /***/ }),
 /* 91 */
 /***/ (function(module, exports) {
+/* global ClipboardJS */
 var Attachment = wp.media.view.Attachment,
 	l10n = wp.media.view.l10n,
-	Details;
+	$ = jQuery,
+	Details,
-/**
+	__ = wp.i18n.__;
-* wp.media.view.Attachment.Details
-*
-* @memberOf wp.media.view.Attachment
-*
-* @class
-* @augments wp.media.view.Attachment
-* @augments wp.media.View
-* @augments wp.Backbone.View
-* @augments Backbone.View
-*/
 Details = Attachment.extend(/** @lends wp.media.view.Attachment.Details.prototype */{
 	tagName:   'div',
 	className: 'attachment-details',
 	template:  wp.template('attachment-details'),
 		'click .untrash-attachment':      'untrashAttachment',
 		'click .edit-attachment':         'editAttachment',
 		'keydown':                        'toggleSelectionHandler'
 	},
+	/**
+	 * Copies the attachment URL to the clipboard.
+	 *
+	 * @since 5.5.0
+	 *
+	 * @param {MouseEvent} event A click event.
+	 *
+	 * @return {void}
+	 */
+	 copyAttachmentDetailsURLClipboard: function() {
+		var clipboard = new ClipboardJS( '.copy-attachment-url' ),
+			successTimeout;
+		clipboard.on( 'success', function( event ) {
+			var triggerElement = $( event.trigger ),
+				successElement = $( '.success', triggerElement.closest( '.copy-to-clipboard-container' ) );
+			// Clear the selection and move focus back to the trigger.
+			event.clearSelection();
+			// Handle ClipboardJS focus bug, see https://github.com/zenorocha/clipboard.js/issues/680
+			triggerElement.focus();
+			// Show success visual feedback.
+			clearTimeout( successTimeout );
+			successElement.removeClass( 'hidden' );
+			// Hide success visual feedback after 3 seconds since last success.
+			successTimeout = setTimeout( function() {
+				successElement.addClass( 'hidden' );
+			}, 3000 );
+			// Handle success audible feedback.
+			wp.a11y.speak( __( 'The file URL has been copied to your clipboard' ) );
+		} );
+	 },
+	/**
+	 * Shows the details of an attachment.
+	 *
+	 * @since 3.5.0
+	 *
+	 * @constructs wp.media.view.Attachment.Details
+	 * @augments wp.media.view.Attachment
+	 *
+	 * @return {void}
+	 */
 	initialize: function() {
 		this.options = _.defaults( this.options, {
 			rerenderOnModelChange: false
 		});
 		// Call 'initialize' directly on the parent class.
 		Attachment.prototype.initialize.apply( this, arguments );
-	},
+		this.copyAttachmentDetailsURLClipboard();
-	/**
+	},
-	 * @param {Object} event
+	/**
+	 * 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();
+	},
+	/**
+	 * Deletes an attachment.
+	 *
+	 * Deletes an attachment after asking for confirmation. After deletion,
+	 * keeps focus in the modal.
+	 *
+	 * @since 3.5.0
+	 *
+	 * @param {MouseEvent} event A click event.
+	 *
+	 * @return {void}
 	 */
 	deleteAttachment: function( event ) {
 		event.preventDefault();
+		this.getFocusableElements();
 		if ( window.confirm( l10n.warnDelete ) ) {
 			this.model.destroy();
-			// Keep focus inside media modal
+			this.moveFocus();
-			// after image is deleted
+		}
-			this.controller.modal.focusManager.focus();
+	},
-		}
-	},
+	/**
-	/**
+	 * Sets the Trash state on an attachment, or destroys the model itself.
-	 * @param {Object} event
+	 *
+	 * If the mediaTrash setting is set to true, trashes the attachment.
+	 * Otherwise, the model itself is destroyed.
+	 *
+	 * @since 3.9.0
+	 *
+	 * @param {MouseEvent} event A click event.
+	 *
+	 * @return {void}
 	 */
 	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() ) {
 			this.model.set( 'status', 'trash' );
 			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();
-	},
+		}
-	/**
+	},
-	 * @param {Object} event
+	/**
+	 * Untrashes an attachment.
+	 *
+	 * @since 4.0.0
+	 *
+	 * @param {MouseEvent} event A click event.
+	 *
+	 * @return {void}
 	 */
 	untrashAttachment: function( event ) {
 		var library = this.controller.library;
 		event.preventDefault();
 		this.model.set( 'status', 'inherit' );
 		this.model.save().done( function() {
 			library._requery( true );
 		} );
 	},
-	/**
-	 * @param {Object} event
+	/**
+	 * Opens the edit page for a specific attachment.
+	 *
+	 * @since 3.5.0
+	 *
+	 * @param {MouseEvent} event A click event.
+	 *
+	 * @return {void}
 	 */
 	editAttachment: function( event ) {
 		var editState = this.controller.states.get( 'edit-image' );
 		if ( window.imageEdit && editState ) {
 			event.preventDefault();
 			this.controller.setState( 'edit-image' );
 		} else {
 			this.$el.addClass('needs-refresh');
 		}
 	},
-	/**
-	 * When reverse tabbing(shift+tab) out of the right details panel, deliver
+	/**
-	 * the focus to the item in the list that was being edited.
+	 * Triggers an event on the controller when reverse tabbing (shift+tab).
 	 *
-	 * @param {Object} event
+	 * This event can be used to make sure to move the focus correctly.
+	 *
+	 * @since 4.0.0
+	 *
+	 * @fires wp.media.controller.MediaLibrary#attachment:details:shift-tab
+	 * @fires wp.media.controller.MediaLibrary#attachment:keydown:arrow
+	 *
+	 * @param {KeyboardEvent} event A keyboard event.
+	 *
+	 * @return {boolean|void} Returns false or undefined.
 	 */
 	toggleSelectionHandler: function( event ) {
 		if ( 'keydown' === event.type && 9 === event.keyCode && event.shiftKey && event.target === this.$( ':tabbable' ).get( 0 ) ) {
 			this.controller.trigger( 'attachment:details:shift-tab', event );
 			return false;
-		}
-		if ( 37 === event.keyCode || 38 === event.keyCode || 39 === event.keyCode || 40 === event.keyCode ) {
-			this.controller.trigger( 'attachment:keydown:arrow', event );
-			return;
 		}
 	}
 });
 module.exports = Details;
 	initialize: function() {
 		this.listenTo( this.model, 'change:compat', this.render );
 	},
 	/**
-	 * @returns {wp.media.view.AttachmentCompat} Returns itself to allow chaining
+	 * @return {wp.media.view.AttachmentCompat} Returns itself to allow chaining.
 	 */
 	dispose: function() {
 		if ( this.$(':focus').length ) {
 			this.save();
 		}
 		 * call 'dispose' directly on the parent class
 		 */
 		return View.prototype.dispose.apply( this, arguments );
 	},
 	/**
-	 * @returns {wp.media.view.AttachmentCompat} Returns itself to allow chaining
+	 * @return {wp.media.view.AttachmentCompat} Returns itself to allow chaining.
 	 */
 	render: function() {
 		var compat = this.model.get('compat');
 		if ( ! compat || ! compat.item ) {
 			return;
 * @augments Backbone.View
 */
 var Iframe = wp.media.View.extend(/** @lends wp.media.view.Iframe.prototype */{
 	className: 'media-iframe',
 	/**
-	 * @returns {wp.media.view.Iframe} Returns itself to allow chaining
+	 * @return {wp.media.view.Iframe} Returns itself to allow chaining.
 	 */
 	render: function() {
 		this.views.detach();
 		this.$el.html( '<iframe src="' + this.controller.state().get('src') + '" />' );
 		this.views.render();
 /* 96 */
 /***/ (function(module, exports) {
 var View = wp.media.View,
 	$ = jQuery,
+	l10n = wp.media.view.l10n,
 	EmbedUrl;
 /**
 * wp.media.view.EmbedUrl
 *
 * @augments wp.media.View
 * @augments wp.Backbone.View
 * @augments Backbone.View
 */
 EmbedUrl = View.extend(/** @lends wp.media.view.EmbedUrl.prototype */{
-	tagName:   'label',
+	tagName:   'span',
 	className: 'embed-url',
 	events: {
-		'input':  'url',
+		'input': 'url'
-		'keyup':  'url',
-		'change': 'url'
 	},
 	initialize: function() {
-		this.$input = $('<input id="embed-url-field" type="url" />').val( this.model.get('url') );
+		this.$input = $( '<input id="embed-url-field" type="url" />' )
+			.attr( 'aria-label', l10n.insertFromUrlTitle )
+			.val( this.model.get('url') );
 		this.input = this.$input[0];
 		this.spinner = $('<span class="spinner" />')[0];
 		this.$el.append([ this.input, this.spinner ]);
 				this.model.trigger( 'change:url' );
 			}, this ), 500 );
 		}
 	},
 	/**
-	 * @returns {wp.media.view.EmbedUrl} Returns itself to allow chaining
+	 * @return {wp.media.view.EmbedUrl} Returns itself to allow chaining.
 	 */
 	render: function() {
 		var $input = this.$input;
 		if ( $input.is(':focus') ) {
 		 */
 		View.prototype.render.apply( this, arguments );
 		return this;
 	},
-	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();
-		}
 	}
 });
 module.exports = EmbedUrl;
 	},
 	updateoEmbed: _.debounce( function() {
 		var url = this.model.get( 'url' );
-		// clear out previous results
+		// Clear out previous results.
 		this.$('.embed-container').hide().find('.embed-preview').empty();
 		this.$( '.setting' ).hide();
-		// only proceed with embed if the field contains more than 11 characters
+		// Only proceed with embed if the field contains more than 11 characters.
 		// Example: http://a.io is 11 chars
 		if ( url && ( url.length < 11 || ! url.match(/^http(s)?:\/\//) ) ) {
 			return;
 		}
 	}, wp.media.controller.Embed.sensitivity ),
 	fetch: function() {
 		var url = this.model.get( 'url' ), re, youTubeEmbedMatch;
-		// check if they haven't typed in 500 ms
+		// Check if they haven't typed in 500 ms.
 		if ( $('#embed-url-field').val() !== url ) {
 			return;
 		}
 		if ( this.dfd && 'pending' === this.dfd.state() ) {
 		'change [data-setting="customHeight"]': 'onCustomSize',
 		'keyup [data-setting="customWidth"]': 'onCustomSize',
 		'keyup [data-setting="customHeight"]': 'onCustomSize'
 	} ),
 	initialize: function() {
-		// used in AttachmentDisplay.prototype.updateLinkTo
+		// Used in AttachmentDisplay.prototype.updateLinkTo.
 		this.options.attachment = this.model.attachment;
 		this.listenTo( this.model, 'change:url', this.updateUrl );
 		this.listenTo( this.model, 'change:link', this.toggleLinkSettings );
 		this.listenTo( this.model, 'change:size', this.toggleCustomSize );
 		return this;
 	},
 	postRender: function() {
-		setTimeout( _.bind( this.resetFocus, this ), 10 );
+		setTimeout( _.bind( this.scrollToTop, this ), 10 );
 		this.toggleLinkSettings();
 		if ( window.getUserSetting( 'advImgDetails' ) === 'show' ) {
 			this.toggleAdvanced( true );
 		}
 		this.trigger( 'post-render' );
 	},
-	resetFocus: function() {
+	scrollToTop: function() {
-		this.$( '.link-to-custom' ).blur();
 		this.$( '.embed-media-settings' ).scrollTop( 0 );
 	},
 	updateUrl: function() {
 		this.$( '.image img' ).attr( 'src', this.model.get( 'url' ) );
 	onCustomSize: function( event ) {
 		var dimension = $( event.target ).data('setting'),
 			num = $( event.target ).val(),
 			value;
-		// Ignore bogus input
+		// Ignore bogus input.
 		if ( ! /^\d+/.test( num ) || parseInt( num, 10 ) < 1 ) {
 			event.preventDefault();
 			return;
 		}
 	prepare: function() {
 		return this.model.toJSON();
 	},
 	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() {
 		var lastState = this.controller.lastState();
 		this.controller.setState( lastState );

enmi-conf.org