Subtitle options are not shown when in focus

[Michael-Detmers]

Captions are displayed in the mejs__captions-selector flyout menu. This is displayed automatically, but unfortunately hidden with the class mejs__offscreen as soon as the subtitle switch is no longer focused and the focus is set directly to a subtitle selection, for example.

Shouldn't a pure CSS solution be possible for the flyout display logic? It works as a workaround:

/* Revert offscreen-class; show flyout. */
.mejs__captions-button > button:focus-visible ~ .mejs__captions-selector, 
.mejs__captions-selector:focus-within {
  background: rgba(50,50,50,.7);
  border: 1px solid transparent;
  clip: initial;
  clip-path: unset;
  height: auto;
  width: 5.375rem;
  margin: 0 -2.6875rem 0 0;
  word-wrap: inherit;
}

Additionally:

/*  Focus has to be visible and perceivable. An outline would be even better. */
.mejs__captions-selector-input:focus-visible ~ label {
  text-decoration: underline;
}