Firefox’s keyboard trap

In my ongoing attempt to tame the Popover API, I’ve encountered another oddity.

When a popover is open in Firefox (at least on machines running Linux and Windows, I don’t have a Mac at hand), pressing Shift+Tab repeatedly will trap you in a loop that starts at the popover’s triggering element, and then goes back to the beginning of the page. All good so far. But from there you do not leave the web page and move on to browser UI controls, instead you end up inside the popover (assuming it contains interactive elements), then back to its trigger, and so on.

The issue occurs in manual and auto popovers, and independent of what opened it, be that HTML’s popovertarget or JS’s showPopover(). You’ll be trapped no matter what, only the cycle of interactive elements might differ, because when you open the popover with JS, there is no triggering element, so in this case the popover’s position in the DOM will determine which interactive elements can be reached. In any case, it seems to be a bug, so I’ve filed #1949678. (There is no issue when you move forward using Tab.)

I ended up with more things that have bothered me, but those are not bugs and thus a story for another day.^[1]

Showcase

View “Popover Shift+Tab Firefox issue” on CodePen.

---

Footnotes

1. Okay, fine, two things have bugged me: 1. The Popover API lacks something like the details disclosure element’s open attribute, in the sense that a popover cannot start off in it’s open state, so we need JS for that. And 2., despite native popovers’ excellent browser support, getting them to work with Floating UI is not my cup of tea; I’m starting to think that I’ll have to wait for CSS Anchor Positioning, which is anyhow part of Interop 2025. ↩︎