fix(subs-caps-button): captions items should hide icon from SR (#4158)

Move the CC icon in the SubsCapsMenuItem into an icon-placeholder span. Also, include that information for the screen reader.
In addition, only apply default sizing to icon-placeholder if they're direct descendants of a vjs-control.

src/css/components/_control.scss

@@ -10,7 +10,7 @@
   width: 4em;
   @include flex(none);
 
-  & .vjs-icon-placeholder:before {
+  & > .vjs-icon-placeholder:before {
     font-size: 1.8em;
     line-height: 1.67;
 

src/css/components/_subs-caps.scss

@@ -14,9 +14,12 @@
   @extend .vjs-icon-subtitles;
 }
 
-.video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text:after {
-  content: " \f10d";
-  font-family: VideoJS;
-  vertical-align: bottom;
-  font-size: 1.5em;
+.video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
+  position: absolute;
+}
+.video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before {
+  font-family: VideoJS;
+  content: "\f10d";
+  font-size: 1.5em;
+  line-height: inherit;
 }

src/js/control-bar/text-track-controls/subs-caps-button.js

@@ -4,6 +4,7 @@
 import TextTrackButton from './text-track-button.js';
 import Component from '../../component.js';
 import CaptionSettingsMenuItem from './caption-settings-menu-item.js';
+import SubsCapsMenuItem from './subs-caps-menu-item.js';
 import toTitleCase from '../../utils/to-title-case.js';
 /**
  * The button component for toggling and selecting captions and/or subtitles
@@ -79,7 +80,7 @@ class SubsCapsButton extends TextTrackButton {
       items.push(new CaptionSettingsMenuItem(this.player_, {kind: this.label_}));
     }
 
-    items = super.createItems(items);
+    items = super.createItems(items, SubsCapsMenuItem);
     return items;
   }
 

src/js/control-bar/text-track-controls/subs-caps-menu-item.js

@@ -0,0 +1,37 @@
+/**
+ * @file subs-caps-menu-item.js
+ */
+import TextTrackMenuItem from './text-track-menu-item.js';
+import Component from '../../component.js';
+import {assign} from '../../utils/obj';
+
+/**
+ * SubsCapsMenuItem has an [cc] icon to distinguish captions from subtitles
+ * in the SubsCapsMenu.
+ *
+ * @extends TextTrackMenuItem
+ */
+class SubsCapsMenuItem extends TextTrackMenuItem {
+
+  createEl(type, props, attrs) {
+    let innerHTML = `<span class="vjs-menu-item-text">${this.localize(this.options_.label)}`;
+
+    if (this.options_.track.kind === 'captions') {
+      innerHTML += `
+        <span aria-hidden="true" class="vjs-icon-placeholder"></span>
+        <span class="vjs-control-text"> ${this.localize('Captions')}</span>
+      `;
+    }
+
+    innerHTML += '</span>';
+
+    const el = super.createEl(type, assign({
+      innerHTML
+    }, props), attrs);
+
+    return el;
+  }
+}
+
+Component.registerComponent('SubsCapsMenuItem', SubsCapsMenuItem);
+export default SubsCapsMenuItem;

src/js/control-bar/text-track-controls/text-track-button.js

@@ -41,7 +41,7 @@ class TextTrackButton extends TrackButton {
    * @return {TextTrackMenuItem[]}
    *         Array of menu items that were created
    */
-  createItems(items = []) {
+  createItems(items = [], TrackMenuItem = TextTrackMenuItem) {
 
     // Label is an overide for the [track] off label
     // USed to localise captions/subtitles
@@ -64,7 +64,7 @@ class TextTrackButton extends TrackButton {
 
       // only add tracks that are of an appropriate kind and have a label
       if (this.kinds_.indexOf(track.kind) > -1) {
-        const item = new TextTrackMenuItem(this.player_, {
+        const item = new TrackMenuItem(this.player_, {
           track,
           // MenuItem is selectable
           selectable: true