Role and semantics
Section titled “Role and semantics”PreviewCard is built on Base UI Preview Card. The trigger is a native <a href> link. The card is extra visual information: it takes no focus and is not in the tab order, so the destination page must hold the information too.
Keyboard
Section titled “Keyboard”| Key | Behaviour |
|---|---|
| Tab | Focus the link; the card opens after the delay. |
| Enter | Follow the link. |
| Escape | Close the card. |
The link shows a 2 px color-focus-ring outline 2 px outside it with focus-visible. When the card opens, focus stays on the link.
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
| Link | “refund policy, link” |
Contrast
Section titled “Contrast”The link text has 4.5:1 contrast and is underlined; colour is not the only cue. Card text has 4.5:1 on the raised surface.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How PreviewCard meets it | What the product team does |
|---|---|---|
| 1.4.13 Content on hover or focus | The card closes with Escape, stays open on hover and does not close by itself. | Show only extra information in the card. |
| 2.4.4 Link purpose | The link text carries the name. | Write link text that makes sense alone. |
| 2.1.1 Keyboard | It opens on focus too. | Do not put actions in the card. |