SkipLink
The first thing in the tab order, visible only once it has focus.
Why it exists
Every app in this suite renders a rail with a dozen navigation links before the page content. For a keyboard or screen reader user that is a dozen tab presses before reaching the thing they came for, on every page.
No app in the platform had one
Try it
Click just before the link below and press Tab. It is off screen until it has focus, and on screen the moment it does.
Tab into this box. The link appears in the top-left corner.
…and this is where it lands.
In both themes
light
dark
Guidance
Use it when
- Automatically, by adopting AppShell.
- By hand only in a layout that does not use the shell — and then it must be the first focusable element in the document.
Reach for something else when
- Hiding it with display:none or visibility:hidden. Both remove it from the tab order, which is the usual way a skip link exists and does not work.
- Pointing it at an element that cannot take focus. Some browsers scroll to the target and leave focus in the nav, so the next Tab goes straight back.
- More than one or two. A page with five skip links has a navigation problem the links are papering over.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| targetId | string | "azalea-main" | The landmark to jump to. AppShell puts this id on <main>. |
| children | ReactNode | "Skip to content" | The label. |
Accessibility
It uses sr-only with focus:not-sr-only, so it is off screen and still focusable, and it is absolutely positioned when visible so appearing does not push the page down. The target carries tabIndex=-1 so focus really moves there rather than the browser merely scrolling. tests/accessibility.test.ts asserts all three, and that the link's default target is an id AppShell actually renders — a skip link pointing at nothing looks identical to one that works.