175: Machine Coding - Accessible UI Component

Learning outcomes

build a focused component under a time limit;
handle keyboard, async, empty, and error states;
keep state transitions explainable.

Practice

Build a typed autocomplete or data table. Support loading, no results, network failure, keyboard navigation, focus restoration, cancellation of stale requests, and an accessible name.

Checkpoint

Run the keyboard path without a mouse and test rapid input changes. Explain which state is local and which data is server-owned.

Failure design

Debounce input only to reduce requests; do not use it as correctness. Track the request identity or abort the previous request so a slow old response cannot replace newer results. Keep focus on the input while results update, expose the active option, and provide a real empty result and retryable error state.

Complete solution guidance

Render an input with a stable accessible label and a popup listbox only while it has results or an actionable status. Give each option a stable id, set aria-controls and aria-activedescendant, and keep the active index clamped when results shrink. On every query, increment a request token; the response may commit only if its token is current. Aborting is an optimization, not the correctness guarantee. Reset active selection on a new result set and preserve the input value after selection according to the contract.

Use a small state machine: idle, loading, success, empty, and error. Do not show stale results as if they belong to the new query. Announce loading and errors through a polite status region, and make retry repeat the latest query. Avoid relying on color, hover, or an automatically focused option.

Tests and rubric

Test rapid typing with out-of-order promises, abort/error distinction, empty results, retry, keyboard wrap policy, Enter with no active option, Escape, disabled input, focus retention, result shrinkage, and accessible names/roles. Score 3 points each for stale-response safety, state completeness, keyboard contract, semantic accessibility, and test quality. Full credit requires a test proving an old response cannot overwrite a newer one.

Tests

Test rapid typing, out-of-order responses, no results, network failure, keyboard arrows, Escape, Enter, disabled state, and a screen reader-visible status message.