From 7f71318f91ece46bb6946c549899b17d712d77a0 Mon Sep 17 00:00:00 2001
From: ken7253 <ken7253@gmail.com>
Date: Wed, 14 Feb 2024 00:09:17 +0900
Subject: [PATCH] =?UTF-8?q?=E3=81=96=E3=81=A3=E3=81=8F=E3=82=8A=E5=86=85?=
 =?UTF-8?q?=E5=AE=B9=E3=82=92=E6=B1=BA=E3=82=81=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 the-tooltip/slides.md | 105 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 105 insertions(+)

diff --git a/the-tooltip/slides.md b/the-tooltip/slides.md
index 5b622d1..623fb83 100644
--- a/the-tooltip/slides.md
+++ b/the-tooltip/slides.md
@@ -15,3 +15,108 @@ src: "../reuse/me.md"
 ---
 
 ---
+layout: section
+---
+
+## TooltipとはどういうUIなのか
+
+---
+
+### TooltipとはどういうUIなのか
+
+[ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/) の説明が分かりやすい。
+
+> A tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
+
+「ツールチップは、要素がキーボードフォーカスを受けたり、マウスカーソルをその上に置いたりしたときに、その要素に関連する情報を表示するポップアップです。」
+
+---
+
+## ツールチップで考慮しなければいけない点
+
+- Machine readability
+- Cancelability
+- Selectivity
+
+---
+
+## 実装時の注意点
+
+---
+
+### Machine readability
+
+- `role`と`aria-describedby`を設定する。
+- フォーカス可能な要素を含む場合はモードレスダイアログとして実装する。
+
+---
+
+### Cancelability
+
+`ESC`キーで一時的に非表示にできるようにする。
+
+---
+
+### Selectivity
+
+イベントハンドラーを張る要素に気をつける。
+
+---
+
+### Selectivity
+
+#### Bad
+
+```tsx
+<div>
+  <div role="tooltip" hidden={!open} id={id}>
+    {content}
+  </div>
+  <button aria-describedby={id} onPointerEnter={} onPointerLeave={}>
+    {children}
+  </button>
+</div>
+```
+
+#### Good
+
+```tsx
+<div onPointerEnter={} onPointerLeave={}>
+  <div role="tooltip" hidden={!open} id={id}>
+    {content}
+  </div>
+  <button aria-describedby={id}>
+    {children}
+  </button>
+</div>
+```
+
+---
+
+### Selectivity
+
+#### Bad
+
+```tsx{5}
+<div>
+  <div role="tooltip" hidden={!open} id={id}>
+    {content}
+  </div>
+  <button aria-describedby={id} onPointerEnter={} onPointerLeave={}>
+    {children}
+  </button>
+</div>
+```
+
+#### Good
+
+```tsx{1}
+<div onPointerEnter={} onPointerLeave={}>
+  <div role="tooltip" hidden={!open} id={id}>
+    {content}
+  </div>
+  <button aria-describedby={id}>
+    {children}
+  </button>
+</div>
+```
\ No newline at end of file