Dealbreaker bugs in native popovers
posted on
One of my clients decided to write a custom popover component that uses native popovers under the hood. We built the component and were happy with it. They were about to ship it until we realised there was an accessibility bug so severe that it was a dealbreaker for us.
Popovers are floating UI elements you can show or hide by pressing a button. They come with many accessibility features built in, so you don’t have to handle most of the work. You can learn more about that in “The accessibility of the popover attribute” (YouTube).
All you need to use popovers is the popover and popovertarget attributes.
<button popovertarget="popover-html">HTML</button>
<div popover id="popover-html">
Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser.
</div>Try it yourself:
Bugs
Popovers can contain focusable elements, such as buttons. In the following example, if you use the keyboard and focus the first button, press Enter, and press Tab again, you can see how focus jumps from the trigger to the first button inside the popover. By pressing tab repeatedly, you can move from button to button until you finally reach the next button outside the popover.
<p>
<button popovertarget="popover-buttons">First Button</button>
<button>Second Button</button>
</p>
<div popover id="popover-buttons">
<button>Focusable</button>
<button>Focusable</button>
<button>Focusable</button>
</div>
That works as long as you don’t use slots or the details element inside your popovers. If you do, focus will still move from the trigger to the first button inside the popover, but if you press Enter, focus doesn’t jump to the next focusable element inside the popover; it skips all remaining elements, leaves the popover, and then jumps to the next button outside the popover. This bug is present in Chromium-based browsers and versions of Firefox lower than 145.
Details/Summary:
Focusable
Not Focusable
Not Focusable
Web component:
<p>
<button popovertarget="popover-buttons2">First Button</button>
<button popovertarget="popover-buttons2">Second Button</button>
</p>
<div popover id="popover-buttons2">
<the-buttons>
<template shadowrootmode="open">
<slot></slot>
<button>Focusable</button>
<button>Not Focusable</button>
<button>Not Focusable</button>
</template>
</the-buttons>
</div>
Unfortunately, that was a dealbreaker for us. By providing components for others to use, we have no control over how they’ll use them. Since we built our pattern library with web components, some of which use Shadow DOM and slots, people will likely also use them in popovers, making them inaccessible to many.
Popovers are great, and they work well, except for these two bugs. You should definitely use them if you have control over the content inside them. If you don’t, you should consider waiting until these bugs have been resolved.