The popover attribute puts a card in the top layer with light dismiss and Escape built in, and popovertarget wires a button to it with no script.CSS anchor positioning keeps it beside the button; the script keeps aria-expanded in step and moves focus in only when the card has something to use.
Use it with a mouse, a keyboard or a screen reader.The inspector beside it shows what the browser tells assistive technology as you go: focus, state changes and announcements.
Checkout redesign, round 2
Design review · Due Friday
Reviewer
AR
Asha Rao
Product designer, Pune
Available · 4:30 pm her time
Team
Checkout and payments
Reviews this month
12
The demo works without JavaScript only as far as its HTML does; the inspector needs JavaScript.
Keyboard
Keys it answers to
Every action works without a pointer.
Key
What it does
Enter or Space
On the name button, opens the card and moves focus to its first button; pressed again, closes it.
Tab or Shift+Tab
Moves through the card's buttons, which come straight after the name button; tabbing on past the card closes it.
Escape
Closes the card and returns focus to the name button.
Enter or Space
On Follow, turns following on or off.
Screen readers
What it announces
Written from the roles, names and states in the markup.
When
Expected announcement
Focus reaches the name button
Asha Rao, button, collapsed, has pop-up dialog
The card opens
Asha Rao, dialog. Message, button
Follow is pressed
Follow, toggle button, pressed
Escape closes the card
Asha Rao, button, collapsed
Message is pressed
Opened a message to Asha Rao
These are expected announcements, not recordings.Wording and order differ between screen readers and browsers.
Code
Copy the code
The exact files this demo runs on.The styles are served with a prefix that keeps this site's own styles out of the demo; what you copy is the original.
/**
* Popover: a card anchored to its button, on the native popover attribute.
*
* Markup: [data-ap-popover] holding a button[popovertarget][aria-expanded]
* followed directly by its div[popover][role=dialog][aria-labelledby], and a
* role=status paragraph[data-ap-status]. The browser opens and closes the
* card (click, Escape, a click outside); this script keeps aria-expanded in
* step, moves focus in when the card has controls and back out when it
* closes, and places the card where CSS anchor positioning is missing.
*/
const FOCUSABLE = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex='-1'])";
export function init(root) {
const trigger = root.querySelector("[popovertarget]");
const card = root.querySelector("[popover]");
const status = root.querySelector("[data-ap-status]");
const anchored = CSS.supports("anchor-name: --a");
let tracking = null;
// Fallback placement: below the button, or above it when there is no room,
// kept inside the viewport.
function place() {
const r = trigger.getBoundingClientRect();
const gap = 8;
const edge = 8;
const below = r.bottom + gap + card.offsetHeight <= innerHeight - edge || r.top - gap - card.offsetHeight < edge;
card.style.top = `${below ? r.bottom + gap : r.top - gap - card.offsetHeight}px`;
card.style.left = `${Math.max(edge, Math.min(r.left, innerWidth - card.offsetWidth - edge))}px`;
}
function onToggle(event) {
const open = event.newState === "open";
trigger.setAttribute("aria-expanded", String(open));
if (open) {
if (!anchored) {
place();
tracking = new AbortController();
addEventListener("scroll", place, { capture: true, passive: true, signal: tracking.signal });
addEventListener("resize", place, { signal: tracking.signal });
}
// Move focus in only when there is something to use.
card.querySelector(FOCUSABLE)?.focus();
} else {
tracking?.abort();
tracking = null;
// Focus was inside the card and has nowhere to go: give it back.
const active = document.activeElement;
if (!active || active === document.body || card.contains(active)) trigger.focus({ preventScroll: true });
}
}
// Tabbing on past the card closes it, so it never sits over what has focus.
function onFocusOut(event) {
const to = event.relatedTarget;
if (to && !card.contains(to) && to !== trigger && card.matches(":popover-open")) card.hidePopover();
}
function onClick(event) {
const toggle = event.target.closest("[data-ap-follow]");
if (toggle) {
toggle.setAttribute("aria-pressed", String(toggle.getAttribute("aria-pressed") !== "true"));
} else if (event.target.closest("[data-ap-message]")) {
card.hidePopover();
trigger.focus();
status.textContent = "Opened a message to Asha Rao";
}
}
function onTriggerClick() {
status.textContent = "";
}
card.addEventListener("toggle", onToggle);
card.addEventListener("focusout", onFocusOut);
card.addEventListener("click", onClick);
trigger.addEventListener("click", onTriggerClick);
return () => {
card.removeEventListener("toggle", onToggle);
if (card.matches(":popover-open")) card.hidePopover();
tracking?.abort();
card.removeEventListener("focusout", onFocusOut);
card.removeEventListener("click", onClick);
trigger.removeEventListener("click", onTriggerClick);
};
}
for (const root of document.querySelectorAll("[data-ap-popover]")) init(root);
Starting a message is confirmed in a status line that is announced without moving focus.
Usage
When to use it
Use it
Extra detail or a few actions tied to one thing on the page, like a person's card, quick settings or a share link.
Content people dip into and leave, without losing their place on the page.
Use something else
A short hint about a control: use a tooltip, or a toggletip if it must be opened on purpose.
A list of commands: use a menu button, which has the keys people expect from a menu.
A task that must be finished before going on: use a modal dialog.
Common failures
How it usually goes wrong
Opening on hover only
Touch screens, keyboards and screen readers cannot hover. This card opens on click, Enter or Space.
A card stranded at the end of the page
A popup appended to the end of the body is read last and reached last with Tab. Keep it right after its button; the top layer handles stacking.
Focus dropped on close
When a card closes with focus inside it, focus falls back to the start of the page. Here it goes back to the name button.
Moving focus for nothing
Pulling focus into a card that only holds text takes people away from where they were. Focus moves in only when there is a control to use.
No expanded state
Without aria-expanded, a screen reader user cannot tell that the button opened anything or that it is still open.
Clipped by its container
A card positioned inside a box with overflow: hidden gets cut off. The top layer lifts it out, and the fallbacks keep it on screen.
Notes
Building it
popover (auto) closes on Escape, on a click outside and when another auto popover opens. Use popover="manual" only when something else must close it.
Chromium already reports the expanded state of a popovertarget button; the script sets aria-expanded as well so every browser and screen reader gets it.
anchor-name on the button and position-anchor on the card place it; position-try-fallbacks flips it when it would leave the screen. Without anchor positioning, the script places it from getBoundingClientRect.
role=dialog fits because the card holds buttons and takes focus. A popover with only text needs no role and should leave focus on the button.
Checked with axe in light and dark themes, at desktop and phone widths, and by keyboard.Not yet tested with every screen reader and browser pair.Report a correction
