Changing a form control does not unexpectedly submit or navigate

Selecting a checkbox, radio button, or dropdown option that immediately submits a form or navigates to another page surprises all users — but disproportionately harms keyboard users who may activate controls while scanning options rather than making a final choice. WCAG 2.2 SC 3.2.2 (On Input) is a Level A requirement: changing a form control's value must not automatically cause a context change without warning the user first.

Keep onChange handlers limited to state updates. Require an explicit user action — clicking a Submit or Apply button — before navigating or submitting.

// Bad — selects a filter and immediately navigates
<select onChange={(e) => router.push(`/results?filter=${e.target.value}`)}>
  <option value="recent">Most recent</option>
  <option value="popular">Most popular</option>
</select>

// Good — updates state; user applies manually
<select value={filter} onChange={(e) => setFilter(e.target.value)}>
  <option value="recent">Most recent</option>
  <option value="popular">Most popular</option>
</select>
<button onClick={() => router.push(`/results?filter=${filter}`)}>Apply filter</button>

If instant filtering is a UX requirement, debounce the update by at least 300ms and announce the result count change via aria-live="polite" so users know the page has updated.