コンポーネント / overlay

状態マトリクス

構造

• 対象要素
• ツールチップ面
• 補足説明

キーボード操作契約

キーボードフォーカスで表示し、blurまたはEscapeで閉じます。

スクリーンリーダー契約

操作対象の名前を置き換えず、補足説明としてツールチップを関連付けます。

コンテンツ規則

• 操作名に追加する補足だけを書きます。
• 操作可能な内容をツールチップ内へ置きません。

公開API

環境適応契約

RTL

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

ハイコントラスト

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

動きを減らす設定

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

検証ID

Tooltip/focus-description

ライブ表示

コピー可能な実装例

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

<Tooltip label="Save">?</Tooltip>