コンポーネント / status

status · @awesome-ds/react

Callout

重要なヒントや注意を本文内で強調する領域。

関連ルール: rule.brand.content-design

状態マトリクス

通常必須

構造

  • aside要素
  • タイトル
  • 補足内容

キーボード操作契約

追加のキー操作は持たず、内部にリンクがある場合だけ標準のTab・Enter操作を使います。

スクリーンリーダー契約

補足領域として見出しと本文を文書順に読みます。緊急通知には別のライブ領域を使います。

コンテンツ規則

  • 最初に要点を書きます。
  • 情報・注意・成功の意味に文体を合わせます。

公開API

プロパティ型必須説明
titlestring必須領域の目的を示す見出し。
childrenReactNode必須表示または読み上げ対象となる内容。

環境適応契約

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

検証ID

Callout/semantic-aside

ライブ表示

ライブ表示

コピー可能な実装例

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

<Callout title="Note">Details</Callout>