コンポーネント / overlay

overlay · @awesome-ds/react

Popover

現在の文脈を保ったまま補足を開く非モーダル面。

関連ルール: rule.a11y.wcag-aa

状態マトリクス

開いている必須
閉じている必須

構造

  • 開閉トリガー
  • 非モーダル面
  • 本文

キーボード操作契約

EnterまたはSpaceで開き、Escapeで閉じてトリガーへ戻します。

スクリーンリーダー契約

トリガーの展開状態と、直後に続く補足面の内容を通知します。

コンテンツ規則

  • 短く、その場の文脈に必要な内容だけを置きます。
  • 主要フローをポップオーバー内へ隠しません。

公開API

プロパティ型必須説明
labelstring必須利用者と支援技術へ示す名前。
childrenReactNode必須表示または読み上げ対象となる内容。

環境適応契約

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

検証ID

Popover/escape-dismiss

ライブ表示

ライブ表示

コピー可能な実装例

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

<Popover label="More">Details</Popover>