コンボボックス

訪問者が入力するのに合わせて、一覧から選択肢を候補に出すテキストフィールドです。

実行結果

combobox.rs

use hypersig::html::div;
use hypersig::style::Style;
use hypersig::style::value::rem;
use hypersig::{Page, Signals};
use hypersig_ui::{Combobox, ComboboxState};
use serde::{Deserialize, Serialize};

#[derive(Signals, Serialize, Deserialize)]
pub struct Shipping {
    country: ComboboxState,
}

const COUNTRY: Combobox<Shipping> = Combobox::new("country", "country-options");

pub fn page() -> Page<Shipping> {
    let initial = Shipping {
        country: ComboboxState::new(""),
    };
    Page::new(
        "配送先",
        initial,
    )
    .child(
        div()
            .css(Style::new().max_width(rem(20)))
            .child(COUNTRY.render(
                "国",
                Shipping::country(),
                [
                        "インド",
                        "カナダ",
                        "ケニア",
                        "スペイン",
                        "ドイツ",
                        "日本",
                        "ノルウェー",
                        "ブラジル",
                        "フランス",
                        "メキシコ",
                    ],
            )),
    )
}

アクセシビリティ

WAI-ARIA combobox パターンのうち、list autocomplete の形に従います。テキストフィールドは role="combobox"、aria-expanded、aria-controls、aria-activedescendant を持ちます。El::active_descendant を使うので、矢印キーで表示中の選択肢をたどる間も、フォーカスはテキストフィールドに残ります。文字を入力すると、大文字と小文字を区別せずに、その文字列を含む選択肢が表示されます。

コンボボックスはテキストフィールドと一覧の名前を持つ const として宣言し、状態はページのシグナルにある ComboboxState のフィールドに持たせます。選ばれたテキストは ComboboxState::text です。訪問者はどの選択肢にも合わないテキストを残せるので、選択肢のどれかが必要なところでは、ページの側で確かめます。

キー	動作
文字の入力	一覧を開き、その文字列を含む選択肢を表示します。
下矢印	一覧を開きます。開いたあとは、表示中の次の選択肢に移ります。
上矢印	表示中の前の選択肢に移ります。
Enter	矢印キーで移った先の選択肢を選び、一覧を閉じます。
Escape	一覧を閉じます。一覧が閉じているときは、テキストを消します。コンボボックスを囲むダイアログは、テキストフィールドで押された Escape では閉じません。

API

項目	概要
`Combobox::new`	テキストフィールドの id が `field`、一覧の id が `list` のコンボボックス
`render`	状態を `state` に持つ、ラベルとテキストフィールドと `options` の一覧
`ComboboxState`	`Combobox` が持つシグナル
`ComboboxState::new`	テキストフィールドに `text` が入った、閉じたコンボボックス