diff --git a/.jules/palette.md b/.jules/palette.md index ea004e2d..a239fe44 100644 --- a/.jules/palette.md +++ b/.jules/palette.md @@ -81,3 +81,6 @@ ## 2026-08-12 - Skip to Content Accessibility **Learning:** Screen reader and keyboard-only users experience significant friction when forced to navigate through repetitive header controls on every page load. **Action:** Keep a visible-on-focus skip link as the first interactive element, target a programmatically focusable main container, and give the focused link a high-contrast outline. +## 2026-08-18 - Visual States for Disabled and Loading Elements +**Learning:** Even when elements are semantically marked as disabled or loading (using `disabled` attributes or `aria-busy="true"`), they remain visually indistinguishable from active elements without explicit styling, leading to a poor user experience. +**Action:** Always map ARIA and semantic states like `:disabled` and `[aria-busy="true"]` to CSS visual styles (e.g. `opacity: 0.6`, `cursor: not-allowed`, `pointer-events: none`) to ensure visual parity with the accessibility tree. diff --git a/scanner/dashboard/console.html b/scanner/dashboard/console.html index 7ec262af..53300a8d 100644 --- a/scanner/dashboard/console.html +++ b/scanner/dashboard/console.html @@ -26,6 +26,7 @@ input{font:inherit;padding:8px 10px;border:1px solid var(--border);border-radius:8px;min-width:280px} button{font:inherit;font-weight:600;padding:8px 14px;border:0;border-radius:8px;background:var(--primary);color:var(--on-primary);cursor:pointer} button.ghost{background:var(--surface);color:var(--primary);border:1px solid var(--border)} + button:disabled, [aria-busy="true"]{opacity:0.6;cursor:not-allowed;pointer-events:none} .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;margin-bottom:16px} .stats{display:flex;gap:12px;flex-wrap:wrap} .stat{flex:1;min-width:130px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px}