The current state of Native Web Popover Elements
Native Web Popover Elements
Arguably the most reinvented family of elements/components web-wide and across all frameworks ever written, fall into the "popover" category. Think:
- Cookie banners
- Confirmation modals
- Toast notifications
- Dropdown menus
…and so on, including all of their respective subsets flavours. It's a fact that here at Gravitywell, practically every one of our web projects has dependencies on a number of third-party packages providing these kinds of elements, for use on our projects.
Whilst reaching for highly touted and popular packages assures us that they’ll meet a minimum level of quality and accessibility, the issue remains; inconsistency. Different implementations — across different libraries, across different frameworks — you find yourself having to remind or relearn.
It’d be great if such a ubiquitous family of elements could be standardised. And recently, the web started answering our cries.
Fresh off receiving excellent browser support in late 2022, the Dialog element gives developers a native "modal" style element. In short, a modal is a popover which is urgent and requires immediate interaction to continue or dismiss a flow, whilst rendering outside content non-interactive.
The pros of the native Dialog:
- Fully customisable styling (defaults to very plain styling otherwise)
- Always renders on top (brings an end to the eternal
- Keyboard accessible & screen-reader friendly by default
- Traps focus by default
- Closes on
- Customisable backdrop styling
What’s great about the native Dialog modal is that they have a return value on their
Notice we utilise the newer
method=”dialog” attribute on the Form tag, whereby its "submit" event subsequently fires the Dialog’s "close" event.
- Browser support can be referred to here: https://caniuse.com/dialog
- See MDN docs here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
Still in proposal is the addition of either a Popup element or a Popup attribute. Popups and Dialogs are almost identical behaviourally, aside from the distinct difference that Popups are non-modal. This means they are non-blocking to a user's experience and can be "light-dismissed". An example of such an element would be a toast notification.
This feature is proposed and shepherded by the OpenUI organisation — a group aiming to standardise and trivialise the most common UI components used throughout the web. The group itself is governed in part by W3C (World Wide Web Consortium), the official standards organisation of the web.
Whilst work is still being done on the research and proposal, we cannot in earnest draw concrete conclusions about how the API will end up looking. However, it is highly likely (you would think) that much will be shared between the final deliverable and the already delivered Dialog element, e.g.:
- Fully customisable styling - including backdrop
- Keyboard accessible
For full detail on the subject, I would be remiss to not point you towards the extensive work already written by Open UI here:
Whilst we are not at the finish line with Popover elements, it seems to me that the overseers of the Web are certainly looking to keep pace with the industry, demonstrated by standardising the patterns being used in modern-day applications. Encouraged by a passionate community and organisations like Open UI, you don’t want to take your eye off what the Web will bring.
Watch this space.
Here at Gravitywell, we work with startups and scaleups to build innovative, sustainable tech businesses. If you’re interested in working with us, get in touch.