From 65c94d5cd8f9c3cc5508ce318d0f12c4eeaff371 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Tue, 1 Oct 2019 22:04:43 +0000
Subject: [PATCH] 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.


git-svn-id: https://develop.svn.wordpress.org/trunk@46373 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-includes/css/media-views.css | 10 ++++++++++
 src/wp-includes/media-template.php  | 19 +++++++++++++++----
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
index c020b110e1..e65148df91 100644
--- a/src/wp-includes/css/media-views.css
+++ b/src/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;
diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php
index d71cca9003..8a4691851c 100644
--- a/src/wp-includes/media-template.php
+++ b/src/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>
-						<input class="content-track" type="text" id="video-details-track" readonly value="{{ track.outerHTML }}" />
-						<button type="button" class="button-link remove-setting remove-track"><?php _ex( 'Remove video track', 'media' ); ?></button>
+						<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-{{ index }}" aria-describedby="video-details-track-desc-{{ index }}" value="{{ track.outerHTML }}" />
+						<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 />