fix: removes duplicate id in text track settings (#8755)

## Description Prevents a duplicate id in text track settings. Fixes #8754 ## Specific Changes proposed The text edge settings were erroneously duplicating the id generated for the background colour. Changes to a unique name. Adds a general test for duplicate ids. ## Requirements Checklist - [x] Feature implemented / Bug fixed - [ ] If necessary, more likely in a feature request than a bug fix - [x] Change has been verified in an actual browser (Chrome, Firefox, IE) - [x] Unit Tests updated or fixed - [ ] Docs/guides updated - [ ] Example created ([starter template on JSBin](https://codepen.io/gkatsev/pen/GwZegv?editors=1000#0)) - [x] Has no DOM changes which impact accessiblilty or trigger warnings (e.g. Chrome issues tab) - [x] Has no changes to JSDoc which cause `npm run docs:api` to error - [ ] Reviewed by Two Core Contributors
videojs · Jun 1, 2024 · a10d258 · a10d258
1 parent 8729e31
commit a10d258
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git 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
@@ -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');
+});