Popover

How the Popover works with a keyboard and assistive tech, and where it stands against WCAG 2.2 AA.

FreeReact and VuePopover blocks15 blocksPro

AAWCAG 2.2 target

8/8contrast pairs passing

5keyboard interactions

The Popover is a non-modal dialog anchored to a trigger. The trigger says whether it is open and which panel it controls; opening it moves focus into the card, Escape returns focus to the trigger, and the page around it stays usable. It is opened by a click, never by hover.

Keyboard#

Enter

On the trigger, opens the popover and moves focus into the card. Pressed again, closes it.

Space

On the trigger, the same as Enter. On Back, Next or Close, activates the button.

Tab

Moves through Close, Back and Next. Past the last one, focus moves on to the page and the popover stays open.

Shift+Tab

Moves back through the card's controls, then to the trigger.

Esc

Closes the popover and returns focus to the trigger.

Semantics#

aria-haspopup="dialog"

Announces that the trigger opens a dialog.

Trigger

aria-expanded

true while the card is open, false when it is closed.

Trigger

aria-controls

Points at the card's id.

Trigger, while open

role="dialog"

A non-modal dialog, named by ariaLabel (Tip by default) and described by the step copy.

Card

aria-live="polite"

Back and Next change the copy in place, and the new tip is announced.

Step copy

<button aria-label="Close">

The close button has a name; the cross is hidden.

dismissIcon

disabled

Back cannot be pressed on step one and leaves the tab order.

Back on the first step

Colour contrast#

Every variant and state has to meet WCAG 2.2 Level AA. Measure the colours as they land on screen: a translucent hover or press wash over whatever sits behind it.

4.5:1

Copy and step count · Always

The 14px tip is #6d6d6d on white (5.17:1); the step count is #2a2a2a (14.35:1).

WCAG 1.4.3 Contrast (Minimum) ↗

4.5:1

Buttons · Rest, Hover

12px Back and Next labels against their fills, and the trigger's white label on #2a2a2a.

WCAG 1.4.3 Contrast (Minimum) ↗

Not required

Card edge and tail · Always

The #f2f2f2 hairline and the tail are decoration. The tail points at the trigger, but the trigger's aria-controls is what ties them together.

WCAG 1.4.11 Non-text Contrast ↗

3:1

Focus indicator · Focus visible

Every control, and the card itself when focus lands on it, rings in #1a6ef8 off a 2px white gap (4.54:1).

WCAG 1.4.11 Non-text Contrast ↗WCAG 2.4.13 Focus Appearance ↗

Not obscured

Placement · Open

The card shifts or flips to stay inside its container, so it never covers the trigger or runs off the screen.

WCAG 2.4.11 Focus Not Obscured ↗

Measured contrast#

Button labels and the close glyph against their fills, at rest and on hover, on the card's white surface. All 8 pairs reach their minimum.

PartRestHover

Trigger · Button14.3520.14

Footer · Back5.174.62

Footer · Next5.408.53

Content · Close glyph14.3513.17

Motion#

The card scales from 97% and fades in over 140ms only when motion is allowed; under prefers-reduced-motion it appears at once.
Back and Next swap the copy without animation.

Checklist#

Name the card after what it is (Getting started tour), not the default Tip.

Pressing Back on step two disables Back while it has focus, and focus is lost. Move focus to Next when that happens, before the code library ships.

A click outside closes the card without moving focus. Tabbing away leaves it open; that is expected of a non-modal dialog, but close it if it would cover what comes next.

Popovers open on click only. For a hover hint, use a Tooltip.

Buttons are 40px and the close button 28px, all over the 24px target minimum.

The step count (1 of 4) is not in the live region; include it in the copy if people need to hear where they are.