Closed5
WAI-ARIA Authoring Practices 1.2のComboboxの章を読む
nissy-devComboboxについてなにも知らないので、@sakitoさんにおすすめされた以下の資料を読む
nissy-devCombobox = Popupが付属した input 要素
- 入力不可の場合 -> select-only combobox
- これがいわゆるドロップダウンメニューか
- 入力不可の場合 -> editable combobox
- 入力できる内容も、自由な場合や制限された値のみの場合などがもちろんある
使いどころ
- 事前に定義された値のうちの1つを入力させたいとき
- 任意の値を入力させたいが、サジェスト機能があると便利なとき
これがいわゆるドロップダウンメニューか
ドロップダウンは、role="menubar"や"listbox"などで見た目を作るのが一般的っぽい
Navigation Menubar Example
Collapsible Dropdown Listbox Example
nissy-devPopupについて
- Popupに表示する内容は、ユーザーが選択できる選択肢 or 入力したい内容のサジェストが多い
- Popupとしては、 listbox/grid/tree/dialogのようなUIで構成されることが多い
- Popupの表示のタイミング
- 下矢印や開くボタンがあってそれをクリックしたとき
- 文字が空 + フォーカスされたとき
- 文字が入力されている場合は、入力文字に部分一致している選択肢やサジェストを表示
nissy-devAutocompleteについて
- No autocomplete
- 入力された文字にかかわらず、ポップアップはいつも同じ値を表示
- List autocomplete with manual selection
- 入力された文字列に対応した (完全 or 部分一致) 値がポップアップに表示される
- ユーザーがポップアップで値を選択しない限り、ユーザーが入力した文字列がコンボブックスの値になる
- List autocomplete with automatic selection
- 入力された文字列に対応した (完全 or 部分一致) 値がポップアップに表示される
- 表示された候補は、最初の候補が自動的に選択されてハイライト表示される
- 別の候補を選択 or 入力した文字列を変更しない限り、フォーカスを失ったときにセットされる値は自動的に選択された値
- List with inline autocomplete
- 基本は List autocomplete with automatic selection と同じ
- 入力カーソルの後に補完文字列がインラインで表示される
nissy-devリストボックスやメニューボタンとの違い
- ユーザーは値の一部または全部を選択してクリップボードにコピーできる
コンボボックスとメニューボタン
- 現在の選択を維持しながら、許可された選択肢のセットを確認できる
- ポップアップをエスケープで閉じると、ナビゲート前に選択していた値に戻す事ができる
- 単一選択のリストボックスでは、選択肢を移動するとすぐに値が変更されてしまう
コンボボックスとリストボックス
- aria-required="true"を利用して必須としてマークすることができる
- 折りたたまれた状態でも、ユーザーの選択を十分に認識できる
- 値とアクセス可能な名前を両方持っているため
menubotton
確かに値がない
listbox
値はinputにセットしている
このスクラップは2021/10/29にクローズされました