Aglet

Triage autocomplete keyboard selection before changing interaction

A suggestion list can look correct while keyboard users commit a different value or lose focus. Triage the interaction contract before changing JavaScript or markup. Follow the field from typing through expansion, movement, dismissal, and submission, and keep visual focus distinct from the value actually sent.

Establish what is happening

  1. Trace the key path

    Record typed text, expanded state, active option, focus target, and submitted value for ArrowDown, ArrowUp, Enter, and Escape. Include a pointer selection and a path with no matching suggestions. Keep the same prefix so differences are attributable.

  2. Separate focus and value

    Compare the visible highlight, assistive-technology focus, input value, and query sent to the results page. Note whether moving through options changes text before acceptance. A focus cue that looks selected is not proof that the suggestion was committed.

  3. Set the interaction boundary

    List expected behavior for keyboard, touch, and screen reader paths, including dismissal without mutation. Preserve one failing sequence and one passing control. Route an unclear choice as a design contract question instead of guessing which event should win.

What to carry forward

The triage output is an interaction matrix naming focus, highlighted option, committed value, and expected dismissal for each key path. Stop when another reviewer can replay the sequence. If the visual and semantic states disagree, keep the mismatch explicit before changing behavior.

Technical background: W3C guidance.

Keep the decision with the work.

Use a Work Item in Aglet to record the problem, the evidence you have, and the next decision. Add an owner and priority, then keep updates in the discussion so the next person can follow the reasoning.

Create an account See the product workflow