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

[gkatsev]

We want to visually show that captions items in the subs-caps menu are captions vs subtitles using the captions icon. However, we want to hide this from screen readers. Moreover, we can't display things visually that isn't also conveyed to screen readers.
To do so, I created a Subs Caps Menu Item which adds an icon placeholder for the icon and a localized text of captions for screen readers.

@OwenEdwards can you review this please? Thanks!

[OwenEdwards]

The SubCaps menu doesn't render properly with IE11 - I don't know if this was true before this PR, but without it rendering properly it's difficult to review it with JAWS.

[gkatsev]

Hm... I'll take a look.

[gkatsev]

@OwenEdwards are you using npm start? I've noticed that sometimes you have to kick the styles into gear with it by saving a scss file. It seems to be working for me after I did that.

[OwenEdwards]

I'm seeing this consistently with IE11 when I build this locally and then load combined-tracks.html.example from my server with Ctrl-F5:

But testing with JAWS+IE, NVDA+Firefox and Safari+VoiceOver on macOS, this change works as expected - so this is just a visual issue with IE, otherwise it's good.

[gkatsev]

Awesome, thanks @OwenEdwards. I'll have to look at it some more in IE11. Maybe I'll try the combined-tracks example page directly as well, might be configured differently than my sandbox page at this point.

[gkatsev]

Oh, was just able to reproduce what you're seeing @OwenEdwards. I'll investigate.

[gkatsev]

This makes it so that only direct descendants of vjs-control gets these defaults for icon-placeholder.
In IE11, with the subs-caps menu, the icon-placeholder gets this font-size and the font-size from below applied in that order, so, the menu ends up overflowing and disappearing or looking weird.

[OwenEdwards]

LGTM.