[ronbenton]

>Stacking order when you have multiple modal dialogs and popovers in the top layer is based on most recently revealed element, so that toast that just opened is now hidden under a dialog.

Whenever I have to fight something like this it always makes me question the goodness of the pattern to begin with. Stacking multiple modals/popovers/tooltips can’t be a great UX (or accessibility) pattern, can it? I find at least half the time that I’m fighting the browsers it’s because I’m trying to do something suboptimal

[cosmic_cheese]

It’s a pattern that I’ve seen called dialog tunneling, and I think the most prominent example of it is Windows 9x up through 7. Web apps are pretty bad about it too though, more often than not because navigation can’t be made sensible when there’s a new feature that needs to be shoved in front of users every few weeks/months, so stuff ends up getting buried in dialogs N deep to make room.

Definitely registers as poor UX in my book.

[pentium166]

I agree that stacking multiple modal dialogs should generally be avoided, and if whatever you're doing is complex enough you should consider whether it needs to be in a dialog at all.

What I'm talking about is if I'm using popover to alert the user about something, let's say another user updated the page they were viewing, and they clicked into a confirmation dialog fractions of a second after the alert arrived, the alert is now behind the dialog and attempting to click on it either does nothing or closes the dialog, depending on how I've configured the dialog.

As the application developer, I'm responsible for deciding how the modes in my multi-modal application behave, and I want top-level alerts like this example to be interactable and in front of confirmation dialogs in all modes, regardless of which one opened first. With the current top layer behaviour, that is not really achievable without doing something like reparenting open alert popovers into the most recently opened dialog, and that's ALSO not properly functional (element state gets reset) until Element.moveBefore() is generally available.

[webstrand]

I have an ImageViewer component, which is sometimes displayed in a modal dialog for confirming operations on that image, like delete, move, deduplicate, etc.

The ImageViewer has a context menu popover that needs to appear above the modal that contains it. Using the Popover API lets me be sure that there'll be no z-fighting, the popover won't be clipped by its parent element, and that the popover will dismiss correctly when the user wants it gone. It's pretty great, and I don't think it harms accessibility any more than _having_ a context menu in the first place harms it. And the UX is fine.

(Aside from some hellish work making it so that `oncontextmenu` can actually open a popover. According to the spec, right button mouseup triggers light dismiss, closing the context menu as soon as it opens)

[charrondev]

Stacking modals is no good for sure, but just because a form is part of a modal doesn’t mean it should never be able to use a tooltip, dropdown, or popover.