SkipLink
"Skip to content": the first link on a page, out of sight until the keyboard reaches it.
Demo
Skip to content
Shift+Tab from the button: the link appears at the top left of the page.
The content the link goes to: it takes the focus, so the keyboard carries on from here.
Get it
It needs theme.qwe, as every component does; or take the whole kit, quillo-ui.qwe. Each component brings its own styles to the pages that show it.
$ curl -O https://quillolang.org/components/ui/theme.qwe$ curl -O https://quillolang.org/components/ui/skip_link.qwemain.qwe
import ui/theme.qwe use theme_cssuse ui/skip_link.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>Example
The code of the preview above.
demos/skip_link.qwe
view SkipLinkDemo() = <div.demo-stack> <div.demo-row> <SkipLink id="skip-link-demo" target="skip-link-demo-content"/> <Button id="skip-link-demo-before" variant="outline" size="sm">Tab from here</Button> <p.demo-note>Shift+Tab from the button: the link appears at the top left of the page.</p> </div> <div.demo-row> <SkipLink target="skip-link-demo-content" shown={true}/> <SkipLink target="skip-link-demo-content" text="Skip to results" shown={true}/> </div> <p.demo-note id="skip-link-demo-content" tabindex="-1" style="padding: 10px; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius-sm)"> The content the link goes to: it takes the focus, so the keyboard carries on from here. </p> </div>Source
ui/skip_link.qwe
// SkipLink: "Skip to content", the first thing the keyboard reaches on a page. It is// out of sight until it is focused (Tab from the address bar), then shows at the top// left; following it moves the focus past the navigation to the page's content.// Put it first in <body>, and give the content an id.//// <body><SkipLink target="main"/> <Navbar .../> <main id="main" tabindex="-1">...</main></body>// <SkipLink target="results" text="Skip to results"/>//// target: the id of the element to go to ("main"). The element should take focus// (a <main>, or anything with tabindex="-1"), so the keyboard carries on from there.// text: the link's text ("Skip to content"). shown: keep it in view (to see it in a// page's docs; it still moves the focus).import ui/theme.qwe use ui_clslet skip_link_css = css`.ui-skip { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 16px; border-radius: var(--ui-radius-sm); background: var(--ui-accent); color: var(--ui-accent-fg); font: 500 14px/1 var(--ui-font); text-decoration: none; box-shadow: var(--ui-shadow-lg); transform: translateY(calc(-100% - 16px)); opacity: 0; transition: transform .15s, opacity .15s;}.ui-skip:focus, .ui-skip-shown { outline: none; transform: none; opacity: 1; }.ui-skip:focus { box-shadow: var(--ui-shadow-lg), 0 0 0 3px var(--ui-accent-fg); }.ui-skip-shown { position: static; display: inline-block; box-shadow: var(--ui-shadow); }@media (prefers-reduced-motion: reduce) { .ui-skip { transition: none; } }`view SkipLink(target: str = "main", text: str = "Skip to content", shown: bool = false, id: str? = null, class: str? = null) { style global skip_link_css <a class={ui_cls(["ui-skip", shown && "ui-skip-shown", class])} id={id} href={`#${target}`}>{text}</a>}Related
AlphabetIndexA to Z links into a list sorted by name; letters with nothing under them stay in place, disabled.4 views · 6 downloadsBreadcrumbsWhere this page sits: a trail of links up to the home page, the last one marked as this page.5 views · 6 downloadsCollapsibleNavSide navigation in groups that fold under their titles, the browser remembering which are open.6 views · 7 downloadsDirectoryNavA long list of names grouped under sticky letter headers, with a row of letters at the top that jumps to each group.5 views · 5 downloadsFooterNavColumns of grouped links for a site's footer, each under its title, wrapping on narrow screens.5 views · 7 downloadsJumpLinksA row of links to the sections of the page, scrolling sideways when narrow and sticking to the top if asked.6 views · 6 downloads
Thread
Thread 0 posts
On SkipLink: questions, tips, corrections, and code that uses it.
No posts yet. The first one opens the thread.