A Keyboard Focus Return Test After Closing a Product Image Viewer
A product image viewer that opens as a modal is easy to operate with a mouse. For someone using a keyboard, the moment of closing matters: if focus drops to the top of the page, they lose their place among dozens of thumbnails. This article proposes, conditionally, a specification for focus return and a test card to check it.
The behaviour to specify
If adopted, the rule could be: when the viewer closes by any method, keyboard focus returns to the element that opened it. The viewer should also move focus inside on opening, keep Tab inside while open, and close with the Escape key. Wording for the team to confirm: "Closing the viewer returns focus to the control that opened it, unless that control no longer exists."
Branching choices
The opener may not survive. If the gallery re-renders, or the opening thumbnail was removed, the fallback should be named in advance: for example the gallery container or the main product heading. If the viewer lets users move between images, the team must decide whether closing returns focus to the thumbnail that opened it or to the thumbnail of the image last viewed. Either can be defensible, but it should be one rule applied consistently, and written down. If the viewer opens from several kinds of triggers, such as a thumbnail, a main image, and a zoom button, each needs its own return target.
Primary artifact: keyboard-only entry-exit test card
The tester uses only the keyboard. No mouse.
| Step | Action | Expected result |
|---|---|---|
| 1 | Tab to the third thumbnail | Visible focus indicator on it |
| 2 | Press Enter | Viewer opens, focus moves inside |
| 3 | Press Tab repeatedly | Focus cycles within the viewer, never reaches the page behind |
| 4 | Press Shift+Tab from the first control | Focus wraps to the last control inside |
| 5 | Press Escape | Viewer closes |
| 6 | Check focus | Focus is on the third thumbnail, visibly |
| 7 | Press Tab once | Focus moves to the fourth thumbnail |
| 8 | Repeat with the close button, activated by Enter and by Space | Same outcome as step 6 |
| 9 | Open, navigate to another image, close | Focus lands on the agreed target |
A further row could cover the case where the opener has been removed, expecting focus on the named fallback.
Hypothetical worked example
Imagine a page with eight thumbnails. A tester opens the fifth, moves to the seventh image inside the viewer, and presses Escape. Under the rule "return to the opener", focus should land on the fifth thumbnail. If the team chose "return to the last viewed", it should land on the seventh. If instead focus lands at the top of the page, the test fails, because the next Tab would start at the page header.
Stop conditions
Stop and fix before release if focus is ever lost to the document body after closing, if focus can reach elements behind the open viewer, if Escape fails to close, or if focus lands on an element that is hidden. A failure at any one of these steps is enough to stop, even when the remaining steps pass.
Acceptance checks
- All steps pass using the keyboard alone, in at least two browsers the team supports.
- The focus indicator is visible on the return target.
- The test passes after opening the viewer twice in a row.
- The fallback case has been exercised deliberately, not assumed.
- The tester writes down the element that held focus after each close, so the result is evidence, not impression.
This card tests focus handling only. It does not replace testing with assistive technology, which would need its own plan.