• Success Criterion 3.2.2
  • Conformance level A

Country Selector That Re-Renders the Form and Drops Focus

3.2.2 — On Input

Scenario

Setting

A food-delivery app's order-tracking screen

What’s wrong

Country select re-rendering the entire form and dropping focus/entered data (change of context without warning).

Example 

countrySelect.addEventListener('change', () => {
  // Order hasn't been picked up yet, so the customer can still fix the delivery address
  document.getElementById('address-form').innerHTML = renderFormFor(countrySelect.value);
});

Why it matters

Changing the delivery country on an order that hasn't shipped yet re-renders the entire address form from scratch, discarding the street and apartment details already typed and dropping keyboard focus back to the top of the page.

How to test

Change a country/region select without pressing submit: if the entire form re-renders and drops focus or previously entered data, it fails.

How to fix

Update only the fields that actually depend on country, preserve unrelated input, and move focus deliberately to the next relevant field.

countrySelect.addEventListener('change', () => {
  updateAddressFieldsFor(countrySelect.value); // updates only country-specific fields
  document.getElementById('postal-code').focus();
});

Outcome

A customer correcting their delivery country before the order ships keeps every address detail they had already entered.

Who is affected

Keyboard and screen reader users fixing a delivery address before pickup lose their place entirely and must relocate the field they were on, plus retype anything already entered.

Learn more

Related scenarios