Accessibility: Media: Allow users to set a proper language for Video subtitles.

For a number of years, subtitles track added to videos were always set to "English" regardless of the actual subtitles language.

By making the track `srclang`, `label`, and `kind` attributes editable, content authors are now able to set a language that matches the actual track content.

Props BjornW, audrasjb, birgire, karmatosed, sabernhardt, afercia.
Fixes #47559.

Built from https://develop.svn.wordpress.org/trunk@46373


git-svn-id: http://core.svn.wordpress.org/trunk@46172 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/css/media-views-rtl.css

@@ -2126,6 +2126,16 @@
 	font-style: normal;
 }
 
+.media-embed .content-track + .description {
+	line-height: 1.4;
+	/* The !important needs to override a high specificity selector from wp-medialement.css */
+	max-width: none !important;
+}
+
+.media-embed .remove-track {
+	margin-bottom: 10px;
+}
+
 .image-details .embed-media-settings .setting,
 .image-details .embed-media-settings .setting-group {
 	float: none;

wp-includes/css/media-views.css

@@ -2126,6 +2126,16 @@
 	font-style: normal;
 }
 
+.media-embed .content-track + .description {
+	line-height: 1.4;
+	/* The !important needs to override a high specificity selector from wp-medialement.css */
+	max-width: none !important;
+}
+
+.media-embed .remove-track {
+	margin-bottom: 10px;
+}
+
 .image-details .embed-media-settings .setting,
 .image-details .embed-media-settings .setting-group {
 	float: none;

wp-includes/media-template.php

@@ -1355,11 +1355,22 @@ function wp_print_media_templates() {
 					var content = '';
 					if ( ! _.isEmpty( data.model.content ) ) {
 						var tracks = jQuery( data.model.content ).filter( 'track' );
-						_.each( tracks.toArray(), function (track) {
+						_.each( tracks.toArray(), function( track, index ) {
 							content += track.outerHTML; #>
-						<label for="video-details-track" class="name"><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></label>
+						<label for="video-details-track-{{ index }}" class="name"><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></label>
-						<input class="content-track" type="text" id="video-details-track" readonly value="{{ track.outerHTML }}" />
+						<input class="content-track" type="text" id="video-details-track-{{ index }}" aria-describedby="video-details-track-desc-{{ index }}" value="{{ track.outerHTML }}" />
-						<button type="button" class="button-link remove-setting remove-track"><?php _ex( 'Remove video track', 'media' ); ?></button>
+						<span class="description" id="video-details-track-desc-{{ index }}">
+						<?php
+							printf(
+								/* translators: 1: "srclang" HTML attribute, 2: "label" HTML attribute, 3: "kind" HTML attribute. */
+								__( 'The %1$s, %2$s, and %3$s values can be edited to set the video track language and kind.' ),
+								'srclang',
+								'label',
+								'kind'
+							);
+						?>
+						</span>
+						<button type="button" class="button-link remove-setting remove-track"><?php _ex( 'Remove video track', 'media' ); ?></button><br/>
 						<# } ); #>
 					<# } else { #>
 					<span class="name"><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></span><br />

wp-includes/version.php

@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.3-beta2-46372';
+$wp_version = '5.3-beta2-46373';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.