Skip to content
fandhe-frontend
GitHub

Combobox

テキスト入力しながら候補一覧を絞り込む部品です。フォーカスを保持する input パーツ（role="combobox"）が aria-activedescendant の配線先を担い、role="listbox" の候補一覧とセットで動作します。候補データの取得・整形は利用者側の責務であり、本部品は anatomy と ARIA 配線のみを提供します。候補件数の変化は live_region パーツ（aria-live="polite" 固定）が支援技術へ通知します（テキスト更新の実配線は wasm-full の後続責務）。

fandhe-frontend-headless-ui の combobox mod が提供する構造・アクセシビリティ（WAI-ARIA・キーボード操作）・表示状態（data-*）のみを持つ unstyled 部品です。Themes 版が備える見た目は持たず、anatomy・ARIA・data-* のみを提供します。CSS は利用者が当てます。

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

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

Demo

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

Apple✓
1 result available

Features

  • root/label/control/input/trigger/clear_trigger/positioner/content/item_group/item/item_text/item_indicator/live_region の anatomy を持ち、フォーカスを保持する input（role="combobox"）側に aria-activedescendant を配線する（crate::select と異なる配線先、combobox.rs:59-65）。
  • input は role="combobox" + aria-autocomplete="list" を固定付与し、controls/activedescendant が Some のときのみ aria-controls/aria-activedescendant を付与する（combobox.rs:152-205）。
  • trigger は type="button" + aria-haspopup="listbox" を固定付与する（combobox.rs:205-238）。
  • 候補データの絞り込みは filter_options（純粋関数）が提供するが、候補データ自体の取得・供給は利用者側の責務である（combobox.rs:398、`docs/policy/intentional-non-adoption.md` §3.25）。
  • live_region は候補件数の変化を通知する live region（role="status" + aria-live="polite" 固定、root の直接の子で control の兄弟として配置する。テキスト更新の実配線は fandhe-frontend-wasm-full の後続責務、イシュー #1069）。

Anatomy

root
  label
  control
    input
    trigger
    clear-trigger
  positioner
    content
      item-group
        item
          item-text
          item-indicator
  live-region

API Reference

Arguments

NameTypeDefaultDescription
root(state) / control(state) / input(state) / trigger(state) / content(state)OpenStateOpenState::Closed開閉状態。data-state・aria-expanded の判定に使われる（同じ型のため代表 1 行に集約）。
input(value, disabled, controls, activedescendant, autocomplete)&str, bool, Option<&str>, Option<&str>, Option<&str>現在の入力文字列・無効化・content の id・ハイライト中 item の id・関連フォームフィールド名（combobox.rs:167-205）。
item(state, disabled, selected, value, id)OpenState, bool, bool, &str, Option<&str>role="option" を持つ選択肢 1 個の状態。value は data-value として既定エスケープ経由で出力される（combobox.rs:333-361）。
live_region(children)Vec<Node>role="status"/aria-live="polite"/aria-atomic="true" を固定付与する live region。通知文言は children として呼び出し側が渡す（combobox.rs、イシュー #1069）。
attrs / childrenVec<(&str, &str)> / Vec<Node>各パーツ共通の追加属性・子ノード（代表 1 行に集約）。

Data Attributes

PartAttributeObserved Values
contentdata-stateopen
controldata-stateopen
inputdata-stateopen
itemdata-highlighted
itemdata-stateopen
itemdata-valueapple
item-indicatordata-stateopen
positionerdata-stateopen
rootdata-stateopen
triggerdata-stateopen

Examples

Closed input + trigger

aria-expanded="false"/aria-autocomplete="list" を持つ閉じた状態の例です。

閉じた状態（aria-expanded="false"）で aria-autocomplete="list" を持つ Combobox input/trigger の組み立て例です。

Accessibility

WAI-ARIA

AttributeDescription
role="combobox" / aria-autocomplete="list"input パーツへ固定付与する（combobox.rs:177以降）。
aria-expandedinput・trigger の両方が開閉状態を反映する。
aria-activedescendantinput パーツ側へ配線する（crate::select と異なり本モジュールは input 側、combobox.rs:59-65, 156）。
role="listbox" / role="option"content パーツは role="listbox"、item パーツは role="option" を固定付与する（combobox.rs:277, 343）。
role="status" / aria-live="polite" / aria-atomic="true" (live_region)候補件数の変化を通知する live region に固定付与する（combobox.rs、イシュー #1069）。