Today I learned
The popover API
If you wanted to integrate a popover on a website before, you had to reach out to a third-party package in the past because they made it easy to customize things like positioning and enhancing functionality. This may soon be a tale of the past!
To make use of the new popover API, three basic things are required:
- the popover attribute on the element containing the popover
- an id on the element containing the popover
- the element which opens the popover needs to have a popovertarget attribute with the value of the popover’s id
<button popovertarget="popover">Open popover</button> <div popover id="popover" > <p>Popover content</p> </div>
Implementing such a popover is accessible by default because the popover and its trigger are connected semantically. Furthermore, closing the popover with the ESC key is built-in, making it easy for keyboard users to dismiss it.
In addition to that, the new popover has a light-dismiss functionality. If you click anywhere outside the popover, it will close and return focus. If you open the popover, the next keyboard tab will stop inside the popover, so focus management is handled by default.
Another great advantage of it is that the popover will always appear on a separate level above the rest of the page, so there is no need for manual z-index handling.
That’s such a great addition, I can’t wait until it’s stable in all modern browsers and we can use it! It’s a big step into easier and faster ways to build websites and improve accessibility by default.
It’s important to note that the new popover attribute will only add behavior, not semantics. Popovers have no default role, and you’re supposed to add your own semantics to it! Hidde de Vries wrote an excellent post about different semantics ↗ that could make sense for popover-behaved elements. He takes a closer look at menus, dialogs, and listboxes.
If you want to support me, you can buy me a coffee. I would be very happy about it!☕️ Buy me a coffee ☕️
I wish you a wonderful day! Marco