Popover API について

Popover API についての解説スライドです。

Transcript

1. Popover API
2. Popover API⁨⁩⁨⁩ とは ポップオーバー UI を、 JavaScript を使わず HTML のみで実現できる機能！
3. マークアップはこんな感じ これだけで基本的なポップオーバー UI が実装できます。
4. ポップオーバー UI のおさらい
5. ポップオーバーとは 4 画面の「最上位レイヤー」に表示されるインターフェースA 4 ESCキーを押したり、別の要素をクリックすると、
 非表示になるA 4 基本的に、１つのポップオーバーが開くと
 別のポップオーバーは非表示になる。
6. ダイアログとは何が違うの？ b ダイアログは「対話」の意図があるインターフェースR b 重要な情報を確実にユーザに伝え、必要に応じて対応
 できるようにするR b 直近のアクションを確認したり変更したりする
 オプションを提供する。など Human Interface Guidelines より
7. Popover API で何が嬉しいか
8. コンテキストに応じたマークアップ が可能に p dialog ではないのに、dialog role で使うケースがあった@ p ユースケースに応じたセマンティクスの拡張が可能に@ p Dropdown Menu、Note、Tooltip、Toast など。
9. 標準でキーボード操作のサポート b ESCキーで閉じることが可能。(Light Dismiss標準搭載A b popover="manual" では Light Dismiss でなくなるe b 閉じたあと、トリガー要素に自動でフォーカスされるe b popover="manual" では自動で戻らないので注意。
10. 標準で支援技術のサポート 3 スクリーンリーダーでボタンの開閉状態を読み上げる' 3 ポップオーバー要素はデフォルトで group ロール。
11. スタッキングコンテキスト問題から解放 T z-index を使わなくても、画面の最上部に表示される! T DOM の配置を気にしなくて済む。
12. Popover API まとめ  Popover APIは、セマンティクスでアクセシブルな
 ポップオーバー UI が JavaScript なしで作れる@  Web標準技術を駆使して、持続可能なデザインの実現  Open UI は神。