From da1b6dd1f3630cef586ee3d7655d1268eaa3208e Mon Sep 17 00:00:00 2001
From: mister-ben <git@misterben.me>
Date: Sat, 1 Jun 2024 20:25:13 +0200
Subject: [PATCH] fix: removes duplicate id in text track settings

---
 src/js/tracks/text-track-settings-font.js    |  2 +-
 test/unit/tracks/text-track-settings.test.js | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/js/tracks/text-track-settings-font.js b/src/js/tracks/text-track-settings-font.js
index 17f3e1a09e..39f27ac531 100644
--- a/src/js/tracks/text-track-settings-font.js
+++ b/src/js/tracks/text-track-settings-font.js
@@ -58,7 +58,7 @@ class TextTrackSettingsFont extends Component {
       player,
       {
         id_,
-        legendId: `captions-background-${id_}`,
+        legendId: `captions-edge-style-${id_}`,
         legendText: this.localize('Text Edge Style'),
         className: 'vjs-edge-style vjs-track-setting',
         selects: this.options_.fieldSets[1],
diff --git a/test/unit/tracks/text-track-settings.test.js b/test/unit/tracks/text-track-settings.test.js
index cdaf375ffa..6b8ffe4076 100644
--- a/test/unit/tracks/text-track-settings.test.js
+++ b/test/unit/tracks/text-track-settings.test.js
@@ -397,3 +397,15 @@ QUnit.test('should associate <label>s with <select>s', function(assert) {
   );
 
 });
+
+QUnit.test('should not duplicate ids', function(assert) {
+  const player = TestHelpers.makePlayer({
+    tracks
+  });
+
+  const elements = [...player.el().querySelectorAll('[id]')];
+  const ids = elements.map(el => el.id);
+  const duplicates = elements.filter(el => ids.filter(id => id === el.id).length > 1);
+
+  assert.strictEqual(duplicates.length, 0, 'there should be no duplicate ids');
+});