T5.1 - A4/S9: a vertical stepper, ten real buttons, states in words
The step rail was ten div elements carrying onclick inside a horizontal
scroller. Not in the tab order, not operable by keyboard, and silent about
progress - the only thing on the page that said where you were was a "1 / 10"
pill in the app bar, detached from the control it described.
The rail is now a vertical column beside the form: ten <button> elements in an
<ol> inside a named <nav>, with arrow keys, Home and End on top of the Enter and
Space a button gives for free. All ten stay in the tab order; a roving tabindex
would have satisfied "arrow keys" by breaking "tab", which the done-when asks
for both of.
Four states, each carrying a word and a marker shape as well as a colour (C1):
Complete (green disc, tick), Current step (blue disc, aria-current="step"),
Locked (dashed outline) and a plain default. Locked steps keep aria-disabled
rather than disabled, so a keyboard user can reach one and be told what is in
the way instead of finding a control that has vanished from the tab order.
Reachability is the guard's own rule, deliberately not a stricter one: you may
leave the step you are on once its required fields are filled. The tempting rule
- lock everything after the first unmet gate anywhere - is not what
validateStep() enforces, and a padlock the Next button walks straight past is
the drift this change exists to remove. validateStep() and the rail now read one
STEP_GATES table, so they cannot disagree; T5.8 widens that table rather than
editing four functions.
Clicking a step you cannot reach announces why through a role="alert" region and
puts the cursor in the field that is missing. Saying "no" and leaving you where
you were, with no idea which of five inputs was empty, is what the dialog did.
Below 900px the rail collapses to a disclosure naming the step you are on -
ten vertical rows above the fields is most of a 390px screen before you reach an
input. 44px tap targets, since Field View is the gloved-hands surface.
Also: going backwards is no longer gated. previousStep() never validated, so a
rail that did would have trapped you on an incomplete step.
html/work-package-suite.html rail markup, counter removed
html/work-package-suite-styles.css #tool-sop grid, .step-rail*, 899px collapse
html/work-package-suite-app.js STEP_GATES, renderStepRail, keyboard, watcher
tests/stepper_check.py new - 70 checks
Done when
[x] all 10 steps are <button> elements
[x] keyboard: tab, arrow keys, Home/End, Enter and Space
[x] aria-current on the current step, exactly one
[x] complete / current / unavailable told apart without colour
[x] the "1 / 10" counter is gone - no .step-counter, no N/10 in the app bar
[x] app-wide <div onclick> 12 -> 2, down exactly 10
Verified one at a time
stepper_check 70/70 new
browser_check 71/71
url_state 23/23
a11y 22/22 sop now rings 37 focusable elements, all >= 3:1
autosave 34/34
aggregates 16/16
f_items F1-F5 FIXED, F6 REPRODUCES (T7.2)
baseline_shots 14 shots; only the sop pair changed. The beforeunload log on
sop@1440 and creator@1440 is present at HEAD too - captured
both sides to check rather than assume.
No colour literal was added: all five page sheets and all seven inline <style>
blocks still hold zero. New spacing consumes --wp-s*; three raw font sizes were
added and three removed, so BL-010 is unchanged in kind.
Raised, not fixed
BL-016 Back to a URL with no `step` leaves the wizard where it was. T4.2's
popstate handler parses NaN and ignores it; its own probe never took
that branch. stepper_check pins the current behaviour by name so the
fix has a test waiting.
BL-017 The native-dialog baseline counts the word `alert(` in comments. Four
comments written here - all of them about removing a dialog - moved
the number from 80 to 82 while two real calls were being deleted. They
were reworded; the metric still needs a comment-stripped variant, which
T5.8 owns.
Question for the PR, per CLAUDE.md: BL-015 leaves the creator's .step-tab
uppercase as the last forced-uppercase interactive text in the suite, on the
grounds that A5 scopes sentence case to buttons and field labels. The wizard's
rail is now buttons, so its labels are sentence case ("Sign-offs", "WP types").
The two are consistent by rule and inconsistent on screen until T7.x.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -220,6 +220,18 @@ python tests/autosave_check.py # S2/B5 — does unsaved work survive?
|
||||
python tests/a11y_check.py # S10/S11/S12 — announce, legible, focus 22 checks
|
||||
```
|
||||
|
||||
Wave 5 added one more, for the same reason:
|
||||
|
||||
```bash
|
||||
python tests/stepper_check.py # A4/S9 — ten real buttons, keyboard operable 70 checks
|
||||
```
|
||||
|
||||
It drives the rail with **real** key events over `Input.dispatchKeyEvent` rather than
|
||||
`page.key()`, which dispatches a synthetic `KeyboardEvent` on `document`. That event
|
||||
never reaches a listener bound to the rail and never triggers a button's native
|
||||
Enter/Space activation, so a rail with no keyboard support at all would have reported a
|
||||
clean pass — the same class of false green as `a11y_check.py`'s focus emulation.
|
||||
|
||||
Each tests what was *broken* rather than what is easy to assert. `aggregates_check.py` poisons
|
||||
localStorage and demands the dashboard still report the server's total; a test that only
|
||||
checked the totals were correct would have passed before `B4` was built. `a11y_check.py` runs
|
||||
@@ -239,9 +251,23 @@ one.
|
||||
| 8 | `pushState` | 0 | **2** (6 call sites via `wp-url.js`) | `T4.2` |
|
||||
| — | `outline: none` in stylesheets | 6 | **1**, with its replacement one rule above | `T3.4`, `T4.7` |
|
||||
| — | helper-text contrast, worst case | 3.01:1 | **4.56:1** | `T4.6` |
|
||||
| 3 | `<div onclick>` | 12 | **2** | `T5.1` |
|
||||
| 1 | native dialogs app-wide | 79 | **78** | `T5.1` (2 removed), wave 4 (1 added) |
|
||||
|
||||
Metrics 1–4 and 6 (native dialogs, `<div onclick>`, `.help-tip` badges) are wave 9's to move
|
||||
and are unchanged.
|
||||
Metrics 2, 4 and 6 (creator dialogs, `<span onclick>`, `.help-tip` badges) are wave 9's to
|
||||
move and are unchanged.
|
||||
|
||||
**Metric 3 after `T5.1`:** the two survivors are `wp-creation-index.html:383`
|
||||
(`.cmt-overlay`) and `work-package-suite-app.js:1046` (the constraint-library row). Both
|
||||
are wave 7 / wave 9 work. Nothing in the SOP wizard's markup carries a click handler on a
|
||||
non-interactive element any more.
|
||||
|
||||
**Metric 1 is noisier than it looks** — the command matches `alert(` inside a *comment* as
|
||||
readily as inside code, and waves 3 and 4 left several comments explaining dialogs they
|
||||
were removing. That is why the figure was 80 before `T5.1` rather than the 79 wave 0
|
||||
recorded. `T5.1` removed two real calls (`validateStep`'s three conditions collapsed to
|
||||
one) and reworded its own comments so they do not inflate it. Logged as **BL-017**;
|
||||
`T5.8` records a comment-stripped figure alongside the raw one.
|
||||
|
||||
`server/smoketest.py` is the one that is **not** self-contained: it drives a server you point
|
||||
it at and aborts unless `WP_SMOKE_USER` and `WP_SMOKE_PASSWORD` are set, because every route
|
||||
|
||||
Reference in New Issue
Block a user