Popover API erreicht die Referenzversion

Una Kravets

Es ist so weit! Eine der Funktionen, auf die ich am meisten gespannt bin, ist gerade in allen modernen Browsern verfügbar und ist offiziell Teil von Baseline 2024. Das ist die Popover API. Pop-ups bieten viele großartige Primitives und Entwickler-Affordances für die Erstellung mehrschichtiger Benutzeroberflächen wie Kurzinfos, Menüs, Lehr-UIs und mehr.

Zu den wichtigsten Funktionen von Pop-ups gehören:

• Beförderung in die oberste Schicht. Pop-ups werden in der obersten Schicht über dem Rest der Seite angezeigt. Sie müssen also nicht mit z-index herumspielen.
• Funktion zum Schließen des Pop-ups Wenn Sie außerhalb des Pop-over-Bereichs klicken, wird das Pop-over geschlossen und der Fokus zurückgesetzt.
• Standardmäßige Fokusverwaltung Wenn Sie das Pop-up öffnen, wird der nächste Markierungsstopp im Pop-up angezeigt.
• Barrierefreie Tastaturbelegungen Wenn Sie die Taste esc drücken oder das Pop-over zweimal antippen, wird es geschlossen und der Fokus wechselt zurück.
• Zugängliche Komponentenbindungen Semantische Verknüpfung eines Pop-up-Elements mit einem Pop-up-Trigger

Pop-ups erstellen

Das Erstellen von Pop-ups ist ganz einfach. Wenn Sie Standardwerte verwenden möchten, benötigen Sie nur ein button, um das Pop-over auszulösen, und ein Element, das ausgelöst werden soll.

• Legen Sie zuerst ein popover-Attribut für das Element fest, das das Pop-over sein soll.
• Fügen Sie dann dem Popover-Element eine eindeutige id hinzu.
• Um die Schaltfläche mit dem Popover zu verknüpfen, legen Sie abschließend den Wert popovertarget der Schaltfläche auf den Wert id des Popover-Elements fest.

Dies wird im folgenden Code gezeigt:

<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>

Wenn Sie das Pop-over genauer steuern möchten, können Sie die Pop-over-Typen explizit festlegen. Wenn Sie beispielsweise ein einfaches popover-Attribut ohne Wert verwenden, entspricht das popover="auto". Der Wert auto aktiviert das einfache Schließen und schließt automatisch andere Pop-ups. Wenn Sie popover="manual" verwenden, müssen Sie eine Schaltfläche zum Schließen hinzufügen. Manuelle Pop-ups schließen keine anderen Pop-ups und Nutzer können das Pop-up nicht durch Klicken in der Benutzeroberfläche schließen. So erstellen Sie ein manuelles Pop-up:

<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>

Pop-up-Fenster und modales Dialogfeld im Vergleich

Sie fragen sich vielleicht, ob Sie ein Pop-over benötigen, wenn ein Dialogfeld vorhanden ist. Die Antwort lautet: Möglicherweise nicht.

Das Popovermenü-Attribut bietet keine Semantik für sich. Auch wenn Sie jetzt mit Pop-ups modale Dialoge erstellen können, gibt es einige wichtige Unterschiede zwischen den beiden:

Fazit und weiterführende Literatur

popover bietet viele spannende Funktionen. Weitere Informationen zu dieser API, einschließlich Informationen zur Barrierefreiheit der Funktion und Dokumentation zu den Funktionen, finden Sie in den folgenden Artikeln:

• Semantics and the popover attribute: what to use when? von Hidde de Vries
• On popover accessibility: what the browser does and doesn't do von Hidde de Vries
• MDN-Dokumentation zu Pop-ups