Accordion

高々 1 項目が開く single モードと、複数項目が同時に開く multiple モードの 2 状態機械を提供する開閉可能な項目リストです。fandhe-frontend-headless-ui の accordion mod は Root / Item / ItemTrigger / ItemIndicator / ItemContent の 5 anatomy パーツと、開閉状態を表す data-state・ aria-expanded・aria-controls・（ラベル付き時のみ）role="region" を提供します。orientation・キーボードナビゲーションは SSR 静的マークアップに寄与しない CSR 挙動層の責務としてスコープ外です。

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

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

Demo

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

A Rust frontend framework.

Features

高々 1 項目が開く single モード（Accordion）と、複数項目が同時に開く multiple モード（MultiAccordion）の 2 状態機械を提供する（dispatch: select/deselect/toggle）。
Root / Item / ItemTrigger / ItemIndicator / ItemContent の 5 anatomy パーツで構成される。
item_trigger は type="button" を固定付与し、フォーム内配置時の意図しない submit を防ぐ。
item_content は labelled_by が Some のときのみ role="region" + aria-labelledby をセットで付与し、名前なし region を作らない。
orientation・キーボードナビゲーションは SSR 静的マークアップに寄与しない CSR 挙動層の責務としてスコープ外（`data-orientation` は attrs 経由で呼び出し側が付与可能）。

Anatomy

root
  item
    item-trigger
      item-indicator
    item-content

API Reference

Arguments

Name	Type	Default	Description
item: state	OpenState	Closed	項目の開閉状態（data-state へ反映）。
item: disabled	bool		項目の disabled 状態（data-disabled へ反映）。
item_trigger: state	OpenState	Closed	開閉状態（aria-expanded/data-state へ反映）。
item_trigger: disabled	bool		disabled 状態（ネイティブ disabled 属性 + data-disabled の両方へ反映）。
item_trigger: value	&str		項目値。data-value へ出力し、wasm-full MAPPING_TABLE の "toggle" payload 契約として使う（イシュー #1127）。
item_trigger: id	Option<&str>		trigger 自身の id。
item_trigger: controls	Option<&str>		Some のとき aria-controls で item_content と関連付ける。
item_indicator: state	OpenState	Closed	開閉状態のみを data-state へ反映する最小主義な装飾用パーツ。
item_content: state	OpenState	Closed	開閉状態（closed のとき hidden 存在属性を付与）。
item_content: id	Option<&str>		item_trigger の controls と対で aria-controls 関連付けを成立させる。
item_content: labelled_by	Option<&str>		Some のときのみ role="region" + aria-labelledby をセットで付与する（名前なし region を作らないため）。

Data Attributes

Part	Attribute	Observed Values
item	data-state	closed, open
item-content	data-state	closed, open
item-indicator	data-state	closed, open
item-trigger	data-state	closed, open
item-trigger	data-value	faq-0, faq-1

Examples

Disabled item

disabled な項目は item_trigger にネイティブ disabled 属性と data-disabled が付与され、フォーカス・展開ができなくなります。

Accessibility

WAI-ARIA

Attribute	Description
aria-expanded	item_trigger に付与。項目の開閉状態（open で true）を表す。
aria-controls	item_trigger に付与。controls が Some のとき対応する item_content の id を指す。
role="region"	item_content に付与。labelled_by が Some のときのみ aria-labelledby とセットで付与される。