From 2ee133f6f8df95b8ffe419402650e065b4e0168f Mon Sep 17 00:00:00 2001
From: Gary Katsevman <git@gkatsev.com>
Date: Tue, 7 Mar 2017 11:26:09 -0500
Subject: [PATCH] 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              |  2 +-
 src/css/components/_subs-caps.scss            | 13 ++++---
 .../text-track-controls/subs-caps-button.js   |  3 +-
 .../subs-caps-menu-item.js                    | 37 +++++++++++++++++++
 .../text-track-controls/text-track-button.js  |  4 +-
 5 files changed, 50 insertions(+), 9 deletions(-)
 create mode 100644 src/js/control-bar/text-track-controls/subs-caps-menu-item.js

diff --git a/src/css/components/_control.scss b/src/css/components/_control.scss
index 5b9d18cfb..a1c2f5999 100644
--- a/src/css/components/_control.scss
+++ b/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;
 
diff --git a/src/css/components/_subs-caps.scss b/src/css/components/_subs-caps.scss
index bd35d28a0..550e7f19a 100644
--- a/src/css/components/_subs-caps.scss
+++ b/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;
 }
diff --git a/src/js/control-bar/text-track-controls/subs-caps-button.js b/src/js/control-bar/text-track-controls/subs-caps-button.js
index e5dd4bfbc..3ce40b803 100644
--- a/src/js/control-bar/text-track-controls/subs-caps-button.js
+++ b/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;
   }
 
diff --git a/src/js/control-bar/text-track-controls/subs-caps-menu-item.js b/src/js/control-bar/text-track-controls/subs-caps-menu-item.js
new file mode 100644
index 000000000..403b9867d
--- /dev/null
+++ b/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;
diff --git a/src/js/control-bar/text-track-controls/text-track-button.js b/src/js/control-bar/text-track-controls/text-track-button.js
index 28da312ec..3b220d1e7 100644
--- a/src/js/control-bar/text-track-controls/text-track-button.js
+++ b/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