add fieldsets and labels to text-track-settings

[marguinbc]

Multiple structural changes for accessibility

• Added fieldset and legends around colors and font settings
• Increased height to 20em to accommodate fieldset and legends
• Added css for fieldset and legends
• setDefault actually sets the default vs using {} null
• Removed --- as default option, replace with what we are actually setting as defaults, improved accessibility as screen readers now read, background color, black, etc.
• Added labels for primary comboboxes for colors, fonts
• Revised tests to check that new defaults are set, restored, etc.

Remaining tasks:
Properly label opacity fields for colors combo boxes
Fix one test I had problems with in 'should restore default settings'

[gkatsev]

is adding another bg opacity necessary? Would it be better to change the value for semi-transparent instead?
The FCC rules for this call for opaque, semi-transparent, and transparent options.
@OwenEdwards does WCAG or a11y have anything to say about these values?

[OwenEdwards]

@gkatsev this is an FCC requirement (FCC 12-9), not a WCAG requirement. Specifically, it calls for:

... at least four settings, opaque (100% opacity), semi-transparent (at 75% or 25% opacity), and transparent (0% opacity)

for background and for window, and three for font (hmm, actually transparent font is essentially what we need for description tracks! That gives me an idea!)

So yes, we need to add another semi-transparent. Whether we need to change the values (to 0.75 and 0.25) is something to discuss, too.

[gkatsev]

I'd vote to change the current semi-transparent from 50% to 75% and not add another option.

[OwenEdwards]

Oh, @marguinbc, you dropped some functionality here I think (right, @gkatsev?). It wasn't clear, but the --- values didn't denote "use the (vjs) defaults", they denoted "use the values in the WebVTT track, don't override them". We need to work out a clearer way to put that in the settings dialog - maybe just None, and add text that this is a color override?

[OwenEdwards]

Hmm, @marguinbc @gkatsev I realize now that this logic around the --- setting is essentially the wrong way round; WebVTT tracks usually have no font settings, in which case they should use the video.js settings, and --- is meaningless. If the text track does have font settings (color, background, etc.) then the option should be whether to override the track's setting with the user's preference or not. So it's really a user setting and an override checkbox. Does that make sense?

[gkatsev]

@OwenEdwards well, there is the reset/defaults button which can unset user overrides but what if I just want to override the background color but not the other options? The --- setting was previously used to denote the "don't do anything" options.

[marguinbc]

What my intent was is since we have a 'selected' for each field, these sort of act as the default. So, I modified setDefault to use the same values.

I also think from an accessibility standpoint, it makes sense for the selected value to be the currently set one and for screen readers to be able to read, foreground color, white...

Doing so I did not account for the case where the user changed the default, saved them, went in to make another change, and decided NOT to apply that change after all. Reset/default would wipe out their previous changes and Done would apply the most recent changes. Not sure how best to resolve that instance.

[gkatsev]

Closing this one as #3281 supercedes it. Thanks for starting the ball rolling on this one @marguinbc!