Toast

一時的な通知の queue 表示です。fandhe-frontend-headless-ui の toast mod は group（live region）/ root（通知 1 件）/ title / description / action-trigger / close-trigger の 6 anatomy パーツと、複数通知を有界なキューとして管理する状態機械 Toaster を提供します。aria-live は ToastStatus から決定的に導出され（Error のみ assertive、他は polite）、group は role="region" + 必須の aria-label を固定付与します。タイマーによる自動 dismiss の実配線は本部品のスコープ外です。

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

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

Demo

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

Saved

Your changes have been saved.

Features

group（live region）/ root（通知 1 件）/ title/description/action-trigger/close-trigger の 6 anatomy パーツと、複数通知を有界なキューとして管理する状態機械 Toaster を提供する（dispatch: dismiss/clear）。
aria-live は ToastStatus から決定的に導出する（呼び出し側文字列を直接流し込まない）。Error のみ "assertive"、他は "polite"。aria-atomic="true" を併用し、通知全体を単位として読み上げさせる。
group は role="region" + aria-label（label は必須引数）を固定付与する。
タイマーによる自動 dismiss の実配線は fandhe-frontend-wasm-full 側の後続イシューのスコープ。

Anatomy

group
  root
    title
    description
    action-trigger
    close-trigger

API Reference

Arguments

Name	Type	Default	Description
group: placement	ToastPlacement	BottomEnd	data-placement へ反映するビューポート角配置（6 語彙）。
group: label	&str		role="region" とセットの aria-label（呼び出し側が必ず指定する）。
root: status	ToastStatus	Info	data-type と aria-live の緊急度（Error のみ assertive、他は polite）を導出する状態。

Data Attributes

Part	Attribute	Observed Values
group	data-placement	bottom-end
root	data-type	success

Examples

Error status

ToastStatus::Error の Toast は aria-live="assertive" になり、他の状態より即座に割り込んで読み上げられます。

Upload failed

Network connection was lost.

Accessibility

WAI-ARIA

Attribute	Description
role="region" / aria-label	group に固定付与。
role="status"	root に固定付与。
aria-atomic="true"	root に固定付与。通知全体を単位として読み上げさせる。
aria-live	root に付与。status から決定的に導出される（Error のみ assertive、他は polite）。