From 1eb0b7e69095af6f05d13426c23e5fe4414be137 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Thu, 16 Jul 2026 19:13:29 +0000 Subject: [PATCH 1/4] feat: Add focus-visible style for skip link target Added a `:focus-visible` outline to the main content container in the HTML report template. This ensures keyboard navigation users can clearly see when they've correctly skipped to the content, while keeping the outline hidden for mouse clicks. --- .jules/palette.md | 4 ++++ python/fast_mlsirm/report.py | 6 ++++++ 2 files changed, 10 insertions(+) diff --git a/.jules/palette.md b/.jules/palette.md index 74cddb7ad..4f2291250 100644 --- a/.jules/palette.md +++ b/.jules/palette.md @@ -19,3 +19,7 @@ ## 2024-07-13 - CLI Debugging Stack Traces **Learning:** Adding a `FAST_MLSIRM_DEBUG` bypass to user-friendly `try/except` blocks is crucial for DX. Otherwise, unexpected runtime errors during development will be swallowed into generic stderr messages, hiding the stack trace needed to actually fix the bug. **Action:** When adding `try-except` blocks to Python CLI subcommands to improve Developer Experience (DX) by preventing raw tracebacks for users, include a debug bypass (e.g., `if os.environ.get("FAST_MLSIRM_DEBUG"): raise`) in *all* catch blocks (including `RuntimeError` and `Exception`) to ensure tracebacks aren't swallowed during local development and debugging. + +## 2024-07-16 - Focus-Visible for Skip Link Targets +**Learning:** While `main:focus { outline: none; }` prevents ugly focus outlines when mouse users click into the main content, it breaks accessibility for keyboard users using the skip-to-content link, as they lose visual track of their focus. +**Action:** Use `:focus-visible` rather than `:focus` in CSS to ensure focus outlines appear only during keyboard navigation and not on mouse clicks, specifically on target elements of skip links like `
`. diff --git a/python/fast_mlsirm/report.py b/python/fast_mlsirm/report.py index 30ee4276b..1398dba31 100644 --- a/python/fast_mlsirm/report.py +++ b/python/fast_mlsirm/report.py @@ -498,6 +498,12 @@ def _css() -> str: outline: none; } +main:focus-visible { + outline: 3px solid #0f766e; + outline-offset: 2px; + border-radius: 4px; +} + .hero { min-height: 172px; display: flex; From a88b6fea2fd45e3cc2331f9ad9bc5d11554c9be0 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Thu, 16 Jul 2026 19:20:19 +0000 Subject: [PATCH 2/4] feat: Add focus-visible style for skip link target Added a `:focus-visible` outline to the main content container in the HTML report template. This ensures keyboard navigation users can clearly see when they've correctly skipped to the content, while keeping the outline hidden for mouse clicks. From d4fbbe5d7bb4191953cd2e964fe31f59bb7f50af Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Thu, 16 Jul 2026 19:41:41 +0000 Subject: [PATCH 3/4] feat: Add focus-visible style for skip link target Added a `:focus-visible` outline to the main content container in the HTML report template. This ensures keyboard navigation users can clearly see when they've correctly skipped to the content, while keeping the outline hidden for mouse clicks. From 2a7815de673b7dba6c98fa2e1151a98a4fd5dab4 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Thu, 16 Jul 2026 20:07:03 +0000 Subject: [PATCH 4/4] feat: Add focus-visible style for skip link target Added a `:focus-visible` outline to the main content container in the HTML report template. This ensures keyboard navigation users can clearly see when they've correctly skipped to the content, while keeping the outline hidden for mouse clicks.