• Success Criterion 2.5.2
  • Conformance level A

Menu That Opens and Selects on the Same Press-and-Drag

2.5.2 — Pointer Cancellation

Scenario

Setting

A bank's mobile money-transfer screen

What’s wrong

Menus opening AND selecting on the same down-press (press-drag-release patterns without up-event confirmation or abort).

Example 

recipientList.addEventListener('pointerdown', (e) => {
  activeRecipient = getRecipientAt(e.clientY); // locked in the instant the finger lands
});
recipientList.addEventListener('pointerup', () => {
  startTransfer(activeRecipient); // fires on any release, with no separate confirm step
});

Why it matters

Someone who presses down near the wrong name and lifts off, even just to reposition, can start a transfer to the wrong recipient.

How to test

Press down on a menu item and check whether it's already selected before you release: press-drag-release combos that select on down-press without requiring the up-event fail.

How to fix

Selection and the destructive action must be two separate steps, each cancelable before the transfer actually fires.

recipientList.addEventListener('pointerup', (e) => {
  const target = getRecipientAt(e.clientY);
  showConfirmScreen(target); // a separate, explicit confirm step
});

Outcome

A customer sees a confirmation screen naming the recipient and can back out before any money moves.

Who is affected

Users with tremor and switch-access users whose device can register an unintended press-and-release.

Learn more

Related scenarios