How should dynamic DOM updates be designed for accessibility (focus, live regions, semantics)?

Short Interview Answer

Preserve semantics, manage focus on view changes, announce updates via ARIA live regions carefully, and ensure keyboard operability.

Detailed Explanation

When replacing views, move focus to a sensible heading/container so keyboard/AT users aren't stranded. Use semantic elements over div soup. For async status, `aria-live` politeness levels announce without stealing focus. Avoid aggressive live region spam. Keep focus traps correct in modals (`inert`/focus-trap) and restore focus on close. Ensure custom widgets implement keyboard patterns (ARIA Authoring Practices). Test with keyboard and screen readers, not only visuals. This is increasingly a senior frontend interview topic.

Example

status.setAttribute('aria-live', 'polite');
status.textContent = 'Saved';
heading.focus();

Interview Tip

Mention focus management on route changes — high signal.

Common Mistake

Updating content visually while leaving focus on a removed node.