T9.6 - C2: the 390px pass, measured on all seven pages

The deliberate mobile pass the original proposal never had. Driven page by
page at 390px with mobile emulation (the media queries under test actually
fire) by NEW tests/mobile_check.py, 24/24:

- no page scrolls sideways - all seven (the creator joined at T9.5 when
  BL-001 died)
- no visible control is clipped past the viewport (the probe learned
  frame_check's two lessons: an off-canvas drawer is PARKED, not clipped,
  and a row inside an overflow-x container is scrollable)
- tap targets: the shared coarse-pointer block in wp-chrome.css puts every
  button, input, select, nav link and appbar control at a 44px minimum on
  phone widths and coarse pointers; checkboxes, radios and help-tip badges
  get the 24px WCAG floor with spacing doing the rest. Field View - the
  gloved-hands surface - measures 44px on EVERY control. Inline text links
  are exempt per WCAG 2.5.8's own exception. Even the deliberately
  unobtrusive dev toggle grew to the floor: subtle by opacity, not by size.
- CR-007 attachments offline at 390px and T8.5 requests at 390px were already
  pinned by files_check and mreq_check; this pass cites rather than repeats.

After-screenshots for all seven pages at 390px are committed in
docs/reference/baseline/after-wave9, beside the wave 0 set, captured by the
same baseline_shots.py fixture.

Verification (each probe run alone): NEW tests/mobile_check.py 24/24.
Regressions: form_structure_check 50/51 (BL-022's standing question),
files_check 36/36.

Items: C2

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-19 13:47:17 -07:00
parent 0dcea8d725
commit 6201fcfb4a
12 changed files with 207 additions and 1 deletions

View File

@@ -213,3 +213,9 @@ select.role-select:disabled{ color:var(--cds-text-disabled); border-color:var(--
@media (max-width:620px){
.urow input, .urow select, .urow button{ flex:1 1 100%; }
}
/* C2 / T9.6: the console header links are standalone targets, not inline text,
so they meet the touch floor at coarse pointers / phone widths. */
@media (max-width: 500px), (pointer: coarse) {
a.home { min-height: 44px; display: inline-flex; align-items: center; }
}

View File

@@ -319,3 +319,20 @@
the gate panel is what does the explaining. */
.nav-tab[aria-disabled="true"] { opacity: .55; cursor: default; }
.nav-tab[aria-disabled="true"]:hover { background: none; color: var(--text-light); }
/* C2 / T9.6: touch sizing. At phone widths (and any coarse pointer) every
control meets the 44px bar the field surfaces are held to; checkboxes,
radios and the help-tip badge get the 24px WCAG floor with spacing doing
the rest. Shared here because every page loads this sheet - six copies of
this block is how the six pages drift apart again. */
@media (max-width: 500px), (pointer: coarse) {
button, .btn, .add-btn, .nav-btn, .header-button,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select, textarea { min-height: 44px; }
a.wp-appbar-link, .wp-sidenav-item, .nav-tab {
min-height: 44px; display: inline-flex; align-items: center; }
input[type="checkbox"], input[type="radio"] { min-width: 24px; min-height: 24px; }
.help-tip { min-width: 24px; min-height: 24px; }
.wp-navbtn, .ui-help-fab, .wp-sidenav-close { min-width: 44px; }
.wp-appbar-brand { min-height: 44px; display: inline-flex; align-items: center; }
}

View File

@@ -689,7 +689,9 @@
/* Dev mode (comment 7) */
.logo-wrap { position:relative; display:flex; align-items:center; }
.dev-toggle { position:absolute; left:2px; bottom:-9px; width:18px; height:7px; padding:0; border:none;
/* C2/T9.6: a deliberately unobtrusive dev switch is still a control - it
meets the 24px floor and earns its subtlety with opacity, not size. */
.dev-toggle { position:absolute; left:2px; bottom:-12px; width:24px; height:24px; padding:0; border:none;
background:var(--text-dim); opacity:0.10; border-radius:3px; cursor:pointer; }
.dev-toggle:hover { opacity:0.35; }
.dev-banner { background:var(--wp-dev-bg); color:var(--wp-dev-fg); font-size:12.5px; font-weight:700; text-align:center; padding:7px 14px; letter-spacing:.3px; }