Role and semantics
Section titled “Role and semantics”The panel has the alertdialog role; the title names it and the description describes it. The trigger carries aria-expanded.
Keyboard
Section titled “Keyboard”| Key | Behaviour |
|---|---|
| Enter, Space | Open the panel from the trigger; press a button. |
| Tab, Shift + Tab | Move between the cancel and confirm buttons. |
| Escape | Cancel and close; focus returns to the trigger. |
When the panel opens, focus moves to cancel, the safe choice; on close it returns to the trigger.
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
| Panel | “Delete this card?, alert dialog, This cannot be undone.” |
| Focus | “Cancel, button” |
Contrast
Section titled “Contrast”Text has 4.5:1 on the raised surface; the buttons carry the Button contrast.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How Popconfirm meets it | What the product team does |
|---|---|---|
| 3.3.4 Error prevention | It asks before the action. | Use AlertDialog for heavy actions. |
| 2.4.3 Focus order | Focus moves to cancel and back on close. | - |
| 4.1.2 Name, role, value | alertdialog, named by the title. |
Write the title as a question. |