コンポーネント / status

状態マトリクス

構造

• 実コンテンツに合うプレースホルダー

キーボード操作契約

操作対象にせず、読み込み後に現れる操作要素へフォーカスを自動移動しません。

スクリーンリーダー契約

形状は読み上げ対象から外し、読み込み状態は所有する領域で一度だけ通知します。

コンテンツ規則

• 読み込み後の形状に合わせます。
• 1秒未満の更新には使いません。

公開API

環境適応契約

RTL

論理方向の余白と配置を使い、DOMとフォーカスの順序を保ちます。方向を持つアイコンだけを反転します。

ハイコントラスト

背景色だけに頼らず、境界・フォーカス・状態をシステムカラーでも判別可能にします。

動きを減らす設定

状態とフォーカスの連続性を残し、移動や装飾的な遷移を取り除きます。

検証ID

Skeleton/hidden-placeholder

ライブ表示

コピー可能な実装例

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

<Skeleton height="2rem" />