• Success Criterion 3.2.2
  • Conformance level A

Control Inside a Dialog That Accidentally Closes the Whole Dialog

3.2.2 — On Input

Scenario

Setting

A grocery delivery app's shopping cart

What’s wrong

Interacting with a control inside an overlay unexpectedly closes the overlay — the user presses an in-dialog button and the whole dialog vanishes mid-task.

Example 

<div role="dialog" onclick="closeDialog()">
  <button onclick="removeItem(itemId)">Remove item</button>
</div>

Why it matters

Because the click handler sits on the whole dialog, tapping Remove item also fires the dialog's own close handler, so the cart dialog vanishes right after the user removes one item.

How to test

Press a button inside an open overlay/dialog: if it unexpectedly closes the entire overlay instead of just performing its own action, it fails.

How to fix

Attach the close behavior to its own explicit control, and stop click events from bubbling out of interactive children.

<div role="dialog">
  <button onclick="removeItem(itemId); event.stopPropagation();">Remove item</button>
  <button onclick="closeDialog()">Close</button>
</div>

Outcome

A shopper removes an item and keeps editing the rest of the cart in the same dialog.

Who is affected

Users with limited dexterity who rely on large tap targets, and screen reader users, both lose the dialog mid-task and must reopen the cart to keep editing it.

Learn more

Related scenarios