diff --git a/the-tooltip/public/img/apg-tooltip-patterns.png b/the-tooltip/public/img/apg-tooltip-patterns.png new file mode 100644 index 0000000..e7edea4 Binary files /dev/null and b/the-tooltip/public/img/apg-tooltip-patterns.png differ diff --git a/the-tooltip/public/img/bad-tooltip-listener.svg b/the-tooltip/public/img/bad-tooltip-listener.svg new file mode 100644 index 0000000..d57dc78 --- /dev/null +++ b/the-tooltip/public/img/bad-tooltip-listener.svg @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/the-tooltip/public/img/good-tooltip-listener.svg b/the-tooltip/public/img/good-tooltip-listener.svg new file mode 100644 index 0000000..a5874b6 --- /dev/null +++ b/the-tooltip/public/img/good-tooltip-listener.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/the-tooltip/slides.md b/the-tooltip/slides.md index 623fb83..0c06e5d 100644 --- a/the-tooltip/slides.md +++ b/the-tooltip/slides.md @@ -32,12 +32,22 @@ layout: section --- -## ツールチップで考慮しなければいけない点 +## ツールチップの実装時に考慮すること - Machine readability - Cancelability - Selectivity +基本的には [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/) や [WCAG](https://www.w3.org/TR/WCAG22)を参考にする。 +その中で関連のありそうな項目を参考にUIを組み立てていく。 + +- [Tooltip Pattern | APG | WAI | W3C](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/) +- [WCAG 2.2 - Success Criterion 1.4.13 Content on Hover or Focus](https://www.w3.org/TR/WCAG22/#content-on-hover-or-focus) + +今回の対象としては上記を参考にしています。 + +--- +layout: center --- ## 実装時の注意点 @@ -49,16 +59,24 @@ layout: section - `role`と`aria-describedby`を設定する。 - フォーカス可能な要素を含む場合はモードレスダイアログとして実装する。 +汎用UIパーツは適切なマークアップをしないとテストコードが汚くなる。 +見た目だけがUIではないのでブラウザからもUIが認識できるようにしておく。 + --- ### Cancelability `ESC`キーで一時的に非表示にできるようにする。 +ARIA APGを見るとインタラクションとして`ESC`キーでのキャンセルが記載されている。 + +![ARIA APG disappears when Escape is pressed or on mouse out.](/img/apg-tooltip-patterns.png) + --- ### Selectivity +大抵のツールチップはツールチップ内部のテキストをコピペできない イベントハンドラーを張る要素に気をつける。 --- @@ -95,9 +113,10 @@ layout: section ### Selectivity -#### Bad +なぜコンポーネント全体に`onPointerEnter`と`onPointerLeave`を設定するのか。 +下記は素直にボタンにだけにイベントハンドラーを貼った場合の例 -```tsx{5} +```tsx{5-7}
``` -#### Good +--- -```tsx{1} -
- - -
-``` \ No newline at end of file +### Selectivity + +![](/img/bad-tooltip-listener.svg) + +トリガーとなる要素だけにイベントハンドラーを貼ると +ツールチップにポインタが移動した場合`PointerLeave`が発火して消えてしまう。 + +--- + +### Selectivity + +![](/img/good-tooltip-listener.svg) + +ツールチップとして認識する範囲を広げてWrapperを用意すると +ツールチップにポインタが移動しても`PointerLeave`が発火せず選択できる。 + +--- +layout: center +--- + +## 解説されると分かるけど、普段はあまり気付けない + +--- +layout: center +--- + +## どうしてこうなった + +--- + +## どうしてこうなった + +- ググって最初に出てきたコードをコピペ +- 既存の実装を参考にする +- UIライブラリの実装を参考にする + +これらが本当にユーザビリティの高い実装をしているとは限らない。