Forms, feedback, and the final audit
Finish and audit the interface
Test the complete project board without JavaScript, with keyboard and zoom, through failures, and across every enhanced API fallback.
The project is finished when its behaviors survive more than the happy path. A native element reduces the code you own, but it does not pick correct content, focus, state, error recovery, or browser support for you.
Begin with JavaScript disabled. Navigation, task reading, and disclosures should stay useful. Enhanced editing should have a clear fallback or an honest limitation. Turn JavaScript back on and test Add, Edit, Complete, More actions, Delete, filters, validation, counters, and transitions as one continuous workflow.
const capabilities = {
dialog: 'HTMLDialogElement' in window,
popover: 'popover' in HTMLElement.prototype,
inert: 'inert' in HTMLElement.prototype,
viewTransition: 'startViewTransition' in document
}
console.table(capabilities)
Run that once in DevTools. You get a small table showing which enhanced APIs the current browser exposes. That tells you which fallback paths you still need to test.
Run a keyboard pass next. Visible focus, logical order, no traps, expected Escape behavior, and meaningful recovery after removing an opener. Run a zoom and reflow pass at 200% and 400%. Dialog and popover actions must stay reachable without two-dimensional scrolling for ordinary content.
Run a state pass: rapid repeated clicks, an empty board, a long task title, duplicate titles, a removed target, rejected server work, and a transition interrupted by another update. Keep destructive actions recoverable or explicit. Never leave the entire board inert after a rejected promise.
Feature detection informs an implementation branch. It is not the user experience by itself. Decide what each missing capability means. A popover can become an inline panel. A transition becomes an immediate update. A server-backed editor can navigate to a full page.
Try this before you ship: write a small matrix with rows for no script, keyboard, touch, 400% zoom, reduced motion, unsupported enhancement, empty data, long text, and failed save. Record the expected result and actual evidence. Fix the first broken user task rather than adding more polish. If a fallback cannot perform the same enhanced action, make the available path and limitation honest.
Lesson completed