Project: inclusive case review

Last updated: 4 Oct 20268 min read

project

Build the reviewer path for case 47, from a queue link to an archive decision and back. The task must work with the keyboard, at 200 percent zoom, with reduced motion, and after a server rejection. Start with native links and buttons. Name each repeated action so its target is clear. Use a modal confirmation only if the consequence warrants interruption; after success, focus should land on a stable queue target. A rejected archive stays recoverable. Do not count a passing initial screenshot as proof that the whole path works.

Build contract

Create a queue with at least 47 distinct records, including long titles, and give each navigation and action control a useful name.
Implement an archive confirmation with a named dialog, safe initial focus, cancellation, server-error handling, and a focus destination after the row disappears.
Add a case-note form that retains good input and maps validation, conflict, permission, and transport failures to different recovery copy.

Implementation checkpoint

<button type="button" id="archive-case-47" aria-label="Archive case 47">Archive</button>
<dialog id="archive-dialog" aria-labelledby="archive-title"><h2 id="archive-title">Archive case 47?</h2><button id="cancel-archive">Cancel</button><button id="confirm-archive">Archive case</button></dialog>

Cost and boundaries

Native controls reduce custom keyboard code, but the full journey still has focus and error branches to test. A real screen-reader pass costs time; it is more informative than relying only on an automated name check. Long labels and zoom may increase page height. That is acceptable if focus, reading order, and actions stay visible. The archive request needs server authorization and an idempotent result if the user activates confirmation twice.

Failure drill

First, open the dialog from a queue row that will be removed. Confirm the archive, then inspect whether focus vanishes with the row. Next, force the server to reject the archive; the dialog should stay open with an actionable message, and the record should remain. Finally, zoom until the viewport narrows and try the same sequence with a long translated title. The implementation is incomplete if any required control leaves the viewport or the error is expressed only by color.

Acceptance checks

Complete the journey using only Tab, Shift-Tab, Enter, and Escape.
Archive one record, then check the focus destination and announced result.
Inject a server conflict and a network timeout; verify distinct recovery paths.
Repeat at 200 percent zoom with reduced motion and a long title.

Common Mistakes

Testing a button label but not the result after activation.
Moving focus back to a row deleted by successful archive.
Calling a viewport responsive while its confirmation dialog clips.

web-tech

web-development