Popover API が Baseline に移行

Una Kravets

まもなく実施されます。私が最も宣伝している機能の一つが、つい最近すべての最新ブラウザで利用可能になり、正式にベースライン 2024 に組み込まれました。この機能が Popover API です。ポップオーバーには、ツールチップ、メニュー、教育用 UI など、階層化されたインターフェースを構築するための優れたプリミティブとデベロッパー アフォーダンスが多数用意されています。

ポップオーバー機能のハイライトをいくつか紹介します。

• 最上位レイヤへのプロモーション。ポップオーバーは、ページの他の上にある最上位レイヤに表示されるため、z-index をいじる必要はありません。
• ライトを閉じる機能。ポップオーバー領域の外側をクリックすると、ポップオーバーが閉じてフォーカスが戻ります。
• デフォルトのフォーカス管理。ポップオーバーを開くと、そのポップオーバー内で次のタブが停止します。
• ユーザー補助のキーボード バインディング。esc キーを押すか、2 回切り替えると、ポップオーバーが閉じてフォーカスが戻ります。
• アクセス可能なコンポーネント バインディング。ポップオーバー要素をポップオーバーに接続すると、意味的にトリガーされます。

ポップオーバーを作成する

ポップオーバーの作成はとても簡単です。デフォルト値を使用するには、ポップオーバーをトリガーする button と、トリガーする要素のみが必要です。

• まず、ポップオーバーにする要素に popover 属性を設定します。
• 次に、ポップオーバー要素に一意の id を追加します。
• 最後に、ボタンをポップオーバーに接続するには、ボタンの popovertarget をポップオーバー要素の id の値に設定します。

次のコードに、この例を示します。

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>

ポップオーバーをより細かく制御するには、ポップオーバーのタイプを明示的に設定します。たとえば、値なしでベアの popover 属性を使用することは、popover="auto" と同じになります。auto 値を指定すると、消灯動作が有効になり、他のポップオーバーが自動的に閉じられます。popover="manual" を使用すると、閉じるボタンを追加する必要があります。手動のポップオーバーは他のポップオーバーを閉じたり、ユーザーが UI でクリックしてポップオーバーを非表示にしたりできるようにします。以下を使用して手動ポップオーバーを作成します。

<button popovertarget="my-popover" class="trigger-btn"> Open Popover </button>

<div id="my-popover" popover=manual>
  <p>I am a popover with more information. Hit the close button or toggle to close me.<p>
  <button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
  </button>
</div>

ポップオーバーとモーダル ダイアログ

ダイアログが存在する場合にポップオーバーが必要かどうか疑問に思う方もいるかもしれませんが、その必要はありません。

ポップオーバー属性自体は、セマンティクスを提供しません。また、ポップオーバーを使用してモーダル ダイアログのようなエクスペリエンスを構築できるようになりましたが、この 2 つにはいくつかの重要な違いがあります。

結論と関連情報

popover によってプラットフォームにもたらされる魅力的な機能は数多くあります。機能のアクセシビリティの詳細や、機能セットに関するドキュメントなど、この API の詳細については、以下を推奨します。

• セマンティクスとポップオーバー属性: どのような場合に使用すべきか（Hidde de Vries）
• ポップオーバーのユーザー補助: Hidde de Vries がブラウザで行うことと行わないこと
• ポップオーバーに関する MDN ドキュメント