From f326cf3449651fa9f81d200f05756236e72b8807 Mon Sep 17 00:00:00 2001
From: Owen Edwards <owen.r.edwards@gmail.com>
Date: Tue, 2 Nov 2021 12:59:03 -0700
Subject: [PATCH] fix: set the 'lang' attribute on text track display elements,
 if the language of the track is known (#7493)

Fixes #7487

Co-authored-by: Gary Katsevman <git@gkatsev.com>
---
 src/js/tracks/text-track-display.js  |  3 ++
 test/unit/tracks/text-tracks.test.js | 45 ++++++++++++++++++++++++++++
 2 files changed, 48 insertions(+)

diff --git a/src/js/tracks/text-track-display.js b/src/js/tracks/text-track-display.js
index e8a375ae3d..7c691c2ef5 100644
--- a/src/js/tracks/text-track-display.js
+++ b/src/js/tracks/text-track-display.js
@@ -419,6 +419,9 @@ class TextTrackDisplay extends Component {
 
         Dom.addClass(cueEl, 'vjs-text-track-cue');
         Dom.addClass(cueEl, 'vjs-text-track-cue-' + ((track.language) ? track.language : i));
+        if (track.language) {
+          Dom.setAttribute(cueEl, 'lang', track.language);
+        }
       }
       if (this.player_.textTrackSettings) {
         this.updateDisplayState(track);
diff --git a/test/unit/tracks/text-tracks.test.js b/test/unit/tracks/text-tracks.test.js
index 042e106abc..a60da79ab6 100644
--- a/test/unit/tracks/text-tracks.test.js
+++ b/test/unit/tracks/text-tracks.test.js
@@ -323,6 +323,51 @@ QUnit.test('should check for text track changes when emulating text tracks', fun
   tech.dispose();
 });
 
+QUnit.test('no lang attribute on cue elements if one is provided', function(assert) {
+  const player = TestHelpers.makePlayer();
+  const tt = new TextTrack({
+    tech: player.tech_,
+    mode: 'showing'
+  });
+
+  tt.addCue({
+    id: '1',
+    startTime: 2,
+    endTime: 5
+  });
+  player.tech_.textTracks().addTrack(tt);
+
+  player.currentTime(2);
+  player.trigger('timeupdate');
+
+  assert.notOk(tt.activeCues[0].displayState.hasAttribute('lang'), 'no lang attribute should be set');
+
+  player.dispose();
+});
+
+QUnit.test('set lang attribute on cue elements if one is provided', function(assert) {
+  const player = TestHelpers.makePlayer();
+  const tt = new TextTrack({
+    srclang: 'en',
+    tech: player.tech_,
+    mode: 'showing'
+  });
+
+  tt.addCue({
+    id: '1',
+    startTime: 2,
+    endTime: 5
+  });
+  player.tech_.textTracks().addTrack(tt);
+
+  player.currentTime(2);
+  player.trigger('timeupdate');
+
+  assert.equal(tt.activeCues[0].displayState.getAttribute('lang'), 'en', 'the lang should be set to en');
+
+  player.dispose();
+});
+
 QUnit.test('removes cuechange event when text track is hidden for emulated tracks', function(assert) {
   const player = TestHelpers.makePlayer();
   const tt = new TextTrack({