Focusable elements present before component resume in Qwik SSR

Answer

Qwik does not automatically move focus or announce route changes after a component resumes from server‑side rendered HTML. Developers must handle focus and ARIA live regions manually.

Confirmed facts

• Qwik’s SSR always emits focusable HTML (buttons, links, inputs) immediately, regardless of whether the client‑side JavaScript has loaded.
• The public Qwik API does not expose a built‑in focus‑trap or route‑change announcement primitive.

Likely explanation

Because resumability defers component code execution until after the initial paint, the framework leaves the DOM as‑is from the server. No internal mechanism shifts focus or updates live regions when the client code finally runs, so keyboard and screen‑reader users experience the focus position that existed in the static markup.

Steps to manage focus and announcements

1. In your JSX, ensure any element that should receive focus after resumption has an appropriate id or ref and, if needed, an aria-live region for announcements.
2. Use the useResumption$ hook (or a client‑only useClientEffect$) to run code after the component has resumed:

import { useResumption$ } from '@builder.io/qwik';

export default component(() => {
  const myRef = useRef(null);

  useResumption$(() => {
    // Move focus to the desired element
    myRef.value?.focus();
    // Optionally update an ARIA live region
    const live = document.getElementById('announcement');
    if (live) live.textContent = 'Page loaded';
  });

  return (
    <>
      Continue
      
    
  );
});

3. Verify the behavior:
• Open the page with JavaScript disabled (or throttle network) and inspect the initial DOM for focusable elements and any aria-live attributes.
• Enable JavaScript, trigger resumption, and use DevTools to call document.activeElement or observe focus movement.
• Run a screen‑reader emulator (e.g., VoiceOver, NVDA) to confirm that the live region announcement is spoken after resumption.

Missing diagnostic detail

Are you using pure SSR, incremental static generation (ISR), or a fully client‑rendered SPA mode? The answer changes only if you rely on ISR where the markup may be stale; otherwise the manual focus handling described above applies.