status · @awesome-ds/react
Toast
操作結果を一時的に知らせるステータス通知。
状態マトリクス
表示中
構造
- ライブ通知領域
- メッセージ
- 任意の操作
キーボード操作契約
通知自体へフォーカスを強制せず、操作を含む場合だけ標準のTab・Enter操作を使います。
スクリーンリーダー契約
操作を中断しないpoliteなstatusとして結果を通知します。
コンテンツ規則
- 完了した結果を伝えます。
- すぐ実行できる場合だけ回復操作を加えます。
公開API
| プロパティ | 型 | 必須 | 説明 |
|---|---|---|---|
children | ReactNode | 必須 | 表示または読み上げ対象となる内容。 |
環境適応契約
- RTL
- 論理方向の余白と配置を使い、DOMとフォーカスの順序を保ちます。方向を持つアイコンだけを反転します。
- ハイコントラスト
- 背景色だけに頼らず、境界・フォーカス・状態をシステムカラーでも判別可能にします。
- 動きを減らす設定
- 状態とフォーカスの連続性を残し、移動や装飾的な遷移を取り除きます。
検証ID
ライブ表示
ライブ表示
変更を保存しました
コピー可能な実装例
import { Toast } from "@awesome-ds/react";
<Toast>Saved</Toast>