fix: Ensure aria-labelledby values in track settings are valid (#8711)

videojs · May 6, 2024 · ad3be35 · ad3be35
1 parent 3df0e9b
commit ad3be35
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/src/js/tracks/text-track-settings.js b/src/js/tracks/text-track-settings.js
@@ -86,7 +86,7 @@ const selectConfigs = {
 
   edgeStyle: {
     selector: '.vjs-edge-style > select',
-    id: '%s',
+    id: '',
     label: 'Text Edge Style',
     options: [
       ['none', 'None'],
@@ -99,7 +99,7 @@ const selectConfigs = {
 
   fontFamily: {
     selector: '.vjs-font-family > select',
-    id: 'captions-font-family-%s',
+    id: '',
     label: 'Font Family',
     options: [
       ['proportionalSansSerif', 'Proportional Sans-Serif'],
@@ -114,7 +114,7 @@ const selectConfigs = {
 
   fontPercent: {
     selector: '.vjs-font-percent > select',
-    id: 'captions-font-size-%s',
+    id: '',
     label: 'Font Size',
     options: [
       ['0.50', '50%'],

diff --git a/test/unit/tracks/text-track-select.test.js b/test/unit/tracks/text-track-select.test.js
@@ -23,3 +23,21 @@ QUnit.test('should associate with <select>s with <options>s', function(assert) {
     "select property 'aria-labelledby' is included in its option's property 'aria-labelledby'"
   );
 });
+
+QUnit.test('aria-labelledby values must be valid and unique', function(assert) {
+  const player = TestHelpers.makePlayer({
+    tracks
+  });
+  const albs = player.$$('.vjs-text-track-settings select[aria-labelledby]');
+
+  albs.forEach(el => {
+    const ids = el.getAttribute('aria-labelledby').split(' ');
+    const invalidIds = ids.find(id => {
+      return !(player.$(`#${id}`));
+    });
+
+    assert.notOk(invalidIds, `${el.id} has valid aria-labelledby ids`);
+
+    assert.ok((new Set(ids)).size === ids.length, `${el.id} does not contain duplicate ids`);
+  });
+});