diff --git a/.Jules/palette.md b/.Jules/palette.md index d8f0c25d5..2ac2d4682 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -23,3 +23,10 @@ ## 2026-08-04 - Status Semantics and Numeric Alignment for Reports **Learning:** Explicit status semantics can make conditionally rendered empty states easier to discover with assistive technology, while tabular numerals improve visual comparison of metric columns. Focus-reveal behavior must not depend only on `:focus-visible`, and hover styling must not reduce the contrast of unrelated rows. **Action:** Use `role="status"` for genuine conditionally rendered status messages, apply `font-variant-numeric: tabular-nums` to numeric report tables, reveal skip links on `:focus`, retain a visible `:focus-visible` indicator, and avoid opacity-based dimming of non-hovered content. +## 2026-08-05 - Avoid Dimming Non-Hovered Content +**Learning:** Using CSS `opacity: 0.5` on non-hovered rows in data charts and tables violates WCAG contrast requirements and harms legibility for visually impaired users. +**Action:** Avoid opacity-based dimming of non-hovered content to maintain sufficient contrast when users interact with components like charts or data tables. + +## 2026-08-05 - Ensure Hidden Elements Reveal on Any Focus +**Learning:** Depending solely on `:focus-visible` to reveal hidden accessibility elements (like 'skip-to-content' links) can fail in some browsers or non-visual focus mechanisms, effectively hiding them from users who need them. +**Action:** Ensure hidden accessibility elements are revealed on both `:focus` and `:focus-visible` states to support full keyboard accessibility. diff --git a/python/fast_mlsirm/report.py b/python/fast_mlsirm/report.py index 63abda4f2..ec157f22d 100644 --- a/python/fast_mlsirm/report.py +++ b/python/fast_mlsirm/report.py @@ -573,6 +573,7 @@ def _css() -> str: font-weight: bold; } +.skip-link:focus, .skip-link:focus-visible { top: 0; outline: 3px solid var(--teal); @@ -694,10 +695,6 @@ def _css() -> str: margin-bottom: 16px; } -.bar-chart:hover .bar-row:not(:hover) { - opacity: 0.5; -} - .bar-row { display: grid; grid-template-columns: minmax(104px, 180px) 1fr minmax(64px, auto); @@ -830,10 +827,6 @@ def _css() -> str: background: var(--hover-bg); } -tbody:hover tr:not(:hover) { - opacity: 0.5; -} - .empty-state { margin: 0; padding: 14px;