WCAG 2.5.2 — Pointer Cancellation

What this requires

For functionality operated using a single pointer, at least one of:

The action does not execute on the down-event (touch-down, mouse-down).
The action is completed by the up-event, and a mechanism is available to abort or undo before completion.
The up-event reverses any outcome of the down-event.
The down-event execution is essential (e.g. piano-key playback, drawing).

In practice, this is satisfied by binding to click (which fires on up-event after both down and up have landed on the same element) rather than mousedown or pointerdown.

How AI coding tools fail this

When asked to "make this button feel snappier", AI tools sometimes move the action to onMouseDown or onPointerDown thinking it shaves a few milliseconds. The button fires the moment the finger lands, with no chance to slide off and cancel.

The second pattern: custom drag-handle components that fire actions on pointerdown — opening a context menu, starting a destructive operation. Users with tremor or imprecise pointing have no escape.

The third: gesture libraries with onLongPress that fire after a fixed delay regardless of whether the user has slid off the trigger. Sliding off should abort.

Failing examples

A delete button bound to mousedown:

<button onMouseDown={confirmDelete}>Delete</button>

A custom long-press that fires regardless of finger movement:

function LongPressButton({ onLongPress }) {
  useEffect(() => {
    if (!isPressed) return;
    const id = setTimeout(onLongPress, 600);
    return () => clearTimeout(id);
  }, [isPressed, onLongPress]);
}

Passing examples

Use onClick (fires on up-event over the same element):

<button onClick={confirmDelete}>Delete</button>

A long-press that cancels if the pointer leaves:

function LongPressButton({ onLongPress, children }) {
  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const start = () => {
    timerRef.current = setTimeout(onLongPress, 600);
  };
  const cancel = () => {
    if (timerRef.current) clearTimeout(timerRef.current);
  };
  return (
    <button
      onPointerDown={start}
      onPointerUp={cancel}
      onPointerLeave={cancel}
      onPointerCancel={cancel}
    >
      {children}
    </button>
  );
}

Edge cases

click is the safe default. It already encodes down-up-same-element behaviour. Don't bind directly to mousedown / pointerdown unless the use case is essential.
Drag handles legitimately need pointerdown to start a drag, but the drag must be cancellable (release before completion, or Escape during).
Drawing apps and instrument keys are exempt under the "essential" clause.
Touch-and-hold to confirm patterns are fine as long as releasing early aborts the action. Add a visual countdown so the user sees progress.
Context menus typically open on right-click (which is a multi-step pointer interaction). Custom context menus should follow the same.

How Jeikin handles this

The scanner flags onMouseDown, onPointerDown, and onTouchStart handlers that perform actions (rather than just kicking off a drag or hover state) and maps each to WCAG 2.5.2. The dashboard records each finding and tracks the move to onClick or a cancellable pattern.

References

W3C — Understanding 2.5.2 Pointer Cancellation (opens in new tab)