Popconfirm

A confirmation attached to the control that triggers it, for a question small enough that a Modal would be too much.

Accessibility

Popconfirm is a tooltip that asks a question, not a dialog. It does not move focus, trap it or close on Escape, and a keyboard reader has to travel to its two buttons.

What it renders

The bubble is a <div role="tooltip"> rendered at the end of document.body. While it is open, the trigger gets an aria-describedby pointing at it. A closed Popconfirm leaves the trigger as you wrote it.
  • It has no role="dialog" and no aria-modal. The question is read as a description of the trigger, not as a new place the reader has moved to. The limits below follow from that.
  • An aria-describedby you set on the child is kept and joined with the bubble's.
  • The buttons are ordinary small Buttons. What they say is what a reader hears.

Focus on open

Nothing gets focus when the bubble opens, and focus is not trapped. It stays on the trigger the reader clicked.
  • That part works: the trigger is where aria-describedby lands, so a reader who re-reads the focused element hears the question.
  • Because focus is not trapped, the reader can walk away mid-question. Only put an action behind a Popconfirm if it is safe to leave unanswered.
  • Do not add a focus trap yourself. Without a dialog role and an Escape route, a trap locks the reader in.

Escape does not close it

Popconfirm has no Escape key handling. The ways out are Cancel, OK and a click outside.
  • If Escape matters to the flow, use a Modal.
  • Do not add a page-wide Escape listener to close it. Focus is not in the bubble, so the key was probably meant for something else.

Reaching the two buttons

The bubble renders at the end of the page and nothing moves focus into it, so Tab from the trigger goes to the next control on the page. Cancel and OK come after everything else.
  • A keyboard reader hears the question right away, then has to tab through the rest of the page to answer it.
  • Use getPopupContainer to bring the buttons closer. Return the trigger's parent and the buttons land right after the trigger in tab order.
  • The bubble then takes on that element's overflow clipping and stacking, so a scroll container can cut it off.
  • Where the reader must answer, use a Modal. It moves focus in, keeps it there, and closes on Escape.

Naming, and color as a second signal

The trigger carries the accessible name, not the bubble. Wrapping a control in a Popconfirm names nothing.
  • An icon-only delete button needs its own aria-label, or an aria-labelledby pointing at text that says it.
  • title is read as the description, so write it as a whole sentence that makes sense on its own.
  • Replace the default OK. It names nothing on its own. okText="Delete" is both the label and the name.
  • Never let color be the only sign of danger. A red button reading “OK” looks safe to anyone who cannot see the red, or who uses forced colors. The word says it, and the color agrees.
  • The icon is decoration and is not announced, so it cannot be where “warning” is said. icon={null} removes it when it adds nothing.

Contrast and motion

  • Colors come from your theme. Check the title and description against colorBgElevated, and the OK label against the button's own fill, not against the page.
  • The default icon uses colorWarning. A warning hue on a raised surface is the pair most likely to fall below the 3:1 a non-text graphic needs.
  • The description is quieter than the title but still needs 4.5:1, and a custom theme is not checked for you.
  • The bubble zooms in. For readers who ask for reduced motion, set motion: false in your token file's seed, which turns the transitions off. Put anything you animate inside the bubble behind motion-safe:.