コンポーネント / status

status · @awesome-ds/react

ErrorState

失敗内容と回復手段を示すエラー状態。

関連ルール: rule.interaction.product-quality

状態マトリクス

エラー必須

構造

  • エラー見出し
  • 平易な説明
  • 回復操作

キーボード操作契約

回復操作へTabで移動し、EnterまたはSpaceで再試行します。

スクリーンリーダー契約

エラーの見出し、平易な説明、回復操作をalertとしてまとめて通知します。

コンテンツ規則

  • 利用者を責めず、何が失敗したかを書きます。
  • 具体的な再試行または代替手段を示します。

公開API

プロパティ型必須説明
titlestring必須領域の目的を示す見出し。
descriptionstring必須状態と次の手順を説明する本文。
actionLabelstring—次の行動を示すラベル。
onAction() => void—次の行動を実行するコールバック。

環境適応契約

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

検証ID

ErrorState/recovery-action

ライブ表示

ライブ表示

コピー可能な実装例

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

<ErrorState title="Failed" description="Retry" actionLabel="Retry" />