コメントを追記

the-tooltip/slides.md

@@ -20,6 +20,10 @@ layout: section
 
 ## TooltipとはどういうUIなのか
 
+<!--
+まずはじめに、ツールチップとはどのようなUIなのか軽く振り返ってみましょう。
+-->
+
 ---
 
 ### TooltipとはどういうUIなのか
@@ -30,6 +34,10 @@ layout: section
 
 「ツールチップは、要素がキーボードフォーカスを受けたり、マウスカーソルをその上に置いたりしたときに、その要素に関連する情報を表示するポップアップです。」
 
+<!--
+とりあえず自分が知る限りではAPGの説明が分かりやすいので引用してみます。
+-->
+
 ---
 
 ## ツールチップの実装時に考慮すること
@@ -46,6 +54,10 @@ layout: section
 
 今回の対象としては上記を参考にしています。
 
+<!--
+なんとなくどういうUIなのかはわかったので次に具体的な実装時の注意点をいくつか考えてみましょう。ツールチップとして「動く」ことは大前提として、使いやすさに焦点を絞っていくつかポイントを見ていきます。そのために参考として下記の２つの資料を参照してみました。
+-->
+
 ---
 layout: center
 ---
@@ -62,6 +74,10 @@ layout: center
 汎用UIパーツは適切なマークアップをしないとテストコードが汚くなる。  
 **見た目だけがUIではない** のでブラウザからもUIが認識できるようにしておく。
 
+<!--
+最近だと自動テスト文脈でも当たり前になりつつありますが、「UI」は見た目だけを指すわけではないので、きちんとブラウザにもツールチップであることを通知するために適切なARIA属性を付与します。
+-->
+
 ---
 
 ### Cancelability
@@ -72,13 +88,21 @@ ARIA APGを見るとインタラクションとして`ESC`キーでのキャン
 
 ![ARIA APG  disappears when Escape is pressed or on mouse out.](/img/apg-tooltip-patterns.png)
 
+<!--
+次にAPGにも記載があるようにESCキーでツールチップの表示状態を一時キャンセルできるようにします。ここでの一時キャンセルとはツールチップを表示させた後にマウスの操作もしくはフォーカスの操作以外の方法で表示を一時的に隠すことができるという状態を指します。
+-->
+
 ---
 
 ### Selectivity
 
 大抵のツールチップはツールチップ内部のテキストをコピペできない  
 イベントハンドラーを張る要素に気をつける。
 
+<!--
+そして最後はツールチップ内部のテキストを正しく選択できるようにすることです。これは有名なUIライブラリなどでも正しく実装されていないことが多く、多くの場合ツールチップの表示を発火させる要素からツールチップ内部にカーソルを動かすとツールチップ自身が消えてしまい選択できないという状況になる場合が多いです。
+-->
+
 ---
 
 ### Selectivity
@@ -109,6 +133,10 @@ ARIA APGを見るとインタラクションとして`ESC`キーでのキャン
 </div>
 ```
 
+<!--
+原因としてはこのようにイベントハンドラーを設定する要素を少し変えてあげるだけで解決するのですが、初見で下のようなイベントの貼り方ができる人は稀だと思います。
+-->
+
 ---
 
 ### Selectivity
@@ -127,6 +155,10 @@ ARIA APGを見るとインタラクションとして`ESC`キーでのキャン
 </div>
 ```
 
+<!--
+ざっくりと説明すると下記のようにツールチップの表示をトリガーする要素にだけPointerEnter / PointerLeaveを貼ると…
+-->
+
 ---
 
 ### Selectivity
@@ -136,6 +168,10 @@ ARIA APGを見るとインタラクションとして`ESC`キーでのキャン
 トリガーとなる要素だけにイベントハンドラーを貼ると  
 ツールチップにポインタが移動した場合`PointerLeave`が発火して消えてしまう。
 
+<!--
+この図のようにツールチップの表示をトリガーする要素の外に出た瞬間にPointerLeaveイベントが発火してツールチップが隠れてしまいます。
+-->
+
 ---
 
 ### Selectivity
@@ -145,12 +181,20 @@ ARIA APGを見るとインタラクションとして`ESC`キーでのキャン
 ツールチップとして認識する範囲を広げてWrapperを用意すると  
 ツールチップにポインタが移動しても`PointerLeave`が発火せず選択できる。
 
+<!--
+これを防ぐ場合にはこのようにトリガーとなる要素とツールチップ自体をラップする要素全体にEnter/Leaveイベントを付与することでトリガーとなる要素とツールチップ間でポインティングデバイスが移動しても表示を継続できるようになります。これによりツールチップ内部のテキストは無事選択可能になる訳です
+-->
+
 ---
 layout: center
 ---
 
 ## 解説されると分かるけど、普段はあまり気付けない
 
+<!--
+こうやって解説されるとその程度のことか、と思うけど実際に実装時に気付けることは少ない。
+-->
+
 ---
 layout: center
 ---
@@ -159,7 +203,7 @@ layout: center
 
 ---
 
-## どうしてこうなった
+### どうしてこうなった
 
 - ググって最初に出てきたコードをコピペ
 - 既存の実装を参考にする