Clarifying The Relationship Between Popovers And Dialogs

The distinction between Popovers (i.e., the popover attribute) and Dialogs (i.e., each the <dialog> component and the dialog accessible position) is extremely complicated — a lot that many articles (like this, this, and this) have tried to shed some mild on the problem.

If you happen to’re nonetheless feeling confused, I hope this one clears up that confusion as soon as and for all.

Distinguishing Popovers From Dialogs

Let’s pull again on the technical implementations and think about the higher image that makes extra sense and places all the pieces into perspective.

The rationale for this categorization comes from a few noteworthy factors.

First, we all know {that a} popover is content material that “pops” up when a person clicks a button (or hovers over it, or focuses on it). Within the ARIA world, there’s a helpful attribute known as aria-haspopup that categorizes such popups into 5 totally different positions:

• menu
• listbox
• tree
• grid
• dialog

Strictly talking, there’s a sixth worth, true, that evaluates to menu. I didn’t embody it above because it’s successfully simply menu.

By advantage of dialog being on this listing, we already know that dialog is a sort of popover. However there’s extra proof behind this too.

The Three Varieties of Dialogues

Since we’re already speaking concerning the dialog position, let’s additional increase that into its subcategories:

Dialogs could be categorized into three fundamental sorts:

• Modal: A dialog with an overlay and focus trapping
• Non-Modal: A dialog with neither an overlay nor focus trapping
• Alert Dialog: A dialog that alerts display screen readers when proven. It may be both modal or non-modal.

This brings us to a different cause why a dialog is taken into account a popover.

Some individuals might say that popovers are strictly non-modal, however this appears to be a serious misunderstanding — as a result of popovers have a ::backdrop pseudo-element on the highest layer. The presence of ::backdrop signifies that popovers are modal. Quoting the CSS-Methods almanac:

The ::backdrop CSS pseudo-element creates a backdrop that covers all the viewport and is rendered instantly under a <dialog>, a component with the popup attribute, or any component that enters fullscreen mode utilizing the Fullscreen API.

That mentioned, I don’t advocate utilizing the Popover API for modality as a result of it doesn’t have a showModal() methodology (that <dialog> has) that creates inertness, focus trapping, and different obligatory options to make it an actual modal. If you happen to solely use the Popover API, you’ll must construct these options from scratch.

So, the truth that popovers could be modal implies that a dialog is just one sort of popover.

A Popover Wants an Accessible Position

Popovers want a task to be accessible. Hidde has a nice article on choosing the precise position, however I’m going to offer some factors on this article as nicely.

To begin, you should utilize one of many aria-haspopup roles talked about above:

• menu
• listbox
• tree
• grid
• dialog

You could possibly additionally use one of many extra advanced roles like:

There are two extra roles which are barely extra contentious however might do exactly wonderful.

To know why tooltip and standing could possibly be legitimate popover roles, we have to take a detour into the world of tooltips.

A Observe on Tooltips

From a visible perspective, a tooltip is a popover as a result of it comprises a tiny window that pops up when the tooltip is displayed.

I included tooltip within the psychological mannequin as a result of it’s cheap to implement tooltip with the Popover API.

<div popver position="tooltip">...</div>

The tooltip position doesn’t do a lot in display screen readers at the moment so you could use aria-describedby to create accessible tooltips. However it’s nonetheless vital as a result of it could prolong accessibility assist for some software program.

However, from an accessibility standpoint, tooltips aren’t popovers. Within the accessibility world, tooltips should not include interactive content material. In the event that they include interactive content material, you’re not a tooltip, however a dialog.

You’re pondering of dialogs. Use a dialog.

Heydon Pickering, “Your Tooltips are Bogus”

That is additionally why aria-haspopup doesn’t embody tooltip —aria-haspopup is meant to suggest interactive content material however a tooltip should not include interactive content material.

With that, let’s transfer on to standing which is an attention-grabbing position that requires some rationalization.

Why standing?

Tooltips have a fairly advanced historical past on the earth of accessible interfaces so there’s quite a lot of dialogue and competition over it.

To maintain issues brief (once more), there’s an accessibility subject with tooltips since tooltips ought to solely present on hover. This implies display screen readers and cell phone customers received’t be capable to see these tooltips (since they will’t hover on the interface).

Steve Faulkner created another — toggletips — to fill the hole. In doing so, he defined that toggletip content material have to be introduced by display screen readers via reside areas.

When initially displayed content material is introduced by (most) display screen readers that assist aria-live

Heydon Pickering later added that standing can be utilized in his article on toggletips.

We will provide an empty reside area, and populate it with the toggletip “bubble” when it’s invoked. It will each make the bubble seem visually and trigger the reside area to announce the tooltip’s data.

<!-- Code instance by Heydon -->
<span class="tooltip-container"> 
  <button sort="button" aria-label="extra information" data-toggletip-content="This clarifies no matter wants clarifying">i</button> 
  <span position="standing"> 
    <span class="toggletip-bubble">This clarifies no matter wants clarifying</span> 
  </span>
</span>

Because of this standing could be a potential position for a popover, however you will need to use discretion when creating it.

That mentioned, I’ve chosen to not embody the standing position within the Popover psychological mannequin as a result of standing is a reside area position and therefore totally different from the remaining.

In Abstract

Right here’s a fast abstract of the psychological mannequin:

• Popover is an umbrella time period for any sort of on-demand popup.
• Dialog is one sort of popover — a sort that creates a brand new window (or card) to include some content material.

If you internalize this, it’s not laborious to see why the Popover API can be utilized with the dialog component.

<!-- Makes use of the popover API. Position must be decided manually -->
<div popover>...</div>

<!-- Dialog with the popover API. Position is dialog -->
<dialog popover>...</dialog>

<!-- Dialog that does not use the popover API. Position is dialog -->
<dialog>...</dialog>

When selecting a position on your popover, you should utilize certainly one of these roles safely.

• menu
• listbox
• tree
• grid
• treegrid
• dialog
• alertdialog

The additional benefit is most of those roles work along with aria-haspopup which gained respectable assist in display screen readers final 12 months.

In fact, there are a pair extra you should utilize like standing and tooltip, however you received’t be capable to use them along with aria-haspopup.

Additional Studying