Make the page usable: board beside the text, and Return takes the offer - #24
Merged
Merged
Conversation
Three things found by using the hosted app rather than by testing it. Pressing Return on a finished drill threw away whatever the result card was offering. The keyboard path went straight to "start this drill again" instead of through the same handler the button uses, so a card reading "Repair drill · T" restarted the lesson when you pressed a key. That is the same failure as a button that lies, reached by a different route, and it silently discarded the repair every time. The board sat 770 pixels above the text being typed, so a learner could see where the next key was or what they were meant to type, but never both. The readout naming the key and the diagram showing it are meant to reinforce each other and could not. They now sit side by side above 62rem and stack below it, in the order they appear in the markup, so what the eye follows and what Tab follows still agree. The sprint, the ladder, the statistics and the saving controls were somewhere down a five-thousand-pixel page with nothing to say they existed. There is a section navigation now, revealed once a layout is loaded and skippable by the link that already existed; the ladder is a grid of cards instead of thirteen full-width rows; choosing a layout and reading what was found in it share one band instead of two; and the instructions stand down once they have been followed. The page is 3786 pixels where it was 5366, and the content uses the window instead of 42 per cent of it. New tests guard all of it, including at 380 pixels where the columns stack. The keyboard-only journey is updated for the navigation: it now takes the skip link, which is what the skip link is for. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Three things found by using the hosted app rather than by testing it.
1. Return threw away the offer — a real bug
Pressing Return on a finished drill went straight to
startDrill()instead of through the same handler the button uses. So a result card reading "Repair drill · T" restarted the lesson when you pressed a key, silently discarding the repair every time.That is the same failure as a button that lies, reached by a different route. Now routed through
onContinue(), with an end-to-end guard that the keyboard does what the button says.Verified by hand: fumbled a key, result offered
Repair drill · T, pressed Return, and gotfast nta at tan data idti sit ditst fast fast— the repair drill, not the lesson again.2. The board and the text were never on screen together
They were 770 pixels apart. The readout names the next key in words and the diagram shows where it is; they are meant to reinforce each other and could not, because you could only ever see one.
Side by side above 62rem, stacked below it — and in markup order, board then drill, left then right, so what the eye follows and what Tab follows never disagree.
3. Everything below the drill was undiscoverable
Tests
New
tests/e2e/layout.spec.tsguards all of it, including at 380px where the columns stack, and asserts the page cannot grow back into an endless scroll.The keyboard-only journey is updated for the navigation: it now takes the skip link, which is what the skip link is for, rather than tabbing through five nav items.
566 unit/functional/regression · 158 end-to-end · axe clean in both themes.
🤖 Generated with Claude Code