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:
@@ -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; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user