Skip Nav

fandhe-frontend-pre-styled-ui の skip_nav mod が提供するスタイル済み Skip Nav 部品です。

Demo

本文へのスキップリンク（WCAG 2.1 SC 2.4.1 Bypass Blocks）。link はキーボードフォーカス時のみ視覚的に表示されるため、Tab キーでフォーカスするまで見た目には現れません（このデモ枠内を Tab フォーカスして確認してください）。

Demo content starts here.

Link / Content の 2 anatomy パーツで WCAG 2.1 SC 2.4.1 Bypass Blocks を実現する。styled `link`/`content` は呼び出し側 `class` を除去してから headless-ui へ委譲する薄ラッパー。
`link` は任意の URL を呼び出し側から受け取らず、常に `#<id>`（フラグメントのみ）を内部で組み立てるためスキーム注入経路を持たない。
focus していないときは視覚的に隠し（clip 手法）、キーボードフォーカス時（`:focus-visible`）のみ表示する。docs サイトは hydration を持たないため、この表示切り替えは純 CSS のみで成立する（クライアント配線不要）。
`DEFAULT_ID` 定数（`"fandhe-skip-nav"`）を提供し、ページ全体に 1 個だけ配置する典型利用を想定する。docs サイト自身もページ骨格へこの id で全ページ 1 個ずつ実適用している。

link
content

Name	Type	Default	Description
link: id	&str	skip_nav::DEFAULT_ID	スキップ先 id。href="#<id>" として出力する。
content: id	&str	skip_nav::DEFAULT_ID	id 属性値。link の href と対にする。
attrs	Vec<(&str, &str)>	vec![]	各パーツへ渡す追加属性。`class` は除去してから合成する。
children	Vec<Node>	vec![]	パーツ配下に描画する子ノード。

`DEFAULT_ID` ではなく呼び出し側指定の id を使う例です。1 ページに複数の skip-nav リンクを配置する場合、それぞれ別 id を割り当てます。

Example content starts here.

Key	Description
Tab	`link` はページ内で最初にフォーカス可能な要素として配置する運用を想定し、フォーカス時のみ視覚的に表示される。