Video caption and language buttons do not have standard focus highlight

[bjester]

Observed behavior

Video.js defines styling that highlights an enabled menu/button in the control bar when it's focused. The new caption and caption language buttons accompanying the transcript feature are missing this highlight.

Control	Volume control	Caption control	Caption language control
Status	Present	Missing	Missing
Screenshot

Expected behavior

Controls should have some visual indication of which is active, which control the menu relates to.

User-facing consequences

There may be confusion as to which menu is enabled.

Steps to reproduce

1. Load a video in Kolibri
2. Click on CC or Languages control button in video control bar
3. Observe absence of highlight behind control button icon

Context

Kolibri 0.13 #5631
Occurs in any browser

[indirectlylit]

I don't know about the technical complexity, but when tackling this, we should override the default video.js focus behaviors and instead using our standard default outline for all controls.

The current video.js behavior is fairly subtle and low-contrast:

[radinamatic]

Completely in agreement with @indirectlylit here.
(I remember adding more prominent focus ring styles to video.js we had in KA Lite 4 years ago when I started.)

Let's stick with our standard outline, which is already in your PR 🙂

[pcenov]

@radinamatic this is still extant in 0.15.1

[marcellamaki]

Closed with learningequality/kolibri-design-system#185