From e491b2bc6abb50b0fba26b33c77fd4a62ccf5dfb Mon Sep 17 00:00:00 2001
From: Gary Pendergast <gary@pento.net>
Date: Fri, 26 Oct 2018 07:41:45 +0000
Subject: [PATCH] Accessibility: Media: Improve the usage of a few label
 elements in the media templates.

Label elements should only be used for labelable elements.
- `Uploaded By` and `Uploaded To` aren't form controls and shouldn't be associated with labels
- changes the labels for media source, alternate sources, poster image, and tracks to solve a layout issue and explicitly associate the labels to their form fields (previously, the labels were wrapping also the Remove buttons)

Merges [42444] to the 5.0 branch.

Props Presskopp, afercia.
Fixes #38759, #40468.


Built from https://develop.svn.wordpress.org/branches/5.0@43829


git-svn-id: http://core.svn.wordpress.org/branches/5.0@43658 1a063a9b-81f0-0310-95a4-ce76da25c4cd
---
 wp-includes/media-template.php | 67 +++++++++++++++++-----------------
 wp-includes/version.php        |  2 +-
 2 files changed, 34 insertions(+), 35 deletions(-)

diff --git a/wp-includes/media-template.php b/wp-includes/media-template.php
index c45f3f00a7..190f9044d3 100644
--- a/wp-includes/media-template.php
+++ b/wp-includes/media-template.php
@@ -69,7 +69,7 @@ function wp_underscore_video_template() {
 		h = Math.ceil( ( data.model.height * w ) / data.model.width );
 	} else {
 		h = data.model.height;
- 	}
+	}
 
 	if ( w ) {
 		w_rule = 'width: ' + w + 'px; ';
@@ -103,8 +103,8 @@ function wp_underscore_video_template() {
 	endforeach;
 	?><#
 	<?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
-	?> if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
-		#> <?php echo $attr ?><#
+	?> if ( ! _.isUndefined( data.model.<?php echo $attr; ?> ) && data.model.<?php echo $attr; ?> ) {
+		#> <?php echo $attr; ?><#
 	}
 	<?php endforeach ?>#>
 >
@@ -408,19 +408,19 @@ function wp_print_media_templates() {
 					<span class="name"><?php _e('Description'); ?></span>
 					<textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
 				</label>
-				<label class="setting">
+				<div class="setting">
 					<span class="name"><?php _e( 'Uploaded By' ); ?></span>
 					<span class="value">{{ data.authorName }}</span>
-				</label>
+				</div>
 				<# if ( data.uploadedToTitle ) { #>
-					<label class="setting">
+					<div class="setting">
 						<span class="name"><?php _e( 'Uploaded To' ); ?></span>
 						<# if ( data.uploadedToLink ) { #>
 							<span class="value"><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a></span>
 						<# } else { #>
 							<span class="value">{{ data.uploadedToTitle }}</span>
 						<# } #>
-					</label>
+					</div>
 				<# } #>
 				<div class="attachment-compat"></div>
 			</div>
@@ -1045,11 +1045,11 @@ function wp_print_media_templates() {
 						delete html5types[ ext ];
 					}
 				#>
-				<label class="setting">
-					<span>SRC</span>
-					<input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
+				<div class="setting">
+					<label for="audio-source"><?php _e( 'URL' ); ?></label>
+					<input type="text" id="audio-source" readonly data-setting="src" value="{{ data.model.src }}" />
 					<button type="button" class="button-link remove-setting"><?php _e( 'Remove audio source' ); ?></button>
-				</label>
+				</div>
 				<# } #>
 				<?php
 
@@ -1059,11 +1059,11 @@ function wp_print_media_templates() {
 						delete html5types.<?php echo $type ?>;
 					}
 				#>
-				<label class="setting">
-					<span><?php echo strtoupper( $type ) ?></span>
-					<input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{ data.model.<?php echo $type ?> }}" />
+				<div class="setting">
+					<label for="<?php echo $type . '-source'; ?>"><?php echo strtoupper( $type ); ?></span>
+					<input type="text" id="<?php echo $type . '-source'; ?>" readonly data-setting="<?php echo $type; ?>" value="{{ data.model.<?php echo $type; ?> }}" />
 					<button type="button" class="button-link remove-setting"><?php _e( 'Remove audio source' ); ?></button>
-				</label>
+				</div>
 				<# } #>
 				<?php endforeach ?>
 
@@ -1128,11 +1128,11 @@ function wp_print_media_templates() {
 						delete html5types[ ext ];
 					}
 				#>
-				<label class="setting">
-					<span>SRC</span>
-					<input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
+				<div class="setting">
+					<label for="video-source"><?php _e( 'URL' ); ?></label>
+					<input type="text" id="video-source" readonly data-setting="src" value="{{ data.model.src }}" />
 					<button type="button" class="button-link remove-setting"><?php _e( 'Remove video source' ); ?></button>
-				</label>
+				</div>
 				<# } #>
 				<?php foreach ( $video_types as $type ):
 				?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) {
@@ -1140,11 +1140,11 @@ function wp_print_media_templates() {
 						delete html5types.<?php echo $type ?>;
 					}
 				#>
-				<label class="setting">
-					<span><?php echo strtoupper( $type ) ?></span>
-					<input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{ data.model.<?php echo $type ?> }}" />
+				<div class="setting">
+					<label for="<?php echo $type . '-source'; ?>"><?php echo strtoupper( $type ); ?></label>
+					<input type="text" id="<?php echo $type . '-source'; ?>" readonly data-setting="<?php echo $type; ?>" value="{{ data.model.<?php echo $type; ?> }}" />
 					<button type="button" class="button-link remove-setting"><?php _e( 'Remove video source' ); ?></button>
-				</label>
+				</div>
 				<# } #>
 				<?php endforeach ?>
 				</div>
@@ -1161,11 +1161,11 @@ function wp_print_media_templates() {
 				<# } #>
 
 				<# if ( ! _.isEmpty( data.model.poster ) ) { #>
-				<label class="setting">
-					<span><?php _e( 'Poster Image' ); ?></span>
-					<input type="text" disabled="disabled" data-setting="poster" value="{{ data.model.poster }}" />
+				<div class="setting">
+					<label for="poster-image"><?php _e( 'Poster Image' ); ?></label>
+					<input type="text" id="poster-image" readonly data-setting="poster" value="{{ data.model.poster }}" />
 					<button type="button" class="button-link remove-setting"><?php _e( 'Remove poster image' ); ?></button>
-				</label>
+				</div>
 				<# } #>
 				<div class="setting preload">
 					<span><?php _e( 'Preload' ); ?></span>
@@ -1186,24 +1186,23 @@ function wp_print_media_templates() {
 					<span><?php _e( 'Loop' ); ?></span>
 				</label>
 
-				<label class="setting" data-setting="content">
-					<span><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></span>
+				<div class="setting" data-setting="content">
 					<#
 					var content = '';
 					if ( ! _.isEmpty( data.model.content ) ) {
 						var tracks = jQuery( data.model.content ).filter( 'track' );
 						_.each( tracks.toArray(), function (track) {
 							content += track.outerHTML; #>
-						<p>
-							<input class="content-track" type="text" value="{{ track.outerHTML }}" />
-							<button type="button" class="button-link remove-setting remove-track"><?php _ex( 'Remove video track', 'media' ); ?></button>
-						</p>
+						<label for="video-track"><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></span>
+						<input class="content-track" type="text" id="video-track" readonly value="{{ track.outerHTML }}" />
+						<button type="button" class="button-link remove-setting remove-track"><?php _ex( 'Remove video track', 'media' ); ?></button>
 						<# } ); #>
 					<# } else { #>
+					<span><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></span>
 					<em><?php _e( 'There are no associated subtitles.' ); ?></em>
 					<# } #>
 					<textarea class="hidden content-setting">{{ content }}</textarea>
-				</label>
+				</div>
 			</div>
 		</div>
 	</script>
diff --git a/wp-includes/version.php b/wp-includes/version.php
index 5bc46f0c86..1f0f8804b2 100644
--- a/wp-includes/version.php
+++ b/wp-includes/version.php
@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.0-beta1-43828';
+$wp_version = '5.0-beta1-43829';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.