トースト

ページの隅に並べて表示する短いお知らせです。ブラウザからもサーバーからも追加できます。

実行結果

toast.rs

use hypersig::html::div;
use hypersig::style::pattern::wrap;
use hypersig::style::value::rem;
use hypersig::{Page, Signals};
use hypersig_ui::{ButtonSize, ButtonVariant, Toast, ToastVariant, Toaster, button};
use serde::{Deserialize, Serialize};

#[derive(Signals, Serialize, Deserialize)]
pub struct App {
    toasts: Vec<Toast>,
}

pub fn page() -> Page<App> {
    let toasts = App::toasts();
    let initial = App { toasts: Vec::new() };
    Page::new(
        "アプリ",
        initial,
    )
    .child(
        div()
            .css(wrap(rem(0.5)))
            .child(
                button(ButtonVariant::Outline, ButtonSize::Default)
                    .on_click(
                        Toast::new("予定を作成しました")
                        .description("12 月 3 日（日）9:00")
                        .push(toasts),
                    )
                    .text("トーストを表示"),
            )
            .child(
                button(ButtonVariant::Outline, ButtonSize::Default)
                    .on_click(
                        Toast::new("アップロードに失敗しました")
                        .description("ファイルが 10 MB を超えています。")
                        .variant(ToastVariant::Destructive)
                        .push(toasts),

                    )
                    .text("エラーを表示"),
            )
            .child(Toaster::new(toasts)),
    )
}

アクセシビリティ

トーストを並べる領域（toaster）は「Notifications」という名前のランドマークで、aria-live="polite" の一覧を持ちます。そのため、トーストが追加されると、スクリーンリーダーは読み上げ中の内容のあとにそのトーストを読み上げます。各トーストには、そのトーストを消すボタンがあります。

トーストは Toaster::dismiss_after で時間を設定しない限り、消されるまで残ります。ゆっくり読む訪問者や拡大鏡を使う訪問者は、自動で消えるお知らせを見逃すことがあるからです（WCAG 2.2.1）。この領域は top layer ではなくページの中にあるので、モーダルダイアログが開いている間は inert になって操作できず、ダイアログが閉じると操作できるようになります。

キー	動作
Tab、Enter	トーストの Dismiss ボタンに移り、それを押します。

API

項目	概要
`Toaster::new`	`toasts` を新しいものほど後ろに並べて表示する領域
`label`	「Notifications」の代わりに、支援技術に向けた領域の名前を付けます。
`dismiss_after`	各トーストを表示してから `delay` が経ったら取り除きます。
`Toast::new`	`title` をタイトルに持ち、プロセスのほかのどのトーストとも違う id を持つトースト
`description`	タイトルの下に 1 行のテキストを足します。
`variant`	トーストの見た目を設定します。
`push`	ブラウザでこのトーストを `toasts` に追加する文
`Toast::push_expr`	ブラウザが評価する `toast` を `toasts` に追加する文