コンポーネント / status

status · @awesome-ds/react

Card

関連内容を一つの面にまとめるコンテナ。

関連ルール: rule.foundations.semantic-tokens

状態マトリクス

通常必須

構造

  • グループ面
  • 任意のタイトル
  • 本文

キーボード操作契約

追加のキー操作は持たず、内部の操作要素をDOM順にTab移動します。

スクリーンリーダー契約

独自の操作役割は追加せず、見出しと本文のセマンティック構造をそのまま公開します。

コンテンツ規則

  • 一枚につき一つの主題に絞ります。
  • 競合する複数の主要操作を入れません。

公開API

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

環境適応契約

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

検証ID

Card/semantic-surface

ライブ表示

ライブ表示

カードの見出し

カードの本文です。

コピー可能な実装例

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

<Card title="Title">Body</Card>