コンポーネント / layout

状態マトリクス

構造

• レスポンシブグリッド
• 繰り返しセル

キーボード操作契約

追加のキー操作は持たず、視覚配置とDOM順を一致させます。

スクリーンリーダー契約

見た目だけの役割を追加せず、子要素の意味とDOM順を保ちます。

コンテンツ規則

• 同程度の重みを持つ項目に使います。
• 意味の順序が変わるmasonry配置を避けます。

公開API

環境適応契約

RTL

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

ハイコントラスト

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

動きを減らす設定

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

検証ID

Grid/responsive-order

ライブ表示

コピー可能な実装例

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

<Grid>…</Grid>