Disappearing Focus
Critical - WCAG Level A
What the issue is:
When a control (commonly a button) removes itself from the DOM during activation (for example a "Remove" button that deletes its list item), the keyboard focus can disappear or become undefined. This leaves keyboard and assistive technology users without a predictable focus target and breaks sequential navigation.
Why it matters:
Screen reader users and keyboard-only users rely on a stable, visible focus to continue interacting with the page. If the active element is removed without moving focus, users can be left disoriented, trapped, or unable to continue keyboard navigation. This can also break expected programmatic relationships and cause users to lose context.
How to fix it:
Before removing the element that currently has focus, programmatically move focus to a logical next element. Typical strategies:
If there is a next focusable element (e.g., the next item's control or a sibling), call nextElement.focus() before or immediately after DOM update.
If no logical focusable element exists, move focus to a container that represents the next logical focus target; make it focusable temporarily with tabindex="-1", focus it, and (optionally) remove the tabindex later.
If the removal is asynchronous (e.g., React state updates), compute the target element first (or use requestAnimationFrame/setTimeout) and ensure focus() is called after render. Use aria-live regions to announce structural changes when appropriate.
Best practices:
Choose a semantically appropriate focus target (next item, previous item, parent container, or an action button).
Prefer focusing an existing focusable element; only add tabindex="-1" when necessary.
Restore or clean up temporary attributes.
Keep focus movement predictable and consistent across similar components.
Common mistakes:
Trying to focus the element that is about to be removed (it will fail once removed).
Not handling edge cases (last item removed).
Forgetting to wait for the DOM update in frameworks resulting in focus calls on stale elements.
Relying on visual focus only (CSS) or assuming screen reader will track DOM changes automatically. Implementing explicit, immediate, and predictable focus management ensures accessible, usable behavior for keyboard and assistive technology users.