Link Overlay

fandhe-frontend-pre-styled-ui の link_overlay mod が提供するスタイル済み Link Overlay 部品です。root（位置決めコンテキスト）/ overlay（カード全面へ拡張されるリンク）の 2 anatomy パーツで構成し、chakra-ui の LinkBox/LinkOverlay パターンに倣ってカード全体をクリック可能にします。overlay 以外の子ノード（見出し・画像等）が root の高さを確立する契約です。

Demo

pre-styled-ui 単独定義の anatomy（data-scope="link-overlay"）による静的掲示です。root（位置決めコンテキスト）配下の見出し・説明文が高さを確立し、overlay（position: absolute; inset: 0 でカード全面へ展開されるリンク）が重なります。overlay には aria-label でアクセシブルネームを与えています。

Getting started

プロジェクトの作成から最初のページ公開までの手順です。

Features

root（div、位置決めコンテキスト）/ overlay（a、カード全面へ拡張されるリンク）の 2 anatomy パーツ構成（crates/headless-ui/src/link_overlay.rs:16-19, 70-83）
::before 疑似要素を使わず overlay 自身を position: absolute; inset: 0 で root 全面へ展開する（recipe が疑似要素セレクタを表現できないため。crates/pre-styled-ui/src/link_overlay.rs:14-22, 56-64）
root の高さは overlay 以外の子ノード（見出し・画像等の通常フロー要素）が確立する契約（crates/headless-ui/src/link_overlay.rs:22-30）
href の URL スキーム検証は link と同じく core の render() が担う（crates/headless-ui/src/link_overlay.rs:55-58）

Anatomy

root
  overlay

API Reference

Arguments

Name	Type	Default	Description
attrs / children（root）	Vec<(&str, &str)>, Vec<Node>		位置決めコンテキストとなる div の属性・子ノード。overlay 以外の子ノードで高さを確立する（crates/pre-styled-ui/src/link_overlay.rs:75-78）。
href（overlay）	&str		root 全面へ展開されるリンク先（crates/headless-ui/src/link_overlay.rs:70-73、fandhe_frontend_headless_ui::link_overlay::overlay の再エクスポート）。

Examples

カード全面クリック

見出しと説明文で高さを確立し、overlay（aria-label 付き）がカード全面へ展開されるリンクとして重なります。

Getting started

プロジェクトの作成から最初のページ公開までの手順です。

Accessibility

Keyboard Interactions

Key	Description
Tab / Shift+Tab	overlay（素の <a>）のブラウザ標準操作でフォーカス移動する。

WAI-ARIA

Attribute	Description
aria-label（overlay、呼び出し側が付与）	overlay に可視テキストを持たせない構成では呼び出し側が aria-label でアクセシブルネームを与える運用を推奨する（crates/headless-ui/src/link_overlay.rs:24-31）。