Selected MenuItem loses background when focused and becomes unreadable

[acmertz]

Description

When you select a MenuItem, its text and background colors change to clearly indicate which item is selected (as expected). However, if the MenuItem receives mouse focus while in this state, its background color reverts to transparent but the dark text remains, making it very difficult to read.

https://codepen.io/acmertz/pen/gOgQWZV

Steps to reproduce

1. Hover over a MenuButton in the control bar that has a menu associated with it (for example, the Captions button)
2. Click on the MenuItem that is currently selected. Notice how the background briefly reverts back to transparent before the Menu disappears, while the text color remains dark.
3. Hover over the MenuButton again. The selected item still has dark text on a dark background.

If the currently selected MenuItem is also the first item in the Menu, then this issue is also easily reproducible by simply clicking the MenuButton so the Menu is locked in its "opened" state. This immediately sets focus to the first (and currently selected) MenuItem and thus reverts the background styles.

Results

Expected

The selected MenuItem always has a white background and dark text.

Actual

If a MenuItem is selected and also has focus, it has dark text on a dark background.

Additional Information

The bug does not occur if you trigger the Menu via your keyboard. The :focus:not(:focus-visible) selector used in the Menu styles appears to be conflicting with the MenuItem's "selected" styles. This looks related to #5558 and #7712.

Versions

Video.js

v7.11.8

Browsers

Chrome/Edge, Firefox

OS

Windows

Plugins

None

[gkatsev]

I guess there's more work to do on top of #7713 😆