diff --git a/docs/waves/backlog.md b/docs/waves/backlog.md index ccd7638..ffc24a7 100644 --- a/docs/waves/backlog.md +++ b/docs/waves/backlog.md @@ -236,3 +236,32 @@ deliberately deferred. covers what the diff was being asked to prove, and covers it better. - **Suggested wave or follow-up:** wave 9, alongside `C2`. Either freeze the clock in the fixture or exclude the live regions from capture — otherwise every later wave re-learns this. + +### BL-013 — The creator's inputs have no visible focus ring at all + +- **Found during:** T3.4 +- **Where:** `html/wp-creation-styles.css:168` (`outline: none` on every input, textarea and + select) and `:171` (`:focus` replaces it with `box-shadow: 0 0 0 3px var(--accent-dim)`) +- **What:** the same defect `BL-002` recorded in the wizard sheet, in the sheet next door. + Measured in the browser with focus emulation on: a focused creator input reports + `outline-style: none`, and its only focus cue is a 3px `#edf5ff` glow against a `#ffffff` + field — a 1.05:1 edge. `.wp-nav-search:focus` (`:765`) is the same. That is `CLAUDE.md`'s + "outline: none without a replacement of at least equal visibility", on the page with the + most form controls in the app. +- **Why not now:** `T3.4`'s files are the SOP wizard stylesheet, and `BL-002` scoped the + three sites it folded in to that sheet. The creator is rebuilt at `T7.1`/`T7.2`. +- **Suggested wave or follow-up:** `T7.2`, or `T9.5` with the `C1` audit if it survives the + rebuild. The fix is the ring `T3.4` established: `outline: 2px solid var(--cds-focus); + outline-offset: -2px`, which `console.css`, `wp-chrome.css` and now the wizard all use. + +### BL-014 — Four controls fall back to the browser's default focus ring + +- **Found during:** T3.4 +- **Where:** `html/index.html` `.proj-row select`, `.proj-form-grid input`, `.link-like`; + `html/field.html` `.fld-search` +- **What:** these have no focus rule, so they get the UA default (`1px auto #111`). Visible, + so not a `C1` violation — but it is a fourth focus idiom beside the app's 2px `--cds-focus` + inset ring, and it does not follow the accent if the accent ever changes. +- **Why not now:** adding rings to the launcher and field view is outside `T3.4`, whose files + are the wizard stylesheet, and both surfaces are touched by later waves anyway. +- **Suggested wave or follow-up:** `T9.5`, with the `C1` audit. diff --git a/html/work-package-suite-styles.css b/html/work-package-suite-styles.css index 3f5a07a..0c41bde 100644 --- a/html/work-package-suite-styles.css +++ b/html/work-package-suite-styles.css @@ -339,15 +339,16 @@ body.embed-full { overflow: hidden; } color: var(--text); } -/* INTERIM (F5/A3). T3.4 removes the duplicate token underneath this; the fix here - is only to stop editable fields looking disabled. - These were filled with var(--bg) — this sheet's PAGE BACKGROUND, #f4f4f4 — on a - #e0e0e0 border, so an empty required field was indistinguishable from a locked - one and users did not type in them. The wizard redeclares its own tokens and so - never saw --cds-field: #ffffff, which theme-light.css has been supplying to this - page all along. Consume that instead of the local override, and take the same - --border-strong the creator's inputs use, so a field looks like a field in both - places. No new value is introduced here. */ +/* An editable field is white on --border-strong, which is what an editable field + is on every other page in the suite. It used to be filled with var(--bg) — this + sheet's PAGE BACKGROUND, #f4f4f4 — so an empty required field was indistinguishable + from a locked one and people did not type in them (F5/A3). + + The cause was the wizard declaring its own token set and therefore never seeing + --cds-field, which theme-light.css had been supplying to this page all along. + T1.5 reached past the local tokens with a fallback; T3.2 removed the local tokens + entirely, so the fallback is now dead code and the canonical token is simply + consumed. No field-specific colour is declared on this page. */ .field input, .field select, .field textarea { @@ -357,33 +358,46 @@ body.embed-full { overflow: hidden; } font-size: 14px; font-family: inherit; color: var(--text); - background: var(--cds-field, var(--bg-card)); + background: var(--cds-field); transition: border-color 0.2s; } -/* Now that editable fields are white, genuinely locked ones need to say so — there - was no disabled rule at all, so they would have gone white too and the signal - would have inverted rather than been fixed. --cds-field-02 is the theme's own - secondary field surface, and matches .locked-field in the creator. - The border is deliberately left alone: the same --border-strong on both states - is what makes a field read as a field, and the fill is what carries locked vs +/* Editable fields being white means genuinely locked ones have to say so, or the + signal inverts rather than being fixed. --cds-field-02 is the theme's own + secondary field surface and matches .locked-field in the creator. + The border is deliberately the same on both states: identical --border-strong is + what makes a field read as a field, and the fill is what carries locked versus editable. Verified as #ffffff vs #f4f4f4 against an identical border. */ .field input:disabled, .field select:disabled, .field textarea:disabled, .field input[readonly], .field textarea[readonly] { - background: var(--cds-field-02, var(--bg)); + background: var(--cds-field-02); color: var(--text-light); cursor: not-allowed; } +/* One focus ring for every control on this page (BL-002). + All three focus rules here removed the outline. Two replaced it with a 3px + var(--primary-light) glow — #edf5ff against a #ffffff field, which is a 1.05:1 + edge: a faint halo on the card, invisible on the field itself. The third, + .seq-step input.seq-label, removed the outline with no replacement at all. + CLAUDE.md allows outline:none only with a replacement of at least equal + visibility, so two were marginal and one was a straight violation. + + This is Carbon's ring and the one console.css:69 and wp-chrome.css:206 already + draw — 2px of --cds-focus inset over the control's own edge — so it is the app's + existing idiom rather than a fourth. border-color stays as a second cue and as + the fallback if outline is ever suppressed. */ .field input:focus, .field select:focus, -.field textarea:focus { - outline: none; +.field textarea:focus, +.user-pick:focus, +.seq-step input.seq-label:focus { + outline: 2px solid var(--cds-focus); + outline-offset: -2px; border-color: var(--primary); - box-shadow: 0 0 0 3px var(--primary-light); } /* Helper text under a field, by either of the two names the markup uses: @@ -404,12 +418,16 @@ body.embed-full { overflow: hidden; } } .field-hint strong { color: var(--text-light); } -/* The sign-off name pickers sit outside .field, so they got no form styling at all. */ +/* The sign-off name pickers sit outside .field, so they got no form styling at all. + They carried the F5/A3 defect too, and were missed because the review counted + inputs inside .field: --bg fill on a --border hairline is the grey-on-grey that + made empty required fields read as locked. These are enabled selects and now look + like every other enabled control in the suite — --cds-field on --border-strong. + Focus is the shared ring above. */ .user-pick { - padding: 0.75rem; border: 1px solid var(--border); border-radius: 0; - font-size: 14px; font-family: inherit; color: var(--text); background: var(--bg); + padding: 0.75rem; border: 1px solid var(--border-strong); border-radius: 0; + font-size: 14px; font-family: inherit; color: var(--text); background: var(--cds-field); } -.user-pick:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } /* ROLES */ .required-roles { @@ -563,7 +581,9 @@ body.embed-full { overflow: hidden; } .seq-step input.seq-label { border: 1px solid transparent; background: transparent; font-size: 14px; padding: 5px 8px; color: var(--text); flex: 1; border-radius: 4px; } -.seq-step input.seq-label:focus { background: var(--bg); border-color: var(--primary); outline: none; } +/* Fill only — the ring itself is the shared rule above, which this used to opt out + of entirely with a bare `outline: none`. */ +.seq-step input.seq-label:focus { background: var(--bg); } .seq-del { background: var(--danger); color: var(--cds-text-on-color); border: none; border-radius: 4px; width: 28px; height: 28px; cursor: pointer; font-weight: 600; flex-shrink: 0;