From cef8cb9488f4febe505ba097b7e84e0667ace799 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Tue, 18 Aug 2026 14:17:41 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EC=8B=9C=EA=B0=81?= =?UTF-8?q?=EC=A0=81=20=EB=B9=84=ED=99=9C=EC=84=B1=ED=99=94=20=EB=B0=8F=20?= =?UTF-8?q?=EB=A1=9C=EB=94=A9=20=EC=83=81=ED=83=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .jules/palette.md | 3 +++ scanner/dashboard/console.html | 1 + 2 files changed, 4 insertions(+) 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}