Changeset 46373

Timestamp:

10/01/2019 10:04:43 PM (5 years ago)

Author:

afercia

Message:

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.

Location:

trunk/src/wp-includes

Files:

• css/media-views.css (modified) (1 diff)
• media-template.php (modified) (1 diff)

trunk/src/wp-includes/css/media-views.css

@@ -2127 +2127 @@
 }
 
+.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 {

trunk/src/wp-includes/media-template.php

@@ -1356 +1356 @@
                     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 { #>