Comment by pentium166 | Hacker News Reader

Comment by pentium166 | Hacker News Reader

I've been trying to use HTML's native popover and dialog recently. The promise of not having to write/import focus traps, better integration with standard platform "cancel" UX, the top layer concept, etc made them sound great, but in reality it's been kind of painful.

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. Anchoring is currently only supported in Chrome, so popover tooltips show up in the corner. Firefox supports transition animations when opening a dialog but not closing it. The web platform feature needed to tie the mobile back button to closing a dialog isn't actually implemented yet. Frameworks that patch the DOM might clobber modal dialog state because it's a function of both the "open" attribute and the result of showModal().

Some of these will improve but I think the display order problem is here for the long haul.

>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

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.

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)

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.

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.

Reply on news.ycombinator.com