/** * The skip link in index.html targets `#main-content`, a default that predates * Daylight. Once the design has mounted, point it at the app's own
and * move focus there on activation: a fragment is a page route in this app, so * following the href would navigate to a page that does not exist. * * Polls on a timer rather than rAF: a tab opened in the background gets no * animation frames at all, and the link has to be right by the time the tab is * fronted. Returns the cleanup. */ export function retargetSkipLink(doc: Document = document): () => void { let tries = 0; let timer = 0; let skipLink: HTMLElement | null = null; const skip = (event: MouseEvent) => { const main = doc.querySelector("main[id]"); if (!main) return; event.preventDefault(); main.focus({ preventScroll: true }); main.scrollIntoView({ block: "start", behavior: "instant" }); }; const settle = () => { const prepaint = doc.getElementById("prepaint-skip"); if (!prepaint) return; const main = doc.querySelector("main[id]"); if (main) { prepaint.setAttribute("href", `#${main.id}`); skipLink = prepaint; prepaint.addEventListener("click", skip); return; } if (++tries < 40) timer = window.setTimeout(settle, 50); }; settle(); return () => { window.clearTimeout(timer); skipLink?.removeEventListener("click", skip); }; }