From 951b462ea202b5cfcdc977194b4053009b6d03bc Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Tue, 5 Mar 2019 17:49:00 +0000
Subject: [PATCH] Accessibility: Replace media placeholder clickable divs with
 buttons.

`<button>` elements are natively interactive, supported by any assistive technology, and must be used instead of non-semantic, non-accessible `<div>` elements.

Also, this change aligns the Media Widgets and the Customizer site icon and site logo controls with the design pattern used in the new Block Editor for similar controls.

Props ramonopoly, welcher, afercia.
Fixes #43151.


git-svn-id: https://develop.svn.wordpress.org/trunk@44796 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/customize-controls.css       |  21 ++
 src/wp-admin/css/widgets.css                  |  21 ++
 .../class-wp-customize-media-control.php      |  15 +-
 .../class-wp-customize-site-icon-control.php  |  25 +-
 .../widgets/class-wp-widget-media-gallery.php |   2 +-
 .../widgets/class-wp-widget-media.php         |   7 +-
 tests/qunit/index.html                        | 321 +++++++++---------
 7 files changed, 231 insertions(+), 181 deletions(-)

diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index d3dbe764ff..f956da18f8 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -1379,6 +1379,7 @@ p.customize-section-description {
 }
 
 .customize-control .attachment-media-view .placeholder,
+.customize-control .attachment-media-view .button-add-media,
 .customize-control-header .placeholder {
 	width: 100%;
 	position: relative;
@@ -1390,6 +1391,26 @@ p.customize-section-description {
 	line-height: 20px;
 }
 
+.customize-control .attachment-media-view .button-add-media {
+	cursor: pointer;
+	background-color: #edeff0;
+	color: #32373c;
+}
+
+.customize-control .attachment-media-view .button-add-media:hover {
+	background-color: #fbfbfc;
+}
+
+.customize-control .attachment-media-view .button-add-media:focus {
+	background-color: #fbfbfc;
+	border-style: solid;
+	border-color: #5b9dd9;
+	box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent;
+	outline-offset: -2px;
+}
+
 .customize-control-header .inner {
 	display: none;
 	position: absolute;
diff --git a/src/wp-admin/css/widgets.css b/src/wp-admin/css/widgets.css
index eea7a913e4..f1c3a3c251 100644
--- a/src/wp-admin/css/widgets.css
+++ b/src/wp-admin/css/widgets.css
@@ -84,6 +84,7 @@
 	margin-right: 8px;
 }
 
+.media-widget-control .attachment-media-view .button-add-media,
 .media-widget-control .placeholder {
 	border: 1px dashed #b4b9be;
 	box-sizing: border-box;
@@ -95,6 +96,26 @@
 	width: 100%;
 }
 
+.media-widget-control .attachment-media-view .button-add-media {
+	cursor: pointer;
+	background-color: #edeff0;
+	color: #32373c;
+}
+
+.media-widget-control .attachment-media-view .button-add-media:hover {
+	background-color: #fbfbfc;
+}
+
+.media-widget-control .attachment-media-view .button-add-media:focus {
+	background-color: #fbfbfc;
+	border-style: solid;
+	border-color: #5b9dd9;
+	box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent;
+	outline-offset: -2px;
+}
+
 .media-widget-control .media-widget-preview {
 	background: transparent;
 	text-align: center;
diff --git a/src/wp-includes/customize/class-wp-customize-media-control.php b/src/wp-includes/customize/class-wp-customize-media-control.php
index 98d9310494..55f7b9b698 100644
--- a/src/wp-includes/customize/class-wp-customize-media-control.php
+++ b/src/wp-includes/customize/class-wp-customize-media-control.php
@@ -132,12 +132,11 @@ class WP_Customize_Media_Control extends WP_Customize_Control {
 	public function content_template() {
 		?>
 		<#
-		var selectButtonId = _.uniqueId( 'customize-media-control-button-' );
 		var descriptionId = _.uniqueId( 'customize-media-control-description-' );
 		var describedByAttr = data.description ? ' aria-describedby="' + descriptionId + '" ' : '';
 		#>
 		<# if ( data.label ) { #>
-			<label class="customize-control-title" for="{{ selectButtonId }}">{{ data.label }}</label>
+			<span class="customize-control-title">{{ data.label }}</span>
 		<# } #>
 		<div class="customize-control-notifications-container"></div>
 		<# if ( data.description ) { #>
@@ -182,22 +181,19 @@ class WP_Customize_Media_Control extends WP_Customize_Control {
 				<div class="actions">
 					<# if ( data.canUpload ) { #>
 					<button type="button" class="button remove-button">{{ data.button_labels.remove }}</button>
-					<button type="button" class="button upload-button control-focus" id="{{ selectButtonId }}" {{{ describedByAttr }}}>{{ data.button_labels.change }}</button>
+					<button type="button" class="button upload-button control-focus" {{{ describedByAttr }}}>{{ data.button_labels.change }}</button>
 					<# } #>
 				</div>
 			</div>
 		<# } else { #>
 			<div class="attachment-media-view">
-				<div class="placeholder">
-						{{ data.button_labels.placeholder }}
-				</div>
+				<# if ( data.canUpload ) { #>
+					<button type="button" class="upload-button button-add-media" {{{ describedByAttr }}}>{{ data.button_labels.select }}</button>
+				<# } #>
 				<div class="actions">
 					<# if ( data.defaultAttachment ) { #>
 						<button type="button" class="button default-button">{{ data.button_labels['default'] }}</button>
 					<# } #>
-					<# if ( data.canUpload ) { #>
-					<button type="button" class="button upload-button" id="{{ selectButtonId }}" {{{ describedByAttr }}}>{{ data.button_labels.select }}</button>
-					<# } #>
 				</div>
 			</div>
 		<# } #>
@@ -241,6 +237,7 @@ class WP_Customize_Media_Control extends WP_Customize_Control {
 			case 'image':
 				return array(
 					'select'       => __( 'Select image' ),
+					'site_icon'    => __( 'Select site icon' ),
 					'change'       => __( 'Change image' ),
 					'default'      => __( 'Default' ),
 					'remove'       => __( 'Remove' ),
diff --git a/src/wp-includes/customize/class-wp-customize-site-icon-control.php b/src/wp-includes/customize/class-wp-customize-site-icon-control.php
index 4d7bcf525a..bb4681ef62 100644
--- a/src/wp-includes/customize/class-wp-customize-site-icon-control.php
+++ b/src/wp-includes/customize/class-wp-customize-site-icon-control.php
@@ -47,14 +47,12 @@ class WP_Customize_Site_Icon_Control extends WP_Customize_Cropped_Image_Control
 	 */
 	public function content_template() {
 		?>
-		<label for="{{ data.settings['default'] }}-button">
-			<# if ( data.label ) { #>
-				<span class="customize-control-title">{{ data.label }}</span>
-			<# } #>
-			<# if ( data.description ) { #>
-				<span class="description customize-control-description">{{{ data.description }}}</span>
-			<# } #>
-		</label>
+		<# if ( data.label ) { #>
+			<span class="customize-control-title">{{ data.label }}</span>
+		<# } #>
+		<# if ( data.description ) { #>
+			<span class="description customize-control-description">{{{ data.description }}}</span>
+		<# } #>
 
 		<# if ( data.attachment && data.attachment.id ) { #>
 			<div class="attachment-media-view">
@@ -74,22 +72,19 @@ class WP_Customize_Site_Icon_Control extends WP_Customize_Cropped_Image_Control
 				<div class="actions">
 					<# if ( data.canUpload ) { #>
 						<button type="button" class="button remove-button"><?php echo $this->button_labels['remove']; ?></button>
-						<button type="button" class="button upload-button" id="{{ data.settings['default'] }}-button"><?php echo $this->button_labels['change']; ?></button>
+						<button type="button" class="button upload-button"><?php echo $this->button_labels['change']; ?></button>
 					<# } #>
 				</div>
 			</div>
 		<# } else { #>
 			<div class="attachment-media-view">
-				<div class="placeholder">
-					<?php echo $this->button_labels['placeholder']; ?>
-				</div>
+				<# if ( data.canUpload ) { #>
+					<button type="button" class="upload-button button-add-media"><?php echo $this->button_labels['site_icon']; ?></button>
+				<# } #>
 				<div class="actions">
 					<# if ( data.defaultAttachment ) { #>
 						<button type="button" class="button default-button"><?php echo $this->button_labels['default']; ?></button>
 					<# } #>
-					<# if ( data.canUpload ) { #>
-						<button type="button" class="button upload-button" id="{{ data.settings['default'] }}-button"><?php echo $this->button_labels['select']; ?></button>
-					<# } #>
 				</div>
 			</div>
 		<# } #>
diff --git a/src/wp-includes/widgets/class-wp-widget-media-gallery.php b/src/wp-includes/widgets/class-wp-widget-media-gallery.php
index 54cea50ad9..fc1a5dcf17 100644
--- a/src/wp-includes/widgets/class-wp-widget-media-gallery.php
+++ b/src/wp-includes/widgets/class-wp-widget-media-gallery.php
@@ -228,7 +228,7 @@ class WP_Widget_Media_Gallery extends WP_Widget_Media {
 				</ul>
 			<# } else { #>
 				<div class="attachment-media-view">
-					<p class="placeholder"><?php echo esc_html( $this->l10n['no_media_selected'] ); ?></p>
+					<button type="button" class="placeholder button-add-media"><?php echo esc_html( $this->l10n['add_media'] ); ?></button>
 				</div>
 			<# } #>
 		</script>
diff --git a/src/wp-includes/widgets/class-wp-widget-media.php b/src/wp-includes/widgets/class-wp-widget-media.php
index 0c3b599e54..e6146bf8d3 100644
--- a/src/wp-includes/widgets/class-wp-widget-media.php
+++ b/src/wp-includes/widgets/class-wp-widget-media.php
@@ -411,7 +411,9 @@ abstract class WP_Widget_Media extends WP_Widget {
 			</p>
 			<div class="media-widget-preview <?php echo esc_attr( $this->id_base ); ?>">
 				<div class="attachment-media-view">
-					<div class="placeholder"><?php echo esc_html( $this->l10n['no_media_selected'] ); ?></div>
+					<button type="button" class="select-media button-add-media not-selected">
+						<?php echo esc_html( $this->l10n['add_media'] ); ?>
+					</button>
 				</div>
 			</div>
 			<p class="media-widget-buttons">
@@ -423,9 +425,6 @@ abstract class WP_Widget_Media extends WP_Widget {
 					<?php echo esc_html( $this->l10n['replace_media'] ); ?>
 				</button>
 			<?php endif; ?>
-				<button type="button" class="button select-media not-selected">
-					<?php echo esc_html( $this->l10n['add_media'] ); ?>
-				</button>
 			</p>
 			<div class="media-widget-fields">
 			</div>
diff --git a/tests/qunit/index.html b/tests/qunit/index.html
index 29f53b269c..91ba7c7567 100644
--- a/tests/qunit/index.html
+++ b/tests/qunit/index.html
@@ -45,7 +45,7 @@
 		<script src="../../build/wp-includes/js/mediaelement/mediaelement-and-player.min.js"></script>
 		<script src="../../build/wp-includes/js/mediaelement/wp-mediaelement.js"></script>
 		<script>
-			window._wpMediaViewsL10n = {"url":"URL","addMedia":"Add Media","search":"Search","select":"Select","cancel":"Cancel","update":"Update","replace":"Replace","remove":"Remove","back":"Back","selected":"%d selected","dragInfo":"Drag and drop to reorder media files.","uploadFilesTitle":"Upload Files","uploadImagesTitle":"Upload Images","mediaLibraryTitle":"Media Library","insertMediaTitle":"Insert Media","createNewGallery":"Create a new gallery","createNewPlaylist":"Create a new playlist","createNewVideoPlaylist":"Create a new video playlist","returnToLibrary":"\u2190 Return to library","allMediaItems":"All media items","allDates":"All dates","noItemsFound":"No items found.","insertIntoPost":"Insert into post","unattached":"Unattached","trash":"Trash","uploadedToThisPost":"Uploaded to this post","warnDelete":"You are about to permanently delete this item.\nThis will remove it from your site.\n 'Cancel' to stop, 'OK' to delete.","warnBulkDelete":"You are about to permanently delete these items.\nThis will remove them from your site.\n 'Cancel' to stop, 'OK' to delete.","warnBulkTrash":"You are about to trash these items.\n  'Cancel' to stop, 'OK' to delete.","bulkSelect":"Bulk Select","cancelSelection":"Cancel Selection","trashSelected":"Trash Selected","untrashSelected":"Untrash Selected","deleteSelected":"Delete Selected","deletePermanently":"Delete Permanently","apply":"Apply","filterByDate":"Filter by date","filterByType":"Filter by type","searchMediaLabel":"Search Media","searchMediaPlaceholder":"Search media items...","noMedia":"No media files found.","attachmentDetails":"Attachment Details","insertFromUrlTitle":"Insert from URL","setFeaturedImageTitle":"Featured Image","setFeaturedImage":"Set featured image","createGalleryTitle":"Create Gallery","editGalleryTitle":"Edit Gallery","cancelGalleryTitle":"\u2190 Cancel Gallery","insertGallery":"Insert gallery","updateGallery":"Update gallery","addToGallery":"Add to gallery","addToGalleryTitle":"Add to Gallery","reverseOrder":"Reverse order","imageDetailsTitle":"Image Details","imageReplaceTitle":"Replace Image","imageDetailsCancel":"Cancel Edit","editImage":"Edit Image","chooseImage":"Choose Image","selectAndCrop":"Select and Crop","skipCropping":"Skip Cropping","cropImage":"Crop Image","cropYourImage":"Crop your image","cropping":"Cropping\u2026","suggestedDimensions":"Suggested image dimensions:","cropError":"There has been an error cropping your image.","audioDetailsTitle":"Audio Details","audioReplaceTitle":"Replace Audio","audioAddSourceTitle":"Add Audio Source","audioDetailsCancel":"Cancel Edit","videoDetailsTitle":"Video Details","videoReplaceTitle":"Replace Video","videoAddSourceTitle":"Add Video Source","videoDetailsCancel":"Cancel Edit","videoSelectPosterImageTitle":"Select Poster Image","videoAddTrackTitle":"Add Subtitles","playlistDragInfo":"Drag and drop to reorder tracks.","createPlaylistTitle":"Create Audio Playlist","editPlaylistTitle":"Edit Audio Playlist","cancelPlaylistTitle":"\u2190 Cancel Audio Playlist","insertPlaylist":"Insert audio playlist","updatePlaylist":"Update audio playlist","addToPlaylist":"Add to audio playlist","addToPlaylistTitle":"Add to Audio Playlist","videoPlaylistDragInfo":"Drag and drop to reorder videos.","createVideoPlaylistTitle":"Create Video Playlist","editVideoPlaylistTitle":"Edit Video Playlist","cancelVideoPlaylistTitle":"\u2190 Cancel Video Playlist","insertVideoPlaylist":"Insert video playlist","updateVideoPlaylist":"Update video playlist","addToVideoPlaylist":"Add to video playlist","addToVideoPlaylistTitle":"Add to Video Playlist","settings":{"tabs":[],"tabUrl":"http:\/\/src.wordpress-develop.dev\/wp-admin\/media-upload.php?chromeless=1","mimeTypes":{"image":"Images","audio":"Audio","video":"Video"},"captions":true,"nonce":{"sendToEditor":"9585d11de6"},"post":{"id":0},"defaultProps":{"link":"none","align":"","size":""},"attachmentCounts":{"audio":1,"video":1},"embedExts":["mp3","ogg","wma","m4a","wav","mp4","m4v","webm","ogv","wmv","flv"],"embedMimes":{"mp3":"audio\/mpeg","ogg":"audio\/ogg","wma":"audio\/x-ms-wma","m4a":"audio\/mpeg","wav":"audio\/wav","mp4":"video\/mp4","m4v":"video\/mp4","webm":"video\/webm","ogv":"video\/ogg","wmv":"video\/x-ms-wmv","flv":"video\/x-flv"},"contentWidth":525,"months":[{"year":"2017","month":"4","text":"April 2017"}],"mediaTrash":0}};
+			window._wpMediaViewsL10n = {"url":"URL","addMedia":"Add Media","search":"Search","select":"Select","cancel":"Cancel","update":"Update","replace":"Replace","remove":"Remove","back":"Back","selected":"%d selected","dragInfo":"Drag and drop to reorder media files.","uploadFilesTitle":"Upload Files","uploadImagesTitle":"Upload Images","mediaLibraryTitle":"Media Library","insertMediaTitle":"Add Media","createNewGallery":"Create a new gallery","createNewPlaylist":"Create a new playlist","createNewVideoPlaylist":"Create a new video playlist","returnToLibrary":"\u2190 Return to library","allMediaItems":"All media items","allDates":"All dates","noItemsFound":"No items found.","insertIntoPost":"Insert into post","unattached":"Unattached","mine":"Mine","trash":"Trash","uploadedToThisPost":"Uploaded to this post","warnDelete":"You are about to permanently delete this item from your site.\nThis action cannot be undone.\n 'Cancel' to stop, 'OK' to delete.","warnBulkDelete":"You are about to permanently delete these items from your site.\nThis action cannot be undone.\n 'Cancel' to stop, 'OK' to delete.","warnBulkTrash":"You are about to trash these items.\n  'Cancel' to stop, 'OK' to delete.","bulkSelect":"Bulk Select","cancelSelection":"Cancel Selection","trashSelected":"Trash Selected","untrashSelected":"Untrash Selected","deleteSelected":"Delete Selected","deletePermanently":"Delete Permanently","apply":"Apply","filterByDate":"Filter by date","filterByType":"Filter by type","searchMediaLabel":"Search Media","searchMediaPlaceholder":"Search media items...","noMedia":"No media files found.","attachmentDetails":"Attachment Details","insertFromUrlTitle":"Insert from URL","setFeaturedImageTitle":"Featured Image","setFeaturedImage":"Set featured image","createGalleryTitle":"Create Gallery","editGalleryTitle":"Edit Gallery","cancelGalleryTitle":"\u2190 Cancel Gallery","insertGallery":"Insert gallery","updateGallery":"Update gallery","addToGallery":"Add to gallery","addToGalleryTitle":"Add to Gallery","reverseOrder":"Reverse order","imageDetailsTitle":"Image Details","imageReplaceTitle":"Replace Image","imageDetailsCancel":"Cancel Edit","editImage":"Edit Image","chooseImage":"Choose Image","selectAndCrop":"Select and Crop","skipCropping":"Skip Cropping","cropImage":"Crop Image","cropYourImage":"Crop your image","cropping":"Cropping\u2026","suggestedDimensions":"Suggested image dimensions: %1$s by %2$s pixels.","cropError":"There has been an error cropping your image.","audioDetailsTitle":"Audio Details","audioReplaceTitle":"Replace Audio","audioAddSourceTitle":"Add Audio Source","audioDetailsCancel":"Cancel Edit","videoDetailsTitle":"Video Details","videoReplaceTitle":"Replace Video","videoAddSourceTitle":"Add Video Source","videoDetailsCancel":"Cancel Edit","videoSelectPosterImageTitle":"Select Poster Image","videoAddTrackTitle":"Add Subtitles","playlistDragInfo":"Drag and drop to reorder tracks.","createPlaylistTitle":"Create Audio Playlist","editPlaylistTitle":"Edit Audio Playlist","cancelPlaylistTitle":"\u2190 Cancel Audio Playlist","insertPlaylist":"Insert audio playlist","updatePlaylist":"Update audio playlist","addToPlaylist":"Add to audio playlist","addToPlaylistTitle":"Add to Audio Playlist","videoPlaylistDragInfo":"Drag and drop to reorder videos.","createVideoPlaylistTitle":"Create Video Playlist","editVideoPlaylistTitle":"Edit Video Playlist","cancelVideoPlaylistTitle":"\u2190 Cancel Video Playlist","insertVideoPlaylist":"Insert video playlist","updateVideoPlaylist":"Update video playlist","addToVideoPlaylist":"Add to video playlist","addToVideoPlaylistTitle":"Add to Video Playlist","settings":{"tabs":[],"tabUrl":"http:\/\/src.wordpress-develop.test\/wp-admin\/media-upload.php?chromeless=1","mimeTypes":{"image":"Images","audio":"Audio","video":"Video"},"captions":true,"nonce":{"sendToEditor":"68dd6db760"},"post":{"id":0},"defaultProps":{"link":"none","align":"","size":""},"attachmentCounts":{"audio":1,"video":1},"oEmbedProxyUrl":"http:\/\/src.wordpress-develop.test\/wp-json\/oembed\/1.0\/proxy","embedExts":["mp3","ogg","flac","m4a","wav","mp4","m4v","webm","ogv","flv"],"embedMimes":{"mp3":"audio\/mpeg","ogg":"audio\/ogg","flac":"audio\/flac","m4a":"audio\/mpeg","wav":"audio\/wav","mp4":"video\/mp4","m4v":"video\/mp4","webm":"video\/webm","ogv":"video\/ogg","flv":"video\/x-flv"},"contentWidth":640,"months":[{"year":"2018","month":"11","text":"November 2018"},{"year":"2018","month":"10","text":"October 2018"},{"year":"2018","month":"7","text":"July 2018"},{"year":"2014","month":"1","text":"January 2014"},{"year":"2013","month":"12","text":"December 2013"},{"year":"2013","month":"9","text":"September 2013"},{"year":"2013","month":"4","text":"April 2013"},{"year":"2013","month":"3","text":"March 2013"},{"year":"2012","month":"7","text":"July 2012"},{"year":"2012","month":"6","text":"June 2012"},{"year":"2011","month":"7","text":"July 2011"},{"year":"2011","month":"1","text":"January 2011"}],"mediaTrash":0}};
 		</script>
 		<script src="../../build/wp-includes/js/media-views.js"></script>
 		<script src="../../build/wp-includes/js/media-editor.js"></script>
@@ -588,83 +588,87 @@
 				</div><!-- #available-widgets -->
 			</div><!-- #widgets-left -->
 
-			<script type="text/html" id="tmpl-widget-media-media_image-control">
+		<script type="text/html" id="tmpl-widget-media-media_image-control">
 			<# var elementIdPrefix = 'el' + String( Math.random() ) + '_' #>
 			<p>
 				<label for="{{ elementIdPrefix }}title">Title:</label>
 				<input id="{{ elementIdPrefix }}title" type="text" class="widefat title">
 			</p>
-			<div class="media-widget-preview">
+			<div class="media-widget-preview media_image">
 				<div class="attachment-media-view">
-					<div class="placeholder">No image selected</div>
+					<button type="button" class="select-media button-add-media not-selected">
+						Add Image					</button>
 				</div>
 			</div>
 			<p class="media-widget-buttons">
 				<button type="button" class="button edit-media selected">
 					Edit Image				</button>
-				<button type="button" class="button change-media select-media selected">
+							<button type="button" class="button change-media select-media selected">
 					Replace Image				</button>
-				<button type="button" class="button select-media not-selected">
-					Add Image				</button>
-			</p>
+						</p>
+			<div class="media-widget-fields">
+			</div>
 		</script>
-				<script type="text/html" id="tmpl-wp-media-widget-image-preview">
-			<#
-			var describedById = 'describedBy-' + String( Math.random() );
-			#>
+
+		<script type="text/html" id="tmpl-wp-media-widget-image-preview">
 			<# if ( data.error && 'missing_attachment' === data.error ) { #>
 				<div class="notice notice-error notice-alt notice-missing-attachment">
-					<p>We can&#8217;t find that image. Check your <a href="http://src.wordpress-develop.dev/wp-admin/upload.php">media library</a> and make sure it wasn&#8217;t deleted.</p>
+					<p>We can&#8217;t find that image. Check your <a href="http://src.wordpress-develop.test/wp-admin/upload.php">media library</a> and make sure it wasn&#8217;t deleted.</p>
 				</div>
 			<# } else if ( data.error ) { #>
 				<div class="notice notice-error notice-alt">
 					<p>Unable to preview media due to an unknown error.</p>
 				</div>
 			<# } else if ( data.url ) { #>
-				<img class="attachment-thumb" src="{{ data.url }}" draggable="false" alt="{{ data.alt }}" <# if ( ! data.alt && data.currentFilename ) { #> aria-describedby="{{ describedById }}" <# } #> />
-				<# if ( ! data.alt && data.currentFilename ) { #>
-					<p class="hidden" id="{{ describedById }}">Current image: {{ data.currentFilename }}</p>
-				<# } #>
+				<img class="attachment-thumb" src="{{ data.url }}" draggable="false" alt="{{ data.alt }}"
+					<# if ( ! data.alt && data.currentFilename ) { #>
+						aria-label="
+						The current image has no alternative text. The file name is: {{ data.currentFilename }}						"
+					<# } #>
+				/>
 			<# } #>
 		</script>
-				<script type="text/html" id="tmpl-widget-media-media_video-control">
+
+		<script type="text/html" id="tmpl-widget-media-media_video-control">
 			<# var elementIdPrefix = 'el' + String( Math.random() ) + '_' #>
 			<p>
 				<label for="{{ elementIdPrefix }}title">Title:</label>
 				<input id="{{ elementIdPrefix }}title" type="text" class="widefat title">
 			</p>
-			<div class="media-widget-preview">
+			<div class="media-widget-preview media_video">
 				<div class="attachment-media-view">
-					<div class="placeholder">No video selected</div>
+					<button type="button" class="select-media button-add-media not-selected">
+						Add Video					</button>
 				</div>
 			</div>
 			<p class="media-widget-buttons">
 				<button type="button" class="button edit-media selected">
 					Edit Video				</button>
-				<button type="button" class="button change-media select-media selected">
+							<button type="button" class="button change-media select-media selected">
 					Replace Video				</button>
-				<button type="button" class="button select-media not-selected">
-					Add Video				</button>
-			</p>
+						</p>
+			<div class="media-widget-fields">
+			</div>
 		</script>
-				<script type="text/html" id="tmpl-wp-media-widget-video-preview">
+
+		<script type="text/html" id="tmpl-wp-media-widget-video-preview">
 			<# if ( data.error && 'missing_attachment' === data.error ) { #>
 				<div class="notice notice-error notice-alt notice-missing-attachment">
-					<p>We can&#8217;t find that video. Check your <a href="http://src.wordpress-develop.dev/wp-admin/upload.php">media library</a> and make sure it wasn&#8217;t deleted.</p>
+					<p>We can&#8217;t find that video. Check your <a href="http://src.wordpress-develop.test/wp-admin/upload.php">media library</a> and make sure it wasn&#8217;t deleted.</p>
 				</div>
 			<# } else if ( data.error && 'unsupported_file_type' === data.error ) { #>
 				<div class="notice notice-error notice-alt notice-missing-attachment">
-					<p>Sorry, we can&#8217;t display the video file type selected. Please select a supported video file (<code>.mp4</code>, <code>.m4v</code>, <code>.webm</code>, <code>.ogv</code>, <code>.wmv</code>, <code>.flv</code>) or stream (YouTube or Vimeo) instead.</p>
+					<p>Sorry, we can&#8217;t load the video at the supplied URL. Please check that the URL is for a supported video file (<code>.mp4</code>, <code>.m4v</code>, <code>.webm</code>, <code>.ogv</code>, <code>.flv</code>) or stream (e.g. YouTube and Vimeo).</p>
 				</div>
 			<# } else if ( data.error ) { #>
 				<div class="notice notice-error notice-alt">
 					<p>Unable to preview media due to an unknown error.</p>
 				</div>
-			<# } else if ( data.is_hosted_embed && data.model.poster ) { #>
+			<# } else if ( data.is_oembed && data.model.poster ) { #>
 				<a href="{{ data.model.src }}" target="_blank" class="media-widget-video-link">
 					<img src="{{ data.model.poster }}" />
 				</a>
-			<# } else if ( data.is_hosted_embed ) { #>
+			<# } else if ( data.is_oembed ) { #>
 				<a href="{{ data.model.src }}" target="_blank" class="media-widget-video-link no-poster">
 					<span class="dashicons dashicons-format-video"></span>
 				</a>
@@ -688,7 +692,7 @@
 		h = Math.ceil( ( data.model.height * w ) / data.model.width );
 	} else {
 		h = data.model.height;
- 	}
+	}
 
 	if ( w ) {
 		w_rule = 'width: ' + w + 'px; ';
@@ -708,15 +712,16 @@
 	class="wp-video-shortcode {{ classes.join( ' ' ) }}"
 	<# if ( w ) { #>width="{{ w }}"<# } #>
 	<# if ( h ) { #>height="{{ h }}"<# } #>
-	<#
+			<#
 		if ( ! _.isUndefined( data.model.poster ) && data.model.poster ) {
 			#> poster="{{ data.model.poster }}"<#
 		} #>
-		preload="{{ _.isUndefined( data.model.preload ) ? 'metadata' : data.model.preload }}"<#
-	 if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
+			preload			="{{ _.isUndefined( data.model.preload ) ? 'metadata' : data.model.preload }}"
+				<#
+		if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
 		#> autoplay<#
 	}
-	 if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
+		if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
 		#> loop<#
 	}
 	#>
@@ -731,96 +736,97 @@
 		<# }
 	} #>
 
-	<# if ( data.model.mp4 ) { #>
+		<# if ( data.model.mp4 ) { #>
 	<source src="{{ data.model.mp4 }}" type="{{ settings.embedMimes[ 'mp4' ] }}" />
 	<# } #>
-	<# if ( data.model.m4v ) { #>
+		<# if ( data.model.m4v ) { #>
 	<source src="{{ data.model.m4v }}" type="{{ settings.embedMimes[ 'm4v' ] }}" />
 	<# } #>
-	<# if ( data.model.webm ) { #>
+		<# if ( data.model.webm ) { #>
 	<source src="{{ data.model.webm }}" type="{{ settings.embedMimes[ 'webm' ] }}" />
 	<# } #>
-	<# if ( data.model.ogv ) { #>
+		<# if ( data.model.ogv ) { #>
 	<source src="{{ data.model.ogv }}" type="{{ settings.embedMimes[ 'ogv' ] }}" />
 	<# } #>
-	<# if ( data.model.wmv ) { #>
-	<source src="{{ data.model.wmv }}" type="{{ settings.embedMimes[ 'wmv' ] }}" />
-	<# } #>
-	<# if ( data.model.flv ) { #>
+		<# if ( data.model.flv ) { #>
 	<source src="{{ data.model.flv }}" type="{{ settings.embedMimes[ 'flv' ] }}" />
 	<# } #>
 		{{{ data.model.content }}}
 </video>
 </div>
-			<# } #>
-		</script>
-			<script type="text/html" id="tmpl-widget-media-media_audio-control">
-				<# var elementIdPrefix = 'el' + String( Math.random() ) + '_' #>
-				<p>
-					<label for="{{ elementIdPrefix }}title">Title:</label>
-					<input id="{{ elementIdPrefix }}title" type="text" class="widefat title">
-				</p>
-				<div class="media-widget-preview">
-					<div class="attachment-media-view">
-						<div class="placeholder">No audio selected</div>
-					</div>
-				</div>
-				<p class="media-widget-buttons">
-					<button type="button" class="button edit-media selected">
-						Edit Audio				</button>
-					<button type="button" class="button change-media select-media selected">
-						Replace Audio				</button>
-					<button type="button" class="button select-media not-selected">
-						Add Audio				</button>
-				</p>
-			</script>
-			<script type="text/html" id="tmpl-wp-media-widget-audio-preview">
-				<# if ( data.error && 'missing_attachment' === data.error ) { #>
-					<div class="notice notice-error notice-alt notice-missing-attachment">
-						<p>We can&#8217;t find that audio file. Check your <a href="http://src.wordpress-develop.dev/wp-admin/upload.php">media library</a> and make sure it wasn&#8217;t deleted.</p>
-					</div>
-				<# } else if ( data.error ) { #>
-					<div class="notice notice-error notice-alt">
-						<p>Unable to preview media due to an unknown error.</p>
-					</div>
-				<# } else if ( data.model && data.model.src ) { #>
-					<audio style="visibility: hidden"
-						controls
-						class="wp-audio-shortcode"
-						width="{{ _.isUndefined( data.model.width ) ? 400 : data.model.width }}"
-						preload="{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}"
-						<#
-						if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
-							#> autoplay<#
-						}
-						if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
-							#> loop<#
-						}
-						#>
-					>
-					<# if ( ! _.isEmpty( data.model.src ) ) { #>
-						<source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
-					<# } #>
-
-					<# if ( ! _.isEmpty( data.model.mp3 ) ) { #>
-						<source src="{{ data.model.mp3 }}" type="{{ wp.media.view.settings.embedMimes[ 'mp3' ] }}" />
-					<# } #>
-					<# if ( ! _.isEmpty( data.model.ogg ) ) { #>
-						<source src="{{ data.model.ogg }}" type="{{ wp.media.view.settings.embedMimes[ 'ogg' ] }}" />
-					<# } #>
-					<# if ( ! _.isEmpty( data.model.wma ) ) { #>
-						<source src="{{ data.model.wma }}" type="{{ wp.media.view.settings.embedMimes[ 'wma' ] }}" />
-					<# } #>
-					<# if ( ! _.isEmpty( data.model.m4a ) ) { #>
-						<source src="{{ data.model.m4a }}" type="{{ wp.media.view.settings.embedMimes[ 'm4a' ] }}" />
-					<# } #>
-					<# if ( ! _.isEmpty( data.model.wav ) ) { #>
-						<source src="{{ data.model.wav }}" type="{{ wp.media.view.settings.embedMimes[ 'wav' ] }}" />
-					<# } #>
-					</audio>
 				<# } #>
-			</script>
-			<script type="text/html" id="tmpl-media-frame">
+		</script>
+
+		<script type="text/html" id="tmpl-widget-media-media_audio-control">
+			<# var elementIdPrefix = 'el' + String( Math.random() ) + '_' #>
+			<p>
+				<label for="{{ elementIdPrefix }}title">Title:</label>
+				<input id="{{ elementIdPrefix }}title" type="text" class="widefat title">
+			</p>
+			<div class="media-widget-preview media_audio">
+				<div class="attachment-media-view">
+					<button type="button" class="select-media button-add-media not-selected">
+						Add Audio					</button>
+				</div>
+			</div>
+			<p class="media-widget-buttons">
+				<button type="button" class="button edit-media selected">
+					Edit Audio				</button>
+							<button type="button" class="button change-media select-media selected">
+					Replace Audio				</button>
+						</p>
+			<div class="media-widget-fields">
+			</div>
+		</script>
+
+		<script type="text/html" id="tmpl-wp-media-widget-audio-preview">
+			<# if ( data.error && 'missing_attachment' === data.error ) { #>
+				<div class="notice notice-error notice-alt notice-missing-attachment">
+					<p>We can&#8217;t find that audio file. Check your <a href="http://src.wordpress-develop.test/wp-admin/upload.php">media library</a> and make sure it wasn&#8217;t deleted.</p>
+				</div>
+			<# } else if ( data.error ) { #>
+				<div class="notice notice-error notice-alt">
+					<p>Unable to preview media due to an unknown error.</p>
+				</div>
+			<# } else if ( data.model && data.model.src ) { #>
+				<audio style="visibility: hidden"
+	controls
+	class="wp-audio-shortcode"
+	width="{{ _.isUndefined( data.model.width ) ? 400 : data.model.width }}"
+	preload="{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}"
+	<#
+		if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
+		#> autoplay<#
+	}
+		if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
+		#> loop<#
+	}
+	#>
+>
+	<# if ( ! _.isEmpty( data.model.src ) ) { #>
+	<source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
+	<# } #>
+
+		<# if ( ! _.isEmpty( data.model.mp3 ) ) { #>
+	<source src="{{ data.model.mp3 }}" type="{{ wp.media.view.settings.embedMimes[ 'mp3' ] }}" />
+	<# } #>
+			<# if ( ! _.isEmpty( data.model.ogg ) ) { #>
+	<source src="{{ data.model.ogg }}" type="{{ wp.media.view.settings.embedMimes[ 'ogg' ] }}" />
+	<# } #>
+			<# if ( ! _.isEmpty( data.model.flac ) ) { #>
+	<source src="{{ data.model.flac }}" type="{{ wp.media.view.settings.embedMimes[ 'flac' ] }}" />
+	<# } #>
+			<# if ( ! _.isEmpty( data.model.m4a ) ) { #>
+	<source src="{{ data.model.m4a }}" type="{{ wp.media.view.settings.embedMimes[ 'm4a' ] }}" />
+	<# } #>
+			<# if ( ! _.isEmpty( data.model.wav ) ) { #>
+	<source src="{{ data.model.wav }}" type="{{ wp.media.view.settings.embedMimes[ 'wav' ] }}" />
+	<# } #>
+		</audio>
+				<# } #>
+		</script>
+
+	<script type="text/html" id="tmpl-media-frame">
 		<div class="media-frame-menu"></div>
 		<div class="media-frame-title"></div>
 		<div class="media-frame-router"></div>
@@ -835,53 +841,63 @@
 			<label for="{{ elementIdPrefix }}title">Title:</label>
 			<input id="{{ elementIdPrefix }}title" type="text" class="widefat title">
 		</p>
-		<div class="media-widget-preview">
+		<div class="media-widget-preview media_gallery">
 			<div class="attachment-media-view">
-				<div class="placeholder">No images selected</div>
+				<button type="button" class="select-media button-add-media not-selected">
+					Add Images					</button>
 			</div>
-			</div>
-			<p class="media-widget-buttons">
-				<button type="button" class="button edit-media selected">
-					Edit Gallery				</button>
-				<button type="button" class="button change-media select-media selected">
-					Replace Media				</button>
-				<button type="button" class="button select-media not-selected">
-					Add Media				</button>
-			</p>
+		</div>
+		<p class="media-widget-buttons">
+			<button type="button" class="button edit-media selected">
+				Edit Gallery				</button>
+					</p>
 		<div class="media-widget-fields">
 		</div>
 	</script>
-				<script type="text/html" id="tmpl-wp-media-widget-gallery-preview">
-			<# var describedById = 'describedBy-' + String( Math.random() ); #>
-			<# data.attachments = data.attachments ? JSON.parse(data.attachments) : ''; #>
-			<# if ( Array.isArray( data.attachments ) && data.attachments.length ) { #>
-				<div class="gallery gallery-columns-{{ data.columns }}">
-					<# _.each( data.attachments, function( attachment, index ) { #>
-						<dl class="gallery-item">
-							<dt class="gallery-icon">
-							<# if ( attachment.sizes.thumbnail ) { #>
-								<img src="{{ attachment.sizes.thumbnail.url }}" width="{{ attachment.sizes.thumbnail.width }}" height="{{ attachment.sizes.thumbnail.height }}" alt="" />
-							<# } else { #>
-								<img src="{{ attachment.url }}" alt="" />
-							<# } #>
-							</dt>
-							<# if ( attachment.caption ) { #>
-								<dd class="wp-caption-text gallery-caption">
-									{{{ data.verifyHTML( attachment.caption ) }}}
-								</dd>
-							<# } #>
-						</dl>
-						<# if ( index % data.columns === data.columns - 1 ) { #>
-							<br style="clear: both;">
-						<# } #>
-					<# } ); #>
-				</div>
-			<# } else { #>
-				<div class="attachment-media-view">
-					<p class="placeholder">No images selected</p>
-				</div>
-			<# } #>
-		</script>
+
+	<script type="text/html" id="tmpl-wp-media-widget-gallery-preview">
+		<#
+		var ids = _.filter( data.ids, function( id ) {
+			return ( id in data.attachments );
+		} );
+		#>
+		<# if ( ids.length ) { #>
+			<ul class="gallery media-widget-gallery-preview" role="list">
+				<# _.each( ids, function( id, index ) { #>
+					<# var attachment = data.attachments[ id ]; #>
+					<# if ( index < 6 ) { #>
+						<li class="gallery-item">
+							<div class="gallery-icon">
+								<img alt="{{ attachment.alt }}"
+									<# if ( index === 5 && data.ids.length > 6 ) { #> aria-hidden="true" <# } #>
+									<# if ( attachment.sizes.thumbnail ) { #>
+										src="{{ attachment.sizes.thumbnail.url }}" width="{{ attachment.sizes.thumbnail.width }}" height="{{ attachment.sizes.thumbnail.height }}"
+									<# } else { #>
+										src="{{ attachment.url }}"
+									<# } #>
+									<# if ( ! attachment.alt && attachment.filename ) { #>
+										aria-label="
+										The current image has no alternative text. The file name is: {{ attachment.filename }}											"
+									<# } #>
+								/>
+								<# if ( index === 5 && data.ids.length > 6 ) { #>
+								<div class="gallery-icon-placeholder">
+									<p class="gallery-icon-placeholder-text" aria-label="
+									Additional images added to this gallery: {{ data.ids.length - 5 }}										">+{{ data.ids.length - 5 }}</p>
+								</div>
+								<# } #>
+							</div>
+						</li>
+					<# } #>
+				<# } ); #>
+			</ul>
+		<# } else { #>
+			<div class="attachment-media-view">
+				<button type="button" class="placeholder button-add-media">Add Images</button>
+			</div>
+		<# } #>
+	</script>
+
 		<script type="text/html" id="tmpl-customize-control-date_time-content">
 
 		<# _.defaults( data, {"settings":[],"type":"date_time","priority":10,"active":true,"section":"","content":"<li id=\"customize-control-temp\" class=\"customize-control customize-control-date_time\">\n\t\t\t\t\t<\/li>","label":"","description":"","instanceNumber":73,"maxYear":9999,"minYear":1000,"allowPastDate":true,"twelveHourFormat":true,"includeTime":true,"defaultValue":null,"month_choices":{"1":{"text":"1-Jan","value":1},"2":{"text":"2-Feb","value":2},"3":{"text":"3-Mar","value":3},"4":{"text":"4-Apr","value":4},"5":{"text":"5-May","value":5},"6":{"text":"6-Jun","value":6},"7":{"text":"7-Jul","value":7},"8":{"text":"8-Aug","value":8},"9":{"text":"9-Sep","value":9},"10":{"text":"10-Oct","value":10},"11":{"text":"11-Nov","value":11},"12":{"text":"12-Dec","value":12}}} ); #>
@@ -2202,6 +2218,7 @@
 			<img id="preview-app-icon" src="{{ data.url }}" alt="Preview as an app icon"/>
 		</div>
 	</script>
+
 		</div><!-- end widget templates -->
 		<script src="../../build/wp-includes/js/tinymce/tinymce.min.js"></script>
 		<script src="../../build/wp-includes/js/tinymce/plugins/wptextpattern/plugin.js"></script>