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

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],

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');
+});