コンポーネント / status

状態マトリクス

表示中必須

構造

  • ライブ通知領域
  • メッセージ
  • 任意の操作

キーボード操作契約

通知自体へフォーカスを強制せず、操作を含む場合だけ標準のTab・Enter操作を使います。

スクリーンリーダー契約

操作を中断しないpoliteなstatusとして結果を通知します。

コンテンツ規則

  • 完了した結果を伝えます。
  • すぐ実行できる場合だけ回復操作を加えます。

公開API

プロパティ必須説明
childrenReactNode必須表示または読み上げ対象となる内容。

環境適応契約

RTL
論理方向の余白と配置を使い、DOMとフォーカスの順序を保ちます。方向を持つアイコンだけを反転します。
ハイコントラスト
背景色だけに頼らず、境界・フォーカス・状態をシステムカラーでも判別可能にします。
動きを減らす設定
状態とフォーカスの連続性を残し、移動や装飾的な遷移を取り除きます。

検証ID

Toast/polite-status

ライブ表示

ライブ表示

変更を保存しました

コピー可能な実装例

import { Toast } from "@awesome-ds/react";

<Toast>Saved</Toast>