Visually Hidden

視覚的には隠すが支援技術（スクリーンリーダー）には読ませ続けるテキストコンテナです。fandhe-frontend-headless-ui の visually_hidden mod は Root（span）の 1 パーツのみで構成され、装飾要素の aria-hidden="true" 固定付与パターンとは逆に aria-hidden を意図的に付与しません。Themes 版と異なり clip 手法の CSS を持たず、構造の出力のみを担います。

スタイル済みの表示例は Visually Hidden を参照してください。

アクセシビリティ・参考サイトとの対応

anatomy は Radix Primitives の VisuallyHidden.Root（span）・chakra-ui の VisuallyHidden（span）と一致します（Ark UI には該当ページがありません）。
role/aria-*/data-* はいずれも、参照サイト（Radix Primitives・Radix Themes・chakra-ui）・本実装ともに固有のものを出力しません。本実装が出力する data-scope="visually-hidden"/data-part="root" は role/aria-* の代替ではない独自フックです。aria-hidden を自ら付与しない不変条件も参照サイトと一致します。
キーボード操作はありません（非対話要素）。ボタン内で使う場合はボタン側がフォーカス・操作を担います。
Radix の asChild・chakra-ui の as/asChild（要素差し替え API）は本フレームワークのノード木 API とは前提が異なるため採用していません。視覚的に隠した入力（chakra-ui の asChild + <input> 用法）は別パートを新設せず、checkbox/switch/radio_group/select の hidden input 系パーツが同用途を担います。
自前 CSS で組み立てる最小例はこのページ下部の Examples 節（「Custom CSS」）を参照してください。

関連 API: fandhe-frontend-headless-ui API

Demo

枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。

Total: (screen-reader only) 42 items

Features

Root（span）の 1 anatomy パーツのみで構成する最小の状態非依存パーツ（visually_hidden.rs:94-102）。
視覚的には隠すが支援技術（スクリーンリーダー）には読ませ続けるテキストコンテナであり、装飾要素とは逆に aria-hidden を意図的に付与しない（visually_hidden.rs:11-21）。
styled 層（fandhe-frontend-pre-styled-ui::visually_hidden）は本モジュールが出力する data-scope="visually-hidden"/data-part="root" セレクタを前提に clip 手法の CSS を当てる（visually_hidden.rs:23-29）。
Radix Primitives / Radix Themes / chakra-ui と突合済み（イシュー #1668）。anatomy（1 パーツ）・data-*・role/aria-*・キーボード操作のいずれも一致し是正なし。asChild/as（要素差し替え API）・視覚的に隠した input パートは意図的に非採用（checkbox/switch/radio_group/select の hidden input 系パーツが同用途を担う、visually_hidden.rs:47-87）。

Anatomy

root

API Reference

Arguments

Name	Type	Default	Description
`root: attrs`	`Vec<(&str, &str)>`	`vec![]`	呼び出し側が追加する属性。data-scope/data-part は本パーツが固定出力するため上書きされない（visually_hidden.rs:94-102）。root が唯一の公開関数であり attrs/children 以外の型付き引数を持たない。
`root: children`	`Vec<Node>`	`vec![]`	視覚的には隠すがスクリーンリーダーには読み上げさせるテキスト・ノード（visually_hidden.rs:94-102）。

Examples

Status label prefix

視覚的には記号のみを見せつつ、スクリーンリーダーには前置ラベルを読ませる例です。

Build status: ✓ Passing

Icon-only button label

アイコンのみのボタンに、支援技術のためのラベルを追加する例です（Radix Primitives / chakra-ui のデモと同型のパターン、イシュー #1668）。

Custom CSS

headless 層は data-scope/data-part のみを出力し外観を持たないため、clip 手法を自前 CSS で当てる最小例です。

利用者が data-scope / data-part 属性セレクタで自前 CSS を当てる最小例です。headless-ui 自体はスタイルを持ちません。

CSS

[data-scope="visually-hidden"][data-part="root"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  overflow-wrap: normal;
  border-width: 0;
}

Accessibility

WAI-ARIA

Attribute	Description
(該当なし)	root は固有の role/aria-* を出力しない（visually_hidden.rs 全文の非テスト行で role/aria- grep 0 件）。装飾要素の aria-hidden="true" 固定付与パターンとは逆に、本コンポーネントは aria-hidden を意図的に付与しない（visually_hidden.rs:11-21）。Radix Primitives / Radix Themes / chakra-ui のいずれも role/aria-* を自ら付与しない点と一致する（イシュー #1668 突合結果）。

Attribute

Description

(該当なし)

root は固有の role/aria-* を出力しない（visually_hidden.rs 全文の非テスト行で role/aria- grep 0 件）。装飾要素の aria-hidden="true" 固定付与パターンとは逆に、本コンポーネントは aria-hidden を意図的に付与しない（visually_hidden.rs:11-21）。Radix Primitives / Radix Themes / chakra-ui のいずれも role/aria-* を自ら付与しない点と一致する（イシュー #1668 突合結果）。