Popover

A card hung from the key that opened it, with a printed leader running back to the key. Not modal: the page stays live around it.

Open either card with a click, Enter or Space. Tab goes into it; Escape or a click outside puts it away and focus returns to the key.

• The native popover with popovertarget: the key is announced as expanded or collapsed, and Tab goes from the key straight into the card.
• Not modal: focus is not trapped, and the rest of the page keeps working. For a decision that must be made now, use a dialog.
• Escape closes it and focus returns to the key; a click outside closes it too.
• The leader is drawn with ::before and ::after: nothing to announce.