• Success Criterion 1.4.13
  • Conformance level AA

Focus-Triggered Popover That Steals or Dumps Keyboard Focus

1.4.13 — Content on Hover or Focus

Scenario

Setting

A streaming music app's search results

What’s wrong

Focus-triggered popovers that steal or dump focus, closing themselves (interacts with 3.2.1).

Example 

artistLink.addEventListener('focus', function () {
  quickView.style.display = 'block';
  quickView.querySelector('.close-btn').focus(); // focus is yanked into the popover immediately
});
quickView.addEventListener('focusout', function () {
  quickView.style.display = 'none'; // and hides again as soon as focus leaves it
});

Why it matters

A keyboard user tabbing to an artist name gets yanked into the quick-view popover and, one tab later, the popover vanishes because focus left it, breaking their navigation flow.

How to test

Focus a control that triggers a popover: if it steals focus unexpectedly or the popover closes itself and dumps focus elsewhere, it fails.

How to fix

Let focus remain on the artist-name trigger; don't auto-move focus into a popover just because it opened on focus.

.artist-name:focus + .quick-view { display: block; }

Outcome

A keyboard user tabs past an artist's quick-view popover in a predictable, uninterrupted sequence.

Who is affected

Keyboard users lose track of where they are on the page when focus is silently redirected and the popover closes underneath them.

Learn more

Related scenarios