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

@@ -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);

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({