Finish and audit the interface

The project is finished when its behaviors survive more than the happy path. A native element reduces the amount of code you own, but it does not choose correct content, focus, state, error recovery, or browser support for you.

Begin with JavaScript disabled. Navigation, task reading, and disclosures should remain useful; enhanced editing should have a clear fallback or limitation. Re-enable JavaScript 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 a keyboard pass: 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 remain 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 an 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, and a server-backed editor can navigate to a full page.

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.