Skip to content

Commit

Permalink
fix: Ensure aria-labelledby values in track settings are valid (#8711)
Browse files Browse the repository at this point in the history
  • Loading branch information
mister-ben authored May 6, 2024
1 parent 3df0e9b commit ad3be35
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 3 deletions.
6 changes: 3 additions & 3 deletions src/js/tracks/text-track-settings.js
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ const selectConfigs = {

edgeStyle: {
selector: '.vjs-edge-style > select',
id: '%s',
id: '',
label: 'Text Edge Style',
options: [
['none', 'None'],
Expand All @@ -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'],
Expand All @@ -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%'],
Expand Down
18 changes: 18 additions & 0 deletions test/unit/tracks/text-track-select.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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`);
});
});

0 comments on commit ad3be35

Please sign in to comment.