diff --git a/.jules/palette.md b/.jules/palette.md index 74cddb7ad..dd4d44ddc 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-14 - Skip-to-Content Target Focus Visibility +**Learning:** When adding `tabindex="-1"` and `outline: none;` to the primary content container (`
`) to receive focus from a skip-to-content link, keyboard users navigating via Tab may lose track of their position since the visual outline is hidden to prevent display on mouse clicks. +**Action:** Use the `:focus-visible` pseudo-class (e.g., `main:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }`) on the skip-to-content target element. This ensures that while mouse interactions don't show the outline, keyboard navigation triggers a clear visual indicator so users know where they are. diff --git a/python/fast_mlsirm/report.py b/python/fast_mlsirm/report.py index 30ee4276b..c5c817cff 100644 --- a/python/fast_mlsirm/report.py +++ b/python/fast_mlsirm/report.py @@ -498,6 +498,11 @@ def _css() -> str: outline: none; } +main:focus-visible { + outline: 3px solid var(--teal); + outline-offset: 3px; +} + .hero { min-height: 172px; display: flex;