v0.0.1older

Documentation version

Currently searching v0.0.1

Search pages, component props, utilities and tokens.

↑↓ to move to openesc to close

Open files in your editor

On a Mac, right-click the folder in Finder, hold Option, and choose Copy as Pathname.On Windows, hold Shift, right-click the folder, and choose Copy as path, then delete the quote marks.

ComponentsLumos 0.0.1Open component

SkipLink

The first thing on the page, and the one most sites forget.

Somebody navigating by keyboard starts at the top of every page. Without a skip link they tab through the entire navigation before reaching the content, on every page, every time. SkipLink is a link that stays hidden until it is focused, and then jumps straight to the main content.

BaseLayout renders it first, before anything else, which is the only position that works.

Props

PropTypeDefaultWhat it does
targetstring"main"The id of the element it jumps to, written without the #.
labelstring"Skip to main content"What it says once it is on screen.

Why the target needs tabindex

Jumping to an element moves the scroll position but not always the keyboard focus, which leaves the next Tab press back at the top of the page. The layout gives <main> a tabindex="-1" so focus really lands there. If you point a skip link at your own element, do the same.