n.siegfried/Project-SDE-WP-Suite
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

S8 fix - help centre glossary classes leaked onto the Issue (hold) status pill

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Nick Siegfried
2026-08-20 15:59:30 -07:00
parent 8663d81af3
commit fb89b1f6e1
3 changed files with 16 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/reference/file-map.md
View File

@@ -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

12
html/help.js
View File

@@ -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; }

7
tests/helptip_check.py
View File

@@ -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"(?<!\.ui-help-pill)\.pill-[a-z]+(?=\s*\{)", help_src)
chk("help.js pill classes are scoped to .ui-help-pill (no bare .pill-*)",
not bare, bare[:4])
chk("the audit document exists with the per-page table",
"## Per-page results" in io.open(os.path.join(ROOT, "docs", "reference",
"accessibility-audit.md"), encoding="utf-8").read())