From ad3be357d5f5b66a629e2eb436f4750d5a26d084 Mon Sep 17 00:00:00 2001
From: mister-ben <git@misterben.me>
Date: Mon, 6 May 2024 18:58:47 +0200
Subject: [PATCH] fix: Ensure aria-labelledby values in track settings are
 valid (#8711)

---
 src/js/tracks/text-track-settings.js       |  6 +++---
 test/unit/tracks/text-track-select.test.js | 18 ++++++++++++++++++
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/js/tracks/text-track-settings.js b/src/js/tracks/text-track-settings.js
index 2c9c63ce30..a051f2a674 100644
--- 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
index 1df96b2ca1..059dab63c3 100644
--- 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`);
+  });
+});