From fb89b1f6e1645db8dc8e41f5d4cda6f1cbf331f5 Mon Sep 17 00:00:00 2001 From: "n.siegfried" Date: Thu, 20 Aug 2026 15:59:30 -0700 Subject: [PATCH] S8 fix - help centre glossary classes leaked onto the Issue (hold) status pill help.js injects its stylesheet on every page, and its glossary pills used bare class selectors (.pill-draft ... .pill-hold). The creator's Issue (hold) status radio also carries the class pill-hold, so the injected rule painted that radio error-red at ALL times - selected or not. Reported by Nick ('why is the issues (hold) button illuminated at all times'), 2026-08-20. Pre-existing, not from this branch: help.js has had the bare selectors since the login-portal commit, and the creator's pill-hold class predates the R2 branch. Every glossary rule is now scoped to .ui-help-pill.pill-*, which the glossary markup already carries. Verified live: unselected, the hold pill's computed style now matches its neighbours exactly; selected, it is still the red fill; the glossary's own Hold pill keeps its tint. helptip_check gains the pin (13 -> 14): no bare .pill-* selector in help.js, ever again. Item: S8 (the help component's app-wide surface). Co-Authored-By: Claude Fable 5 --- docs/reference/file-map.md | 2 +- html/help.js | 12 ++++++++---- tests/helptip_check.py | 7 +++++++ 3 files changed, 16 insertions(+), 5 deletions(-) diff --git a/docs/reference/file-map.md b/docs/reference/file-map.md index b368a39..742a75f 100644 --- a/docs/reference/file-map.md +++ b/docs/reference/file-map.md @@ -302,7 +302,7 @@ Wave 9 adds these: python tests/export_check.py # CR-008/CR-017 - export walk + hours guard 20 checks python tests/sample_check.py # S7 - one sample affordance, confirmed+fenced 10 checks python tests/icon_check.py # S6 - one icon system, no emoji, mapped 5 checks -python tests/helptip_check.py # C1/S8 - tips by keyboard+touch, audit greps 13 checks +python tests/helptip_check.py # C1/S8 - tips by keyboard+touch, audit greps 14 checks python tests/mobile_check.py # C2 - all 7 pages at 390px, targets + fit 24 checks python tests/archived_check.py # D7 - archived projects, admins only, frozen 15 checks python tests/color_check.py # C4 - zero literals outside theme-light 5 checks diff --git a/html/help.js b/html/help.js index 28ddb82..e96fcd3 100644 --- a/html/help.js +++ b/html/help.js @@ -161,10 +161,14 @@ .ui-help-content th, .ui-help-content td{ border:1px solid var(--cds-border-subtle); padding:6px 9px; text-align:left; vertical-align:top; } .ui-help-content th{ background:var(--cds-layer-accent); font-weight:600; } .ui-help-pill{ display:inline-block; padding:1px 8px; border-radius:11px; font-size:11px; font-weight:600; } - .pill-draft{ background:var(--cds-layer-accent); color:var(--cds-text-secondary); } .pill-sched{ background:var(--cds-highlight); color:var(--cds-link-primary-hover); } - .pill-prog{ background:var(--wp-status-warning-bg); color:var(--wp-status-warning-text); } .pill-issued{ background:var(--wp-status-success-bg); color:var(--wp-status-success-text); } - .pill-qc{ background:var(--cds-highlight); color:var(--cds-link-primary); } .pill-closed{ background:var(--cds-layer-accent); color:var(--cds-text-secondary); } - .pill-hold{ background:var(--wp-status-error-bg); color:var(--wp-status-error-text); } + /* Scoped to .ui-help-pill: this block is injected on EVERY page, and the + creator's Issue (hold) status radio also carries the class pill-hold - the + bare selector painted that radio error-red at all times, selected or not + (found by Nick 2026-08-20; the collision dates to the login-portal era). */ + .ui-help-pill.pill-draft{ background:var(--cds-layer-accent); color:var(--cds-text-secondary); } .ui-help-pill.pill-sched{ background:var(--cds-highlight); color:var(--cds-link-primary-hover); } + .ui-help-pill.pill-prog{ background:var(--wp-status-warning-bg); color:var(--wp-status-warning-text); } .ui-help-pill.pill-issued{ background:var(--wp-status-success-bg); color:var(--wp-status-success-text); } + .ui-help-pill.pill-qc{ background:var(--cds-highlight); color:var(--cds-link-primary); } .ui-help-pill.pill-closed{ background:var(--cds-layer-accent); color:var(--cds-text-secondary); } + .ui-help-pill.pill-hold{ background:var(--wp-status-error-bg); color:var(--wp-status-error-text); } .ui-help-callout{ background:var(--cds-highlight); border-left:3px solid var(--cds-link-primary); padding:10px 14px; border-radius:0; font-size:13px; line-height:1.55; margin:10px 0; } .ui-help-noresult{ display:none; color:var(--cds-text-secondary); font-size:14px; padding:10px 2px; } diff --git a/tests/helptip_check.py b/tests/helptip_check.py index 08ce759..d1d5949 100644 --- a/tests/helptip_check.py +++ b/tests/helptip_check.py @@ -78,6 +78,13 @@ def main(): outline_bad.append(name) chk("div/span click handlers app-wide: 0 (baseline 12/2)", divspan == 0, divspan) chk("outline:none without a replacement: 0", not outline_bad, outline_bad[:4]) + # The glossary pill classes are injected app-wide and MUST stay scoped: + # a bare .pill-hold painted the creator's Issue (hold) status radio + # error-red at all times (found 2026-08-20). + help_src = io.open(os.path.join(HTML, "help.js"), encoding="utf-8").read() + bare = re.findall(r"(?