Popover API erreicht die Referenzversion

Una Kravets

Es ist so weit! Eine der Funktionen, die mir am meisten gefällt, ist jetzt in allen modernen Browsern verfügbar und gehört offiziell zu Baseline 2024. Diese Funktion ist die Popover API. Popover bietet so viele großartige Primitive und Funktionen für Entwickler zum Erstellen von mehrschichtigen Oberflächen wie Kurzinfos, Menüs, Benutzeroberfläche für den Unterricht und mehr.

Einige kurze Highlights der Pop-over-Funktionen:

• Wandern Sie in die oberste Ebene. Popover werden im oberen Layer über dem Rest der Seite angezeigt, sodass Sie nicht mit z-index herumspielen müssen.
• Lichtabschaltung: Wenn Sie auf eine Stelle außerhalb des Popover-Bereichs klicken, wird es geschlossen und wieder in den Fokus rückt.
• Standardmäßige Fokusverwaltung: Durch das Öffnen des Pop-overs wird der nächste Tab innerhalb des Pop-overs gestoppt.
• Barrierefreie Tastaturbindungen Wenn Sie die esc-Taste drücken oder zweimal umschalten, wird das Pop-over geschlossen und der Fokus kehrt zurück.
• Barrierefreie Komponentenbindungen: Popover-Element semantisch mit einem Popover-Trigger verbinden

Pop-over erstellen

Das Erstellen von Popovers ist ganz einfach. Zur Verwendung von Standardwerten benötigen Sie lediglich 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 Popover sein soll.
• Fügen Sie dann eine eindeutige id für das Popover-Element hinzu.
• Um die Schaltfläche schließlich mit dem Popover zu verbinden, setzen Sie den popovertarget der Schaltfläche auf den Wert des id des Popover-Elements.

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>

Sie können verschiedene Arten von Popovers festlegen, um genauere Kontrolle über das Popover zu haben. Die Verwendung eines einfachen popover-Attributs ohne Wert entspricht beispielsweise popover="auto". Mit dem Wert auto wird das Licht beim Schließen aktiviert und andere Pop-over werden automatisch geschlossen. Verwenden Sie popover="manual" und Sie müssen eine Schließen-Schaltfläche hinzufügen. Manuelle Pop-over schließen keine anderen Pop-over und ermöglichen es Nutzern nicht, das Pop-over zu schließen, indem sie in der Benutzeroberfläche wegklicken. So erstellen Sie ein manuelles Pop-over:

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

Es ist wichtig zu beachten, dass das Popover-Attribut keine eigene Semantik bietet. Mit Popover können Sie jetzt modale dialogorientierte Anzeigen erstellen. Es gibt jedoch einige wichtige Unterschiede:

Fazit und weitere Lesematerialien

popover bietet viele spannende Funktionen auf der Plattform. Weitere Informationen zu dieser API, einschließlich mehr über die Barrierefreiheit der Funktion und Dokumentation zu den Funktionen, finden Sie in den folgenden empfohlenen Lesematerialien:

• Semantik und das Popover-Attribut: Was wird wann verwendet? von Hidde de Vries
• Hidde de Vries zur Barrierefreiheit im Pop-over: Was der Browser tut und was nicht
• MDN-Dokumentation zu Popovers