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}