diff --git a/public/packets.js b/public/packets.js
index 5c6c0ebc..89637607 100644
--- a/public/packets.js
+++ b/public/packets.js
@@ -3813,7 +3813,7 @@
if (newHops.length) await resolveHops(newHops);
const container = document.createElement('div');
container.style.cssText = 'max-width:800px;margin:0 auto;padding:20px';
- container.innerHTML = `
`;
+ container.innerHTML = `
`;
const detail = document.createElement('div');
container.appendChild(detail);
await renderDetail(detail, data);
diff --git a/public/roles.js b/public/roles.js
index 940412f0..57c7f303 100644
--- a/public/roles.js
+++ b/public/roles.js
@@ -234,6 +234,51 @@
el.textContent = css;
};
+ // #1668 M5 β public helper for callers that render a badge INLINE
+ // (analytics.js / nodes.js role badges where the color isn't known at
+ // CSS-author time, e.g. role colors come from server config). Returns
+ // "background:#xxx;color:#xxx" with AA-safe pairing β same algorithm
+ // as syncBadgeColors above. Avoids the legacy 20%-alpha-on-tinted-bg
+ // pattern that fails AA (M5 axe gate caught 90+ instances).
+ window.aaBadgeStyle = function(color) {
+ if (!color) return '';
+ function hexToRgb(hex) {
+ var h = String(hex).replace('#','');
+ if (h.length !== 6) return [128,128,128];
+ return [parseInt(h.slice(0,2),16), parseInt(h.slice(2,4),16), parseInt(h.slice(4,6),16)];
+ }
+ function rgbToHex(rgb) {
+ return '#' + rgb.map(function(v){ var s = Math.max(0,Math.min(255,Math.round(v))).toString(16); return s.length===1?'0'+s:s; }).join('');
+ }
+ function relLum(rgb) {
+ var lin = function(v){ var s=v/255; return s<=0.03928 ? s/12.92 : Math.pow((s+0.055)/1.055, 2.4); };
+ return 0.2126*lin(rgb[0]) + 0.7152*lin(rgb[1]) + 0.0722*lin(rgb[2]);
+ }
+ function contrast(a, b) {
+ var l1 = relLum(a), l2 = relLum(b);
+ var hi = l1>l2?l1:l2, lo = l1>l2?l2:l1;
+ return (hi+0.05) / (lo+0.05);
+ }
+ function readableFg(rgb) {
+ var lum = (0.299*rgb[0] + 0.587*rgb[1] + 0.114*rgb[2]) / 255;
+ return lum > 0.55 ? [26,26,46] : [255,255,255];
+ }
+ function adjustForAA(bg, fg) {
+ var c = contrast(fg, bg);
+ if (c >= 4.5) return bg;
+ var darkening = fg[0] > 128;
+ var out = bg.slice();
+ for (var i=0; i<12 && contrast(fg, out) < 4.5; i++) {
+ out = out.map(function(v){ return darkening ? v*0.92 : v + (255-v)*0.08; });
+ }
+ return out.map(function(v){ return Math.round(v); });
+ }
+ var bg = hexToRgb(color);
+ var fg = readableFg(bg);
+ var adj = adjustForAA(bg, fg);
+ return 'background:' + rgbToHex(adj) + ';color:rgb(' + fg.join(',') + ')';
+ };
+
// Auto-sync on load
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', window.syncBadgeColors);
@@ -754,7 +799,7 @@
.replace(/\*\*(.+?)\*\*/g, '
$1')
.replace(/\*(.+?)\*/g, '
$1')
.replace(/`(.+?)`/g, '
$1')
- .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '
$1')
+ .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '
$1')
.replace(/^- (.+)/gm, '
$1')
.replace(/\n/g, '
');
// Wrap consecutive
in
diff --git a/public/style.css b/public/style.css
index 1f5e381b..c8afa196 100644
--- a/public/style.css
+++ b/public/style.css
@@ -223,6 +223,26 @@
.nav-link.active background, .fGroup.active. */
--accent-strong: var(--palette-blue-600);
--text-on-accent: var(--palette-gray-50);
+ /* #1668 M5 β accessible link/text color. The legacy --accent (#4a9eff)
+ used for text-on-light backgrounds was 2.52:1 on white (BLOCKER per
+ M5 axe gate, 219 hits across .analytics-link / .sort-active / .ch-*).
+ Dark theme override below bumps to palette-blue-400 (#60a5fa) so
+ links stay readable on surface-0 (#0f0f23 β 8.4:1, AA pass).
+ Use --link-color for any "text rendered ON the page surface that
+ should look like a link / interactive accent" β NOT for backgrounds.
+ Backgrounds carrying white text continue to use --accent-strong. */
+ /* #1668 M5 β accessible semantic status colors. The legacy fallbacks
+ baked into JS (var(--success, #22c55e)) used the bright palette-500
+ hues which fail AA against white surfaces (#22c55e/white = 2.27:1,
+ #ef4444/white = 3.76:1). New theme-aware tokens use palette-700 on
+ light surfaces (5.0-6.5:1 vs white) and palette-400/500 on dark
+ (6+:1 vs surface-0/1). All callers should now read --success /
+ --warning / --danger WITHOUT a hex fallback (kept as legacy support
+ only). */
+ --success: var(--palette-green-700, #15803d);
+ --warning: #b45309;
+ --danger: var(--palette-red-600, #dc2626);
+ --link-color: var(--palette-blue-600);
--accent-bg: rgba(59, 130, 246, 0.12);
--accent-border: rgba(59, 130, 246, 0.25);
--geo-filter-color: #3b82f6;
@@ -344,6 +364,14 @@
--status-amber-text: #fcd34d;
--path-inspector-speculative: #f59e0b;
--status-info: #60a5fa;
+ /* #1668 M5 β bump link text up two stops on dark surfaces (4a9eff
+ was OK but borderline on card-bg; #60a5fa = palette-blue-400 β
+ 7.8:1 on surface-0, 5.4:1 on card-bg, AA pass either way). */
+ --link-color: var(--palette-blue-400);
+ /* #1668 M5 β bright -400/-500 hues for AA against dark surfaces */
+ --success: var(--palette-green-400, #4ade80);
+ --warning: #fcd34d;
+ --danger: var(--palette-red-400, #f87171);
--surface-0: #0f0f23;
--surface-1: #1a1a2e;
--surface-2: #232340;
@@ -387,6 +415,11 @@
--status-amber-light: #422006;
--status-amber-text: #fcd34d;
--status-info: #60a5fa;
+ /* #1668 M5 β see :root[data-theme="dark"] media block above for rationale */
+ --link-color: var(--palette-blue-400);
+ --success: var(--palette-green-400, #4ade80);
+ --warning: #fcd34d;
+ --danger: var(--palette-red-400, #f87171);
--surface-0: #0f0f23;
--surface-1: #1a1a2e;
--surface-2: #232340;
@@ -799,7 +832,7 @@ img.brand-logo {
.dropdown-item {
display: block; padding: 8px 16px; color: var(--text-muted); text-decoration: none; font-size: 13px;
}
-.dropdown-item:hover { background: var(--accent); color: #fff; }
+.dropdown-item:hover { background: var(--accent-strong); color: var(--text-on-accent); }
.nav-right { display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; }
.nav-btn {
@@ -877,7 +910,7 @@ img.brand-logo {
font-family: var(--mono); margin-right: 4px; white-space: nowrap;
}
.nav-stats .stat-val { color: var(--nav-text); font-weight: 600; transition: color 0.3s ease; }
-.nav-stats .stat-val.updated { color: var(--accent); }
+.nav-stats .stat-val.updated { color: var(--link-color); }
/* === Layout === */
/* Default: body-scroll mode β content pushes beyond viewport, iOS status-bar
@@ -1002,7 +1035,7 @@ img.brand-logo {
position: sticky; top: 0; z-index: 1;
}
.data-table th.sortable { cursor: pointer; }
-.data-table th.sortable:hover { color: var(--accent); }
+.data-table th.sortable:hover { color: var(--link-color); }
.data-table td {
padding: 3px 6px; border-bottom: 1px solid var(--border);
vertical-align: middle; white-space: nowrap;
@@ -1209,8 +1242,13 @@ img.brand-logo {
.col-hidden-pill {
display: inline-block; margin-left: 6px;
padding: 1px 7px; border-radius: 999px;
- background: var(--accent-bg, rgba(96,165,250,0.18));
- color: var(--accent, #60a5fa);
+ /* #1668 M5 β was bg:--accent-bg (rgba blue tint) + color:--accent
+ = ~2.4:1 on light theme. Swap the tint for solid --accent-strong
+ (palette-blue-600 #2563eb) and use --text-on-accent (gray-50) so
+ the pill matches the M2 .skip-link / .filter-bar .btn.active
+ pattern: 4.83:1 AA both themes, no per-theme branching. */
+ background: var(--accent-strong);
+ color: var(--text-on-accent);
font-size: 12px; font-weight: var(--fw-bold); letter-spacing: .3px; /* #1668 M3 β was 10px */
cursor: pointer; user-select: none; vertical-align: middle;
border: 1px solid var(--accent, #60a5fa);
@@ -1384,7 +1422,7 @@ body.scroll-locked { overflow: hidden; }
.detail-meta dd { font-weight: 500; margin-bottom: 4px; }
/* #1281: πmap link inside detail-meta β UA-default blue is unreadable on EMOJI-OK-COMMENT
* dark backgrounds. Force theme-aware color via --accent. */
-.loc-map-link { color: var(--accent); font-size: 0.85em; text-decoration: none; }
+.loc-map-link { color: var(--link-color); font-size: 0.85em; text-decoration: none; }
.loc-map-link:hover { text-decoration: underline; }
.observation-current { background: var(--accent-bg, rgba(0,122,255,0.1)); font-weight: 600; }
.detail-obs-row:hover { background: var(--hover-bg, rgba(255,255,255,0.05)); }
@@ -1449,7 +1487,7 @@ body.scroll-locked { overflow: hidden; }
overflow: hidden;
vertical-align: middle;
}
-.path-hops .hop { color: var(--accent); line-height: 18px; }
+.path-hops .hop { color: var(--link-color); line-height: 18px; }
/* #1668 M2 / operator-flagged chip: was `color:#fff; background:var(--accent)`
= 2.75:1 on dark theme (BLOCKER). Now uses --accent-strong (#2563eb)
with --text-on-accent (gray-50) for 4.83:1 β WCAG AA body pass in
@@ -1494,10 +1532,10 @@ body.scroll-locked { overflow: hidden; }
resize: vertical; margin-bottom: 12px;
}
.modal .btn-primary {
- background: var(--accent); color: #fff; border: none; padding: 8px 20px;
+ background: var(--accent-strong); color: var(--text-on-accent); border: none; padding: 8px 20px;
border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600;
}
-.modal .btn-primary:hover { background: var(--accent-hover); }
+.modal .btn-primary:hover { background: var(--palette-blue-700, #1d4ed8); }
.modal .btn-close {
background: none; border: 1px solid var(--border); padding: 8px 16px;
border-radius: 6px; cursor: pointer; margin-left: 8px; font-size: 14px;
@@ -1742,7 +1780,7 @@ button.ch-item.selected { background: var(--selected-bg); }
button.ch-item:hover .ch-icon-btn { opacity: 1; }
.ch-icon-btn:hover, .ch-icon-btn:focus { opacity: 1 !important; outline: none; }
.ch-remove-btn:hover, .ch-remove-btn:focus { background: #8b3838; color: white; }
-.ch-share-btn:hover, .ch-share-btn:focus { color: var(--accent, #3b82f6); }
+.ch-share-btn:hover, .ch-share-btn:focus { color: var(--link-color, #3b82f6); }
.ch-user-badge { font-size: 12px; font-weight: var(--fw-medium); margin-left: 2px; opacity: 0.85; flex-shrink: 0; } /* #1668 M3 r1 β chip floor, mirror row chips (adv #2) */
.ch-item-preview { font-size: 13px; font-weight: var(--fw-medium); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* #1668 M3 β was 12px/400 */
@@ -1788,10 +1826,10 @@ button.ch-item:hover .ch-icon-btn { opacity: 1; }
font-size: 14px; line-height: 1.5; word-break: break-word; display: inline-block; max-width: 100%;
border: 1px solid var(--border);
}
-.ch-mention { color: var(--accent); font-weight: 600; }
+.ch-mention { color: var(--link-color); font-weight: 600; }
.ch-encrypted-text { font-size: 11px; color: var(--text-muted); }
.ch-msg-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
-.ch-analyze-link { color: var(--accent); text-decoration: none; margin-left: 8px; }
+.ch-analyze-link { color: var(--link-color); text-decoration: none; margin-left: 8px; }
.ch-analyze-link:hover { text-decoration: underline; }
.ch-scroll-btn {
position: absolute; bottom: 16px; right: 24px; background: var(--accent); color: #fff;
@@ -1842,7 +1880,7 @@ button.ch-item:hover .ch-icon-btn { opacity: 1; }
.ch-node-label { display: block; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 2px; }
.ch-node-adverts { margin-top: 12px; }
.ch-node-advert { font-size: 12px; color: var(--text-muted); padding: 4px 0; border-bottom: 1px solid var(--border); }
-.ch-node-link { display: inline-block; margin-top: 12px; color: var(--accent); text-decoration: none; font-size: 13px; }
+.ch-node-link { display: inline-block; margin-top: 12px; color: var(--link-color); text-decoration: none; font-size: 13px; }
.ch-node-link:hover { text-decoration: underline; }
/* === Nodes Page === */
@@ -1945,7 +1983,7 @@ button.ch-item:hover .ch-icon-btn { opacity: 1; }
}
/* #829: explicit color so text stays readable when inherited color matches card-bg */
.advert-info { font-size: 12px; line-height: 1.5; color: var(--text); }
-.advert-info a { color: var(--accent); }
+.advert-info a { color: var(--link-color); }
/* === Traces Page === */
.traces-page { padding: 16px; max-width: var(--trace-max-width, 95vw); margin: 0 auto; }
@@ -2080,7 +2118,7 @@ button.ch-item:hover .ch-icon-btn { opacity: 1; }
border-bottom: 1px solid var(--border); transition: background .1s;
}
.search-result-item:hover { background: var(--row-hover); }
-.search-result-type { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--accent); margin-right: 8px; }
+.search-result-type { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--link-color); margin-right: 8px; }
.search-no-results { padding: 20px; text-align: center; color: var(--text-muted); font-size: 14px; }
/* === Loading States & Transitions (M16) === */
@@ -2117,8 +2155,8 @@ button.ch-item:hover .ch-icon-btn { opacity: 1; }
.data-table tbody tr.new-row { animation: row-flash 800ms ease-out; }
.data-table th.sortable { cursor: pointer; user-select: none; }
-.data-table th.sortable:hover { color: var(--accent); }
-.data-table th.sort-active { color: var(--accent); }
+.data-table th.sortable:hover { color: var(--link-color); }
+.data-table th.sort-active { color: var(--link-color); }
.data-table th .sort-arrow { font-size: 10px; margin-left: 4px; opacity: 0.7; }
.data-table tbody tr { border-left: 3px solid transparent; transition: border-color 0.15s, background 0.15s; }
.data-table tbody tr:hover { border-left-color: var(--accent); }
@@ -2416,7 +2454,7 @@ button.ch-item:hover .ch-icon-btn { opacity: 1; }
/* === Grouped Packet Rows === */
.group-header { cursor: pointer; font-weight: 600; }
-.group-header td:first-child::before { content: 'βΆ '; font-size: 10px; color: var(--accent); transition: transform 0.15s; display: inline-block; }
+.group-header td:first-child::before { content: 'βΆ '; font-size: 10px; color: var(--link-color); transition: transform 0.15s; display: inline-block; }
.group-header.expanded td:first-child::before { content: 'βΌ '; }
.group-header:hover { background: var(--row-hover); }
.group-child { font-size: 12px; }
@@ -2563,7 +2601,7 @@ button.ch-item.ch-item-encrypted .ch-badge { filter: grayscale(0.6); }
.ch-key-input:focus {
outline: 2px solid var(--accent, #3b82f6);
outline-offset: -1px;
- border-color: var(--accent, #3b82f6);
+ border-color: var(--link-color, #3b82f6);
}
.ch-key-input::placeholder { color: var(--text-muted); }
.ch-key-input-wrap { margin-bottom: 4px; }
@@ -2595,7 +2633,7 @@ button.ch-item.ch-item-encrypted .ch-badge { filter: grayscale(0.6); }
border-radius: 6px;
flex: 0 0 auto;
}
-.ch-analytics-link:hover { color: var(--accent); }
+.ch-analytics-link:hover { color: var(--link-color); }
.ch-add-status--loading { color: var(--text-muted); }
.ch-add-status--success { color: var(--success, #22c55e); }
.ch-add-status--warn { color: var(--warning, #eab308); }
@@ -2667,8 +2705,8 @@ button.ch-item.ch-item-encrypted .ch-badge { filter: grayscale(0.6); }
.analytics-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.analytics-table th { text-align: left; padding: 8px; border-bottom: 2px solid var(--border); font-size: 12px; text-transform: uppercase; color: var(--text-muted); }
.analytics-table th.sortable { cursor: pointer; user-select: none; }
-.analytics-table th.sortable:hover { color: var(--accent); }
-.analytics-table th.sort-active { color: var(--accent); }
+.analytics-table th.sortable:hover { color: var(--link-color); }
+.analytics-table th.sort-active { color: var(--link-color); }
.analytics-table th .sort-arrow { font-size: 10px; margin-left: 4px; opacity: 0.7; }
.analytics-table td { padding: 8px; border-bottom: 1px solid var(--border); }
.analytics-table .ch-section-row { background: var(--card-bg); }
@@ -2732,19 +2770,23 @@ button.ch-item.ch-item-encrypted .ch-badge { filter: grayscale(0.6); }
border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); padding: 8px 12px;
font-size: 12px; min-width: 160px; max-width: 260px; pointer-events: none;
}
-.hash-matrix-tooltip-hex { font-family: var(--mono); font-size: 13px; font-weight: 700; margin-bottom: 4px; color: var(--accent); }
+.hash-matrix-tooltip-hex { font-family: var(--mono); font-size: 13px; font-weight: 700; margin-bottom: 4px; color: var(--link-color); }
.hash-matrix-tooltip-status { color: var(--text-muted); font-size: 11px; }
.hash-matrix-tooltip-nodes { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.hash-byte-selector { display: flex; gap: 4px; }
.hash-byte-btn { padding: 4px 12px; border-radius: 20px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text-muted); font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
.hash-byte-btn:hover { background: var(--border); color: var(--text); }
-.hash-byte-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
+.hash-byte-btn.active { background: var(--accent-strong); color: var(--text-on-accent); border-color: var(--accent-strong); }
.hash-bar-value { min-width: 120px; text-align: right; font-size: 13px; font-weight: 600; }
-.badge-hash-1 { background: #ef444420; color: var(--status-red); }
-.badge-hash-2 { background: #22c55e20; color: var(--status-green); }
-.badge-success { background: #22c55e20; color: var(--status-green); }
-.badge-danger { background: #ef444420; color: var(--status-red); }
-.badge-hash-3 { background: #3b82f620; color: var(--accent); }
+/* #1668 M5 β was translucent-fg-on-tinted-bg (e.g. #ef4444 on #ef444420
+ stacked over surface β 2-4:1, BLOCKER). Solid -700 hue with white text
+ preserves semantic encoding (red/green/blue) AND clears AA both themes:
+ #fff/#b91c1c=6.47, #fff/#15803d=5.02, #fff/#1d4ed8=6.70. */
+.badge-hash-1 { background: var(--palette-red-700, #b91c1c); color: var(--palette-gray-50, #f9fafb); }
+.badge-hash-2 { background: var(--palette-green-700, #15803d); color: var(--palette-gray-50, #f9fafb); }
+.badge-success { background: var(--palette-green-700, #15803d); color: var(--palette-gray-50, #f9fafb); }
+.badge-danger { background: var(--palette-red-700, #b91c1c); color: var(--palette-gray-50, #f9fafb); }
+.badge-hash-3 { background: var(--palette-blue-700, #1d4ed8); color: var(--palette-gray-50, #f9fafb); }
.timeline-legend { display: flex; gap: 16px; justify-content: center; margin-top: 8px; font-size: 12px; }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.timeline-chart svg { display: block; }
@@ -2755,7 +2797,7 @@ button.ch-item.ch-item-encrypted .ch-badge { filter: grayscale(0.6); }
}
.clickable-row { cursor: pointer; }
.clickable-row:hover { background: var(--hover-bg, rgba(0,0,0,.04)); }
-.analytics-link { color: var(--accent); text-decoration: none; font-weight: 600; }
+.analytics-link { color: var(--link-color); text-decoration: none; font-weight: 600; }
.analytics-link:hover { text-decoration: underline; }
/* Analytics v2 */
@@ -2866,7 +2908,7 @@ button.ch-item.ch-item-encrypted .ch-badge { filter: grayscale(0.6); }
/* Clickable hop links */
.hop-link {
- color: var(--accent, #3b82f6);
+ color: var(--link-color, #3b82f6);
text-decoration: none;
cursor: pointer;
transition: color 0.15s;
@@ -2928,11 +2970,16 @@ button.ch-item.ch-item-encrypted .ch-badge { filter: grayscale(0.6); }
.hop-conflict-name { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hop-conflict-dist { font-size: 11px; color: var(--text-muted); font-family: var(--mono); white-space: nowrap; }
.hop-conflict-pk { font-size: 10px; color: var(--text-muted); font-family: var(--mono); }
-.hop-unreliable { opacity: 0.85; }
+/* #1668 M5 β was opacity:0.85; dropped fg #f9fafb on accent-strong
+ #2563eb to 4.45:1 (BLOCKER). The adjacent .hop-unreliable-btn (status
+ yellow warning glyph) is the redundant non-color signal that this hop
+ is dubious β opacity haze was over-encoding it. Remove the haze; the
+ warning icon stays as the visual marker. */
+.hop-unreliable { font-style: italic; }
.hop-unreliable-btn { background: none; border: none; color: var(--status-yellow, #f59e0b); font-size: 13px;
cursor: help; vertical-align: middle; margin-left: 2px; padding: 0 2px; line-height: 1; }
.hop-global-fallback { border-bottom: 1px dashed var(--status-red); }
-.hop-current { font-weight: 700 !important; color: var(--accent) !important; }
+.hop-current { font-weight: 700 !important; color: var(--link-color) !important; }
/* Self-loop subpath rows */
.subpath-selfloop { opacity: 0.6; }
@@ -3300,10 +3347,13 @@ tr[data-hops]:hover { background: rgba(59,130,246,0.1); }
flex-shrink: 0;
}
.region-pill:hover { border-color: var(--accent); color: var(--accent); }
+/* #1668 M5 β was bg:var(--accent)(#4a9eff) + #fff = 2.75:1 BLOCKER on both themes.
+ Bumped to --accent-strong (#2563eb) + --text-on-accent for 4.83:1 AA pass.
+ Same M2 token pair used for .skip-link / .hop-named / .filter-bar .btn.active. */
button.region-pill-active {
- background: var(--accent); color: #fff; border-color: var(--accent);
+ background: var(--accent-strong); color: var(--text-on-accent); border-color: var(--accent-strong);
}
-button.region-pill-active:hover { opacity: 0.85; color: #fff; }
+button.region-pill-active:hover { opacity: 0.85; color: var(--text-on-accent); }
.region-filter-label {
font-size: 12px; font-weight: 600; color: var(--text-muted); align-self: center;
margin-right: 2px; user-select: none; white-space: nowrap; flex-shrink: 0;
@@ -3371,7 +3421,7 @@ button.region-pill-active:hover { opacity: 0.85; color: #fff; }
}
.multi-select-item:hover { background: var(--row-hover, #f5f5f5); }
-.chan-tag { background: var(--accent, #3b82f6); color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 0.9em; font-weight: 600; }
+.chan-tag { background: var(--accent-strong, #2563eb); color: var(--text-on-accent, #f9fafb); padding: 2px 8px; border-radius: 4px; font-size: 0.9em; font-weight: 600; }
/* Matrix mode hex animation */
.matrix-char { background: none !important; border: none !important; }
@@ -3626,7 +3676,7 @@ button.region-pill-active:hover { opacity: 0.85; color: #fff; }
color: var(--text-muted);
margin: 0 0 var(--space-md);
}
-.compare-breadcrumbs a { color: var(--accent); text-decoration: none; }
+.compare-breadcrumbs a { color: var(--link-color); text-decoration: none; }
.compare-breadcrumbs a:hover { text-decoration: underline; }
.compare-controls {
@@ -3670,11 +3720,14 @@ button.region-pill-active:hover { opacity: 0.85; color: #fff; }
}
.compare-select:focus { border-color: var(--accent); outline: none; }
.compare-vs {
- font-size: 10px; font-weight: 700; color: var(--text-muted);
+ /* #1668 M5 β was font-size:10px+color:var(--text-muted)+opacity:0.7
+ β composite color #8c929b on white = 3.13:1 (BLOCKER). Removed the
+ opacity haze AND bumped from text-muted to text (full theme color)
+ so the 'vs' lives in the same readable band as adjacent labels. */
+ font-size: 10px; font-weight: 700; color: var(--text);
text-transform: uppercase; letter-spacing: 1.2px;
padding: 0 4px;
align-self: center;
- opacity: 0.7;
}
/* The Compare CTA was removed in #1646 β comparison auto-runs when
* both observers are chosen. The legacy .compare-btn touch-target
@@ -4539,10 +4592,10 @@ body[data-cb-preset="achromat"] {
/* === #1034 PR1: Channel Add modal + sectioned sidebar === */
.ch-add-channel-btn {
- background: var(--accent, #2563eb); color: #fff; border: none;
+ background: var(--accent-strong, #2563eb); color: var(--text-on-accent, #f9fafb); border: none;
padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600;
}
-.ch-add-channel-btn:hover { background: var(--accent-hover, #1d4ed8); }
+.ch-add-channel-btn:hover { background: var(--palette-blue-700, #1d4ed8); }
.ch-modal-overlay { z-index: 1100; }
.ch-modal-overlay.hidden { display: none; }
diff --git a/public/traces.js b/public/traces.js
index e45c2837..4f49bfcd 100644
--- a/public/traces.js
+++ b/public/traces.js
@@ -48,7 +48,7 @@
function obsLink(t) {
const label = escapeHtml(obsLabel(t));
if (!t.observer) return label;
- return `${label}`;
+ return `${label}`;
}
async function doTrace() {
@@ -107,7 +107,7 @@
renderResults(results, allPaths, allPathsRaw, decoded);
} catch (e) {
- results.innerHTML = `Error: ${e.message}
`;
+ results.innerHTML = `Error: ${e.message}
`;
}
}
diff --git a/test-a11y-axe-1668-selftest.js b/test-a11y-axe-1668-selftest.js
new file mode 100644
index 00000000..f803003d
--- /dev/null
+++ b/test-a11y-axe-1668-selftest.js
@@ -0,0 +1,243 @@
+/**
+ * test-a11y-axe-1668-selftest.js
+ *
+ * Deterministic, browser-free unit test for the M5 axe gate's
+ * allowlist parser and shape. Runs in <100ms on any Node host.
+ *
+ * The full axe browser run (test-a11y-axe-1668.js) executes in the
+ * Playwright E2E block after the fixture server + chromium are up.
+ * THIS file guards the gate's metadata: route list, theme list,
+ * allowlist parser, and the "expires_at refuses suppression" policy.
+ */
+
+'use strict';
+
+const assert = require('assert');
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+
+const mod = require('./test-a11y-axe-1668.js');
+
+// ---- routes / themes --------------------------------------------------------
+assert.ok(Array.isArray(mod.ROUTES), 'ROUTES must be an array');
+assert.ok(mod.ROUTES.length >= 14, `ROUTES too small: ${mod.ROUTES.length}`);
+assert.deepStrictEqual(mod.THEMES, ['dark', 'light'], 'THEMES must be [dark,light]');
+
+// Spot-check key routes from the M1 audit baseline
+for (const r of ['/', '/packets', '/nodes', '/live', '/map', '/analytics?tab=collisions', '/audio-lab']) {
+ assert.ok(mod.ROUTES.includes(r), `ROUTES missing ${r}`);
+}
+
+// ---- ROUTES reciprocity vs registered pages / analytics tabs ----------------
+// Forces a build break if someone adds a route without covering it, OR removes
+// a registered page/tab without dropping it from ROUTES (silent skip).
+function basePageOf(route) {
+ // '/' β '' (SPA default = packets, but '/' is fine as a registered alias)
+ // '/analytics?tab=rf' β 'analytics'
+ // '/audio-lab' β 'audio-lab'
+ const stripped = route.replace(/^\//, '').split('?')[0];
+ return stripped;
+}
+function tabOf(route) {
+ const q = route.split('?')[1];
+ if (!q) return null;
+ const m = q.match(/(?:^|&)tab=([^&]+)/);
+ return m ? decodeURIComponent(m[1]) : null;
+}
+for (const r of mod.ROUTES) {
+ const base = basePageOf(r);
+ if (base === '') continue; // '/' = SPA default, no registerPage needed
+ assert.ok(
+ mod.REGISTERED_PAGES.includes(base),
+ `ROUTES contains "${r}" but base page "${base}" is NOT in REGISTERED_PAGES β drop it or register it`
+ );
+ const tab = tabOf(r);
+ if (tab !== null) {
+ assert.ok(
+ mod.REGISTERED_ANALYTICS_TABS.includes(tab),
+ `ROUTES contains "${r}" but analytics tab "${tab}" is NOT in REGISTERED_ANALYTICS_TABS β drop it or add the case`
+ );
+ }
+}
+
+// Cross-check REGISTERED_* against actual source code so the constant cannot
+// drift silently from `registerPage()` calls or analytics tab `case` arms.
+const repoRoot = __dirname;
+const publicDir = path.join(repoRoot, 'public');
+if (fs.existsSync(publicDir)) {
+ const files = fs.readdirSync(publicDir).filter(f => f.endsWith('.js'));
+ const registeredFromSource = new Set();
+ for (const f of files) {
+ const src = fs.readFileSync(path.join(publicDir, f), 'utf8');
+ const re = /registerPage\(\s*['"]([^'"]+)['"]/g;
+ let m;
+ while ((m = re.exec(src)) !== null) registeredFromSource.add(m[1]);
+ }
+ // REGISTERED_PAGES MUST be a subset of what the source actually registers.
+ for (const p of mod.REGISTERED_PAGES) {
+ assert.ok(
+ registeredFromSource.has(p),
+ `REGISTERED_PAGES has "${p}" but no registerPage('${p}', ...) call found in public/*.js`
+ );
+ }
+ // Analytics tabs: grep `case 'X':` arms from analytics.js
+ const analyticsSrc = fs.readFileSync(path.join(publicDir, 'analytics.js'), 'utf8');
+ const tabsFromSource = new Set();
+ const caseRe = /case\s+['"]([a-z][a-z0-9-]*)['"]\s*:/g;
+ // Constrain to the dispatch block to avoid grabbing unrelated `case` strings
+ // (sorting comparators, key events). Match against the rendering switch only.
+ const dispatch = analyticsSrc.match(/switch\s*\(\s*[a-zA-Z_$][\w$]*\s*\)\s*\{[\s\S]*?\n\s*\}/);
+ if (dispatch) {
+ let m;
+ while ((m = caseRe.exec(dispatch[0])) !== null) tabsFromSource.add(m[1]);
+ for (const t of mod.REGISTERED_ANALYTICS_TABS) {
+ assert.ok(
+ tabsFromSource.has(t),
+ `REGISTERED_ANALYTICS_TABS has "${t}" but no \`case '${t}':\` arm found in analytics.js dispatch`
+ );
+ }
+ }
+}
+
+// ---- parser: empty + flow ---------------------------------------------------
+assert.deepStrictEqual(mod.parseAllowlistYaml('[]'), [], 'empty flow list');
+assert.deepStrictEqual(mod.parseAllowlistYaml(''), [], 'empty string');
+assert.deepStrictEqual(mod.parseAllowlistYaml('# only a comment\n'), [], 'comment-only');
+
+// ---- parser: block list with two entries ------------------------------------
+const sample = `
+- route: /analytics?tab=channels
+ selector: ".some-stale"
+ rule: color-contrast
+ issue: 1234
+ expires_at: 2099-01-01
+- route: /packets
+ selector: .badge-quirk
+ rule: color-contrast
+ issue: 5678
+ expires_at: 2099-06-01
+`;
+const parsed = mod.parseAllowlistYaml(sample);
+assert.strictEqual(parsed.length, 2, 'parsed two entries');
+assert.strictEqual(parsed[0].route, '/analytics?tab=channels');
+assert.strictEqual(parsed[0].issue, 1234);
+assert.strictEqual(parsed[0].selector, '.some-stale');
+assert.strictEqual(parsed[1].route, '/packets');
+assert.strictEqual(parsed[1].issue, 5678);
+
+// ---- parser: malformed YAML THROWS (must not silently return []) -----------
+// Anti-tautology: reverting parseAllowlistYaml to return [] on parse error
+// MUST cause this block to fail. Verified by manual revert during dev.
+assert.throws(
+ () => mod.parseAllowlistYaml('this is : not : valid : yaml : at : all\n no list dash'),
+ /cannot parse line/i,
+ 'malformed inline YAML must throw'
+);
+// And loadAllowlist must propagate the throw end-to-end via a tmpfile.
+const tmpMalformed = path.join(os.tmpdir(), `a11y-malformed-${process.pid}.yaml`);
+fs.writeFileSync(tmpMalformed, 'this :: is :: garbage\n!!! no\n');
+const ALLOWLIST_PATH_ORIG = require.resolve('./test-a11y-axe-1668.js');
+// We can't easily redirect ALLOWLIST_PATH without re-requiring; instead call
+// parseAllowlistYaml directly on the tmpfile content for end-to-end coverage.
+assert.throws(
+ () => mod.parseAllowlistYaml(fs.readFileSync(tmpMalformed, 'utf8')),
+ /a11y-allowlist\.yaml:/i,
+ 'malformed YAML from tmpfile must throw via parser'
+);
+fs.unlinkSync(tmpMalformed);
+
+// ---- violationAllowed: strict equality (no substring) ----------------------
+const al = [{ route: '/a', rule: 'color-contrast', selector: '.x' }];
+assert.strictEqual(
+ mod.violationAllowed('/a', 'color-contrast', { target: ['.x'] }, al),
+ true,
+ 'exact match should suppress'
+);
+assert.strictEqual(
+ mod.violationAllowed('/b', 'color-contrast', { target: ['.x'] }, al),
+ false,
+ 'route mismatch must not suppress'
+);
+assert.strictEqual(
+ mod.violationAllowed('/a', 'color-contrast', { target: ['.y'] }, al),
+ false,
+ 'selector mismatch must not suppress'
+);
+assert.strictEqual(
+ mod.violationAllowed('/a', 'image-alt', { target: ['.x'] }, al),
+ false,
+ 'rule mismatch must not suppress'
+);
+// Substring rejection: `.btn` MUST NOT suppress `.btn-primary` violations.
+const btnAllow = [{ route: '/p', rule: 'color-contrast', selector: '.btn' }];
+assert.strictEqual(
+ mod.violationAllowed('/p', 'color-contrast', { target: ['.btn-primary'] }, btnAllow),
+ false,
+ 'substring leak: .btn must NOT match .btn-primary'
+);
+assert.strictEqual(
+ mod.violationAllowed('/p', 'color-contrast', { target: ['div > .btn'] }, btnAllow),
+ false,
+ 'substring leak: .btn must NOT match `div > .btn` (different selector string)'
+);
+assert.strictEqual(
+ mod.violationAllowed('/p', 'color-contrast', { target: ['.btn'] }, btnAllow),
+ true,
+ 'exact `.btn` still suppresses `.btn`'
+);
+
+// ---- filterAllowlist: boundary + expiry + missing-field --------------------
+const TODAY = '2026-06-12';
+// Tomorrow accepted
+assert.deepStrictEqual(
+ mod.filterAllowlist(
+ [{ route: '/x', selector: '.s', rule: 'color-contrast', issue: 1, expires_at: '2026-06-13' }],
+ TODAY
+ ).length,
+ 1,
+ 'expires_at tomorrow must be accepted'
+);
+// Today (boundary) refused
+assert.throws(
+ () => mod.filterAllowlist(
+ [{ route: '/x', selector: '.s', rule: 'color-contrast', issue: 1, expires_at: TODAY }],
+ TODAY
+ ),
+ /REFUSED \(expired/,
+ 'expires_at == today must throw (boundary)'
+);
+// Past refused
+assert.throws(
+ () => mod.filterAllowlist(
+ [{ route: '/x', selector: '.s', rule: 'color-contrast', issue: 1, expires_at: '2026-06-11' }],
+ TODAY
+ ),
+ /REFUSED \(expired/,
+ 'expires_at in past must throw'
+);
+// Missing field refused
+assert.throws(
+ () => mod.filterAllowlist(
+ [{ route: '/x', selector: '.s', rule: 'color-contrast', issue: 1 /* no expires_at */ }],
+ TODAY
+ ),
+ /missing required field/,
+ 'missing required field must throw'
+);
+// Bad today shape refused
+assert.throws(
+ () => mod.filterAllowlist([], '06/12/2026'),
+ /YYYY-MM-DD/,
+ 'today must be YYYY-MM-DD'
+);
+
+// ---- repo allowlist file: shape sanity --------------------------------------
+const allowPath = path.join(__dirname, 'tests', 'a11y-allowlist.yaml');
+assert.ok(fs.existsSync(allowPath), `tests/a11y-allowlist.yaml missing at ${allowPath}`);
+const entries = mod.loadAllowlist();
+for (const e of entries) {
+ assert.ok(e.route && e.selector && e.rule && e.issue && e.expires_at,
+ `allowlist entry missing required field: ${JSON.stringify(e)}`);
+}
+console.log(`PASS: a11y-axe-1668 selftest β routes=${mod.ROUTES.length} themes=${mod.THEMES.length} allowlist=${entries.length}`);
diff --git a/test-a11y-axe-1668.js b/test-a11y-axe-1668.js
new file mode 100644
index 00000000..2df20ef5
--- /dev/null
+++ b/test-a11y-axe-1668.js
@@ -0,0 +1,332 @@
+/**
+ * test-a11y-axe-1668.js β Milestone 5 of #1668
+ *
+ * axe-core CI gate. Loads every major CoreScope route in dark + light theme,
+ * injects axe-core, runs the `color-contrast` rule, and asserts zero
+ * violations (modulo `tests/a11y-allowlist.yaml`).
+ *
+ * Scope per M5 brief:
+ * - Rules: color-contrast ONLY (M6 owns the expanded ruleset)
+ * - Themes: dark + light
+ * - Viewport: 1200x900 desktop (mobile = M6)
+ *
+ * Allowlist (`tests/a11y-allowlist.yaml`):
+ * Operator-flagged false-positives. Each entry MUST cite an issue # AND
+ * an expires_at date. Expired entries are refused (warning logged, full
+ * failure). Missing fields => refused.
+ *
+ * Usage:
+ * BASE_URL=http://localhost:13581 node test-a11y-axe-1668.js
+ *
+ * Env:
+ * BASE_URL required (server to test against)
+ * CHROMIUM_PATH optional (else playwright's bundled chromium)
+ * AXE_ROUTES_ONLY optional comma list of routes to limit (debug)
+ * AXE_SCREENSHOT_DIR where to write screenshots on failure (default /tmp/axe-1668)
+ */
+
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+// Lazy-require playwright + @axe-core/playwright inside main() so the
+// parser helpers below are unit-testable on hosts without those modules
+// (e.g. CI lint passes, or the sanity self-test below).
+
+const BASE = process.env.BASE_URL || 'http://localhost:13581';
+const ROUTES_FILTER = (process.env.AXE_ROUTES_ONLY || '').split(',').filter(Boolean);
+const SHOT_DIR = process.env.AXE_SCREENSHOT_DIR || '/tmp/axe-1668';
+const ALLOWLIST_PATH = path.join(__dirname, 'tests', 'a11y-allowlist.yaml');
+
+// Routes: M1 audit baseline (already proven coverage).
+// Hash routes β CoreScope is a SPA, server returns the same shell for any path.
+//
+// HARD INVARIANT: every entry below MUST resolve to a `registerPage()` page
+// in `public/*.js` (or β for `/analytics?tab=X` β to a real `case 'X':` arm
+// of the tab dispatch in `public/analytics.js`). The selftest enforces this
+// via REGISTERED_PAGES / REGISTERED_ANALYTICS_TABS reciprocity so a removed
+// route forces a build break instead of the gate silently skipping coverage.
+const ROUTES = [
+ '/', // SPA default β packets
+ '/packets',
+ '/nodes',
+ '/channels',
+ '/live',
+ '/map',
+ '/observers',
+ '/compare',
+ '/analytics?tab=overview',
+ '/analytics?tab=rf',
+ '/analytics?tab=topology',
+ '/analytics?tab=channels',
+ '/analytics?tab=hashsizes',
+ '/analytics?tab=collisions',
+ '/analytics?tab=roles',
+ '/audio-lab',
+];
+
+// Source-of-truth for ROUTES reciprocity. Keep these in sync with the
+// `registerPage(...)` calls under `public/` and the `case 'X':` arms in
+// `public/analytics.js`. The selftest greps the source to confirm.
+const REGISTERED_PAGES = [
+ 'home', 'packets', 'packet-detail', 'nodes', 'node-analytics', 'node-reach',
+ 'channels', 'live', 'map', 'observers', 'observer-detail', 'compare',
+ 'analytics', 'audio-lab', 'perf', 'traces', 'path-inspector', 'tools-landing',
+];
+const REGISTERED_ANALYTICS_TABS = [
+ 'overview', 'rf', 'topology', 'channels', 'hashsizes', 'collisions',
+ 'subpaths', 'nodes', 'distance', 'neighbor-graph', 'rf-health',
+ 'clock-health', 'roles', 'prefix-tool', 'scopes',
+];
+
+const THEMES = ['dark', 'light'];
+
+// ---- tiny YAML loader (flow `[]` or block list of `key: value` maps) -------
+//
+// Stays dependency-free β we only need to parse our own narrow schema.
+// Supports:
+// - empty list ([])
+// - block list of inline `- key: value` items continued with ` key: value` lines
+// - quoted strings ('...' or "...")
+// - integers and YYYY-MM-DD dates
+function parseAllowlistYaml(src) {
+ // strip BOM, comments, normalize line endings
+ const lines = src.replace(/^\uFEFF/, '').split(/\r?\n/)
+ .map(l => l.replace(/(^|\s)#.*$/, '').replace(/\s+$/, ''))
+ .filter(l => l.trim().length > 0);
+
+ if (lines.length === 0) return [];
+ if (lines.length === 1 && lines[0].trim() === '[]') return [];
+
+ const entries = [];
+ let current = null;
+ for (const raw of lines) {
+ const m = raw.match(/^(\s*)(-?)\s*([A-Za-z_][A-Za-z0-9_]*)\s*:\s*(.*)$/);
+ if (!m) {
+ throw new Error(`a11y-allowlist.yaml: cannot parse line: ${raw}`);
+ }
+ const [, , dash, key, valRaw] = m;
+ if (dash === '-') {
+ if (current) entries.push(current);
+ current = {};
+ }
+ if (!current) throw new Error(`a11y-allowlist.yaml: key "${key}" outside list item`);
+ current[key] = coerce(valRaw.trim());
+ }
+ if (current) entries.push(current);
+ return entries;
+}
+
+function coerce(v) {
+ if (v === '' || v === '~' || v === 'null') return null;
+ if (/^-?\d+$/.test(v)) return parseInt(v, 10);
+ if (/^'.*'$/.test(v) || /^".*"$/.test(v)) return v.slice(1, -1);
+ return v;
+}
+
+function loadAllowlist() {
+ if (!fs.existsSync(ALLOWLIST_PATH)) return [];
+ const raw = fs.readFileSync(ALLOWLIST_PATH, 'utf8');
+ // parseAllowlistYaml THROWS on malformed input (don't silently swallow β []).
+ // A swallowed parse error would let a typo-mangled allowlist suppress nothing
+ // and ship a green gate that no longer reflects operator intent. Loud failure.
+ const entries = parseAllowlistYaml(raw);
+ const today = new Date().toISOString().slice(0, 10);
+ return filterAllowlist(entries, today);
+}
+
+// Pure function: filter a parsed allowlist against `today` (YYYY-MM-DD string).
+// THROWS on:
+// - any entry missing a required field (route/selector/rule/issue/expires_at)
+// - any entry whose expires_at <= today (today inclusive β boundary fails)
+// Returning a soft-filtered subset would let stale suppressions persist; this
+// matches PR policy that expired entries are refused as a HARD failure.
+function filterAllowlist(entries, today) {
+ if (!Array.isArray(entries)) throw new Error('filterAllowlist: entries must be an array');
+ if (typeof today !== 'string' || !/^\d{4}-\d{2}-\d{2}$/.test(today)) {
+ throw new Error(`filterAllowlist: today must be YYYY-MM-DD, got ${today}`);
+ }
+ const valid = [];
+ for (const e of entries) {
+ if (!e || !e.route || !e.selector || !e.rule || !e.issue || !e.expires_at) {
+ throw new Error(`a11y-allowlist.yaml: REFUSED (missing required field): ${JSON.stringify(e)}`);
+ }
+ if (String(e.expires_at) <= today) {
+ throw new Error(`a11y-allowlist.yaml: REFUSED (expired ${e.expires_at} <= today ${today}, issue #${e.issue}): ${e.route} ${e.selector}`);
+ }
+ valid.push(e);
+ }
+ return valid;
+}
+
+function violationAllowed(route, rule, node, allowlist) {
+ // axe node.target is an array of selector arrays (per-frame). Match if any
+ // listed selector is STRICTLY EQUAL to the allowlist selector. We deliberately
+ // do NOT substring-match: `.btn` must not suppress `.btn-primary` violations,
+ // and `body` must not suppress every node in the document.
+ const targets = (node.target || []).flat ? node.target.flat() : [].concat(...(node.target || []));
+ for (const entry of allowlist) {
+ if (entry.route !== route) continue;
+ if (entry.rule !== rule) continue;
+ for (const t of targets) {
+ if (typeof t !== 'string') continue;
+ if (t === entry.selector) return true;
+ }
+ }
+ return false;
+}
+
+// ---------------------------------------------------------------------------
+
+async function setTheme(page, theme) {
+ // Seed localStorage BEFORE the SPA boots so the theme is correct on first paint.
+ await page.addInitScript((t) => {
+ try {
+ localStorage.setItem('meshcore-theme', t);
+ // Live page collapses controls by default; keep them visible
+ // (matches test-e2e-playwright.js convention).
+ localStorage.setItem('live-controls-expanded', 'true');
+ // Default time window wide enough to render content.
+ localStorage.setItem('meshcore-time-window', '525600');
+ } catch (_) { /* ignore */ }
+ // Set the attribute pre-paint to avoid a transient mismatch.
+ try { document.documentElement.setAttribute('data-theme', t); } catch (_) {}
+ }, theme);
+}
+
+async function runRoute(page, route, theme, AxeBuilder) {
+ const url = `${BASE}/#${route}`;
+ await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 30000 });
+ // Give the SPA a moment to render. We deliberately do NOT
+ // wait for network idle because /live + /map keep sockets open.
+ await page.waitForTimeout(1500);
+
+ // Quick sanity: confirm body is visible and theme attr matches
+ const themeAttr = await page.evaluate(() => document.documentElement.getAttribute('data-theme'));
+ if (themeAttr !== theme) {
+ // Try toggling explicitly if the SPA reset it (shouldn't happen, but be safe)
+ await page.evaluate((t) => document.documentElement.setAttribute('data-theme', t), theme);
+ await page.waitForTimeout(200);
+ }
+
+ const axe = new AxeBuilder({ page })
+ .withRules(['color-contrast']);
+ const result = await axe.analyze();
+ return result;
+}
+
+async function main() {
+ const { chromium } = require('playwright');
+ const { AxeBuilder } = require('@axe-core/playwright');
+ if (!fs.existsSync(SHOT_DIR)) fs.mkdirSync(SHOT_DIR, { recursive: true });
+ const allowlist = loadAllowlist();
+ console.log(`a11y-axe-1668: BASE=${BASE} allowlist=${allowlist.length} entries`);
+
+ const routesToRun = ROUTES_FILTER.length ? ROUTES.filter(r => ROUTES_FILTER.includes(r)) : ROUTES;
+ console.log(`a11y-axe-1668: routes=${routesToRun.length} themes=${THEMES.length} cells=${routesToRun.length * THEMES.length}`);
+
+ const browser = await chromium.launch({
+ headless: true,
+ executablePath: process.env.CHROMIUM_PATH || undefined,
+ args: ['--no-sandbox', '--disable-gpu', '--disable-dev-shm-usage'],
+ });
+
+ const summary = []; // { route, theme, raw, suppressed, net }
+ let totalNet = 0;
+
+ try {
+ for (const theme of THEMES) {
+ // One context per theme β keeps the init-script localStorage stable.
+ const context = await browser.newContext({ viewport: { width: 1200, height: 900 } });
+ await context.addInitScript((t) => {
+ try {
+ localStorage.setItem('meshcore-theme', t);
+ localStorage.setItem('live-controls-expanded', 'true');
+ localStorage.setItem('meshcore-time-window', '525600');
+ document.documentElement.setAttribute('data-theme', t);
+ } catch (_) {}
+ }, theme);
+
+ for (const route of routesToRun) {
+ const page = await context.newPage();
+ let raw = 0, suppressed = 0, net = 0;
+ const violationsDetail = [];
+ try {
+ const result = await runRoute(page, route, theme, AxeBuilder);
+ for (const v of result.violations) {
+ if (v.id !== 'color-contrast') continue; // narrow safeguard
+ for (const node of v.nodes) {
+ raw++;
+ if (violationAllowed(route, v.id, node, allowlist)) {
+ suppressed++;
+ } else {
+ net++;
+ violationsDetail.push({
+ selector: node.target,
+ html: node.html && node.html.slice(0, 200),
+ message: node.failureSummary,
+ });
+ }
+ }
+ }
+ } catch (err) {
+ // Probe errors should NOT silently pass β treat as a hard failure
+ // so route regressions (server 500, hash route 404, JS crash) surface.
+ net = 1;
+ violationsDetail.push({ probeError: err.message });
+ }
+
+ const cell = { route, theme, raw, suppressed, net };
+ summary.push(cell);
+ totalNet += net;
+ const verdict = net === 0 ? 'β
' : 'β';
+ console.log(` ${verdict} ${theme.padEnd(5)} ${route.padEnd(34)} raw=${raw} suppressed=${suppressed} net=${net}`);
+ if (net > 0) {
+ for (const d of violationsDetail) {
+ console.log(` - ${JSON.stringify(d).slice(0, 500)}`);
+ }
+ const safe = `${theme}_${route.replace(/[^a-z0-9]+/gi, '_')}`;
+ const shot = path.join(SHOT_DIR, `${safe}.png`);
+ try { await page.screenshot({ path: shot, fullPage: false }); } catch (_) {}
+ }
+ await page.close();
+ }
+ await context.close();
+ }
+ } finally {
+ await browser.close();
+ }
+
+ console.log('');
+ console.log(`a11y-axe-1668: SUMMARY net=${totalNet} cells=${summary.length}`);
+ for (const c of summary) {
+ if (c.net > 0) {
+ console.log(` FAIL ${c.theme} ${c.route} net=${c.net}`);
+ }
+ }
+ if (totalNet > 0) {
+ console.error(`\nFAIL: ${totalNet} color-contrast violation(s) above allowlist`);
+ process.exit(1);
+ }
+ console.log(`\nPASS: zero color-contrast violations across ${summary.length} cells`);
+}
+
+if (require.main === module) {
+ main().catch((err) => {
+ console.error('a11y-axe-1668 fatal:', err && err.stack || err);
+ process.exit(2);
+ });
+}
+
+// Allow consumers (e.g. a CI unit-test step) to import the parser helpers
+// without launching a browser.
+module.exports = {
+ parseAllowlistYaml,
+ loadAllowlist,
+ filterAllowlist,
+ violationAllowed,
+ ROUTES,
+ THEMES,
+ REGISTERED_PAGES,
+ REGISTERED_ANALYTICS_TABS,
+};
diff --git a/test-issue-1281-location-row-e2e.js b/test-issue-1281-location-row-e2e.js
index 006d13aa..a92be9a4 100644
--- a/test-issue-1281-location-row-e2e.js
+++ b/test-issue-1281-location-row-e2e.js
@@ -11,8 +11,9 @@
* Asserts:
* 1. Some non-ADVERT packet detail does NOT contain - Location
.
* 2. Some ADVERT packet detail DOES contain - Location
with coords.
- * 3. The πmap link uses class="loc-map-link" with color = --accent
- * (NOT the default UA blue rgb(0,0,238)).
+ * 3. The πmap link uses class="loc-map-link" with a themed link color
+ * (was --accent pre-M5; now --link-color after #1668/PR #1696 AA-contrast
+ * fix). The hard guarantee is: NOT the default UA blue rgb(0,0,238).
*
* Usage: BASE_URL=http://localhost:13581 node test-issue-1281-location-row-e2e.js
*/
@@ -115,23 +116,31 @@ async function findPacketDetailByType(page, predicate, maxRows = 40) {
`ADVERT Location should contain GPS coords, got: "${meta.locationText}"`);
});
- await step('πmap link uses class="loc-map-link" with color = var(--accent)', async () => {
+ await step('πmap link uses class="loc-map-link" with themed link color (not UA default blue)', async () => {
// Reuse the ADVERT detail pane left open from the previous step.
+ //
+ // History: original #1281 asserted color === var(--accent) (rgb(74,158,255)).
+ // M5 axe/WCAG-AA fixes (#1668, PR #1696) rewired link text away from --accent
+ // because --accent (#4a9eff) fails AA contrast for body-text links on most
+ // surfaces. .loc-map-link now resolves via --link-color (= --palette-blue-600
+ // = #2563eb), which passes AA. Test author intent ("links use a token, not
+ // raw UA blue") is satisfied by either token; we now track --link-color to
+ // match the CSS rule and preserve the "not UA default blue" guard.
const result = await page.evaluate(() => {
const link = document.querySelector('dl.detail-meta a.loc-map-link');
if (!link) return { missing: true };
const cs = getComputedStyle(link);
- const accentRaw = getComputedStyle(document.documentElement).getPropertyValue('--accent').trim();
- // Resolve --accent value to its computed rgb() via a probe element.
+ const linkColorRaw = getComputedStyle(document.documentElement).getPropertyValue('--link-color').trim();
+ // Resolve --link-color value to its computed rgb() via a probe element.
const probe = document.createElement('span');
- probe.style.color = `var(--accent)`;
+ probe.style.color = `var(--link-color)`;
document.body.appendChild(probe);
- const accentRgb = getComputedStyle(probe).color;
+ const linkColorRgb = getComputedStyle(probe).color;
probe.remove();
return {
linkColor: cs.color,
- accentRgb,
- accentRaw,
+ tokenRgb: linkColorRgb,
+ tokenRaw: linkColorRaw,
href: link.getAttribute('href'),
text: link.textContent.trim(),
};
@@ -139,10 +148,10 @@ async function findPacketDetailByType(page, predicate, maxRows = 40) {
assert(!result.missing,
' not found in detail pane β implementation must apply the class');
const link = normRgb(result.linkColor);
- const accent = normRgb(result.accentRgb);
- console.log(` link.color=${result.linkColor} --accentβ${result.accentRgb} (raw "${result.accentRaw}")`);
- assert(link === accent,
- `πmap link color ${result.linkColor} must equal --accent (${result.accentRgb}); ` +
+ const token = normRgb(result.tokenRgb);
+ console.log(` link.color=${result.linkColor} --link-colorβ${result.tokenRgb} (raw "${result.tokenRaw}")`);
+ assert(link === token,
+ `πmap link color ${result.linkColor} must equal var(--link-color) (${result.tokenRgb}); ` +
`default UA blue (rgb(0, 0, 238)) is not acceptable`);
assert(link !== 'rgb(0, 0, 238)',
'Link color is UA-default blue β class is missing or CSS rule does not match');
diff --git a/tests/a11y-allowlist.yaml b/tests/a11y-allowlist.yaml
new file mode 100644
index 00000000..94b17ee6
--- /dev/null
+++ b/tests/a11y-allowlist.yaml
@@ -0,0 +1,20 @@
+# a11y allowlist β operator-flagged false-positives or temporary suppressions.
+#
+# Each entry MUST cite a GH issue # that tracks the eventual fix.
+# Format (YAML list of objects):
+#
+# - route: '/some/route' # exact hash route, e.g. '/' or '/analytics?tab=channels'
+# selector: '.some-css-selector' # axe-core "target" string for the violation node
+# rule: color-contrast # axe rule id (M5 = only color-contrast)
+# issue: 1234 # GH issue tracking the fix
+# expires_at: 2026-09-01 # YYYY-MM-DD; after this date the suppression
+# # is refused and the test fails again β forces a revisit
+#
+# Rules:
+# - Suppression matches when route + rule + (any of) selector strings all match.
+# - Missing issue or expires_at = refused (treated as no allowlist match).
+# - Expired expires_at = warning logged, suppression refused.
+#
+# M5 baseline: 0 entries. Every entry added in the future must have a tracking issue.
+
+[]