From 5d1c84093622b09b9ef5c8ad2d4b68422ccf9570 Mon Sep 17 00:00:00 2001
From: Owen Edwards <owen.r.edwards@gmail.com>
Date: Mon, 7 May 2018 22:17:03 -0700
Subject: [PATCH] Remove spaces from element IDs and ARIA attributes in the
 Captions Settings Dialog (fixes #4688 and #4884)

---
 src/js/tracks/text-track-settings.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/js/tracks/text-track-settings.js b/src/js/tracks/text-track-settings.js
index 90893610e2..7530883fb4 100644
--- a/src/js/tracks/text-track-settings.js
+++ b/src/js/tracks/text-track-settings.js
@@ -313,19 +313,20 @@ class TextTrackSettings extends ModalDialog {
   createElSelect_(key, legendId = '', type = 'label') {
     const config = selectConfigs[key];
     const id = config.id.replace('%s', this.id_);
+    const selectLabelledbyIds = [legendId, id].join(' ').trim();
 
     return [
       `<${type} id="${id}" class="${type === 'label' ? 'vjs-label' : ''}">`,
       this.localize(config.label),
       `</${type}>`,
-      `<select aria-labelledby="${legendId !== '' ? legendId + ' ' : ''}${id}">`
+      `<select aria-labelledby="${selectLabelledbyIds}">`
     ].
       concat(config.options.map(o => {
-        const optionId = id + '-' + o[1];
+        const optionId = id + '-' + o[1].replace(/\W+/g, '');
 
         return [
           `<option id="${optionId}" value="${o[0]}" `,
-          `aria-labelledby="${legendId !== '' ? legendId + ' ' : ''}${id} ${optionId}">`,
+          `aria-labelledby="${selectLabelledbyIds} ${optionId}">`,
           this.localize(o[1]),
           '</option>'
         ].join('');