• Success Criterion 2.1.2
  • Conformance level A

Fullscreen Video Player Trapping Focus in Hidden Controls

2.1.2 — No Keyboard Trap

Scenario

Setting

An online marketplace's seller dashboard

What’s wrong

Video players in fullscreen where Esc exits fullscreen but focus remains trapped in hidden controls.

Example 

document.addEventListener('fullscreenchange', () => {
  if (!document.fullscreenElement) {
    // fullscreen exited, but focus is still on the captions button, which display:none just hid
    // no code moves focus back to a visible element
  }
});

Why it matters

A seller who exits fullscreen with Escape finds keyboard focus stuck on an invisible button, so further Tab or Enter presses do nothing until they click.

How to test

Enter fullscreen video, then Tab: if Esc exits fullscreen but focus remains trapped in now-hidden player controls, it fails.

How to fix

Whenever a state change hides the currently focused element, explicitly move focus to a visible, sensible control in the same step.

document.addEventListener('fullscreenchange', () => {
  if (!document.fullscreenElement) {
    document.querySelector('.play-btn').focus();
  }
});

Outcome

A seller exits fullscreen and finds focus waiting on the visible play button, ready for the next Tab press.

Who is affected

Keyboard-only users lose track of focus entirely once it lands on an element hidden by the fullscreen exit.

Learn more

Related scenarios