fix(a11y): the skip link does not move focus in Safari #158

Nytt ärende

Stängd

öppnade 2026-08-02 12:30:09 +00:00 av supernaut · 0 kommentarer

supernaut kommenterad

2026-08-02 12:30:09 +00:00

Ägare

src/layouts/base.astro:144 targets #main-content, and src/layouts/base.astro:147
<main id="main-content"> has no tabindex="-1" (the only tabindex in src/ is in
signup-form.astro).

WebKit does not move focus to a non-focusable fragment target: it scrolls, leaves focus in the
header, and the next Tab walks straight back into the navigation. On iOS every browser is WebKit,
so the bypass-blocks mechanism scrolls without actually bypassing anything — on pages where the
chrome is 278-360 px and roughly fourteen tab stops.

Fix

Add tabindex="-1" to <main id="main-content">, with a comment saying why, so it does not look
removable.

Done when

On iOS Safari (or macOS Safari), activating the skip link moves focus into <main>: the next Tab
lands on the first link in the content, not back in the header.
The outline behaviour of <main> itself is unchanged for mouse users.

Part of gitborg/gitborg-docs#67.

`src/layouts/base.astro:144` targets `#main-content`, and `src/layouts/base.astro:147` `<main id="main-content">` has no `tabindex="-1"` (the only `tabindex` in `src/` is in `signup-form.astro`). WebKit does not move focus to a non-focusable fragment target: it scrolls, leaves focus in the header, and the next Tab walks straight back into the navigation. On iOS every browser is WebKit, so the bypass-blocks mechanism scrolls without actually bypassing anything — on pages where the chrome is 278-360 px and roughly fourteen tab stops. ## Fix Add `tabindex="-1"` to `<main id="main-content">`, with a comment saying why, so it does not look removable. ## Done when - On iOS Safari (or macOS Safari), activating the skip link moves focus into `<main>`: the next Tab lands on the first link in the content, not back in the header. - The outline behaviour of `<main>` itself is unchanged for mouse users. Part of gitborg/gitborg-docs#67.

supernaut lade till etiketterna

area/web

ready-for-implementation

type

bug

2026-08-02 12:31:27 +00:00

~~supernaut refererade till detta ärende från bitborg/bitborg-docs 2026-08-02 12:32:47 +00:00~~

Small-screen portal experience: reflow, target size and navigation accessibility #67

supernaut lade till detta till projektet Bitborg Web

2026-08-02 12:34:24 +00:00

supernaut refererade till detta ärende från en incheckning

2026-08-02 15:50:40 +00:00