options in dropdown box to select font family in "subtitle settings" have a typo in id and aria-labelledby attributes - accessibility issue

[alanbo]

Description

Options in dropdown box to select font family in "subtitle settings" have a typo in id and aria-labelledby attributes - accessibility issue.

Steps to reproduce

1. Open subtitles menu
2. Go to subtitles settings
3. Inspect font selection dropdown in developer tools
4. ...or try using screen reader ie. https://www.nvaccess.org/

Results

Expected

I expected to see one id and aria-labelled attribute referring to it. i.e. id="captions-font-family-audio_component_373-Proportional-Sans-Serif"

<option id="captions-font-family-audio_component_373-Proportional-Sans-Serif" value="proportionalSansSerif" aria-labelledby=" captions-font-family-audio_component_373 captions-font-family-audio_component_373-Proportional-Sans-Serif">Proportional Sans-Serif</option>

Actual

There is an unecessary space in id name i.e. id="captions-font-family-audio_component_373-Proportional Sans-Serif"

<option id="captions-font-family-audio_component_373-Proportional Sans-Serif" value="proportionalSansSerif" aria-labelledby=" captions-font-family-audio_component_373 captions-font-family-audio_component_373-Proportional Sans-Serif">Proportional Sans-Serif</option>

Additional Information

versions

videojs

what version of videojs does this occur with?
"video.js": "^6.2.8"

[gkatsev]

Thanks for the issue. This seems like a duplicate of #4688 which should have been fixed as part of v6.4.0 via #4708.
Also, you didn't give us the actual version of Video.js used but rather a version range for a tool like npm, that version range should have picked up our fix in 6.4.0 but it's possible that you're still using 6.2 or 6.3 which still contain the issue.

[alanbo]

@gkatsev the issue still persists in the version v6.6.0 . The problem is also the id name id="captions-font-family-audio_component_373-Proportional Sans-Serif. Your fix in 855adf3 only updates aria-labelledby attribute.