From 2cb827bc922c3f1842dca0a02deafd98c74db21a Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Mon, 20 Jul 2026 19:20:28 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=ED=82=A4=EB=B3=B4?=
 =?UTF-8?q?=EB=93=9C=20=ED=83=90=EC=83=89=EC=9D=84=20=EC=9C=84=ED=95=9C=20?=
 =?UTF-8?q?skip-link=20=ED=8F=AC=EC=BB=A4=EC=8A=A4=20=EC=83=81=ED=83=9C=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`<main id="main-content" tabindex="-1">` 요소에 `:focus` 대신 `:focus-visible`을 적용하여 마우스 클릭 시에는 포커스 윤곽선이 보이지 않지만, 키보드 탐색(Tab) 시에는 시각적 포커스 윤곽선이 표시되도록 개선했습니다.
---
 .jules/palette.md            | 4 ++++
 python/fast_mlsirm/report.py | 5 +++++
 2 files changed, 9 insertions(+)

diff --git a/.jules/palette.md b/.jules/palette.md
index 74cddb7ad..90198e8bc 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-20 - Skip-to-Content Link Target Focus Outline
+**Learning:** We learned that adding `outline: none` to the skip-to-content target element (`<main tabindex="-1">`) correctly hides the outline for mouse interactions, but it entirely breaks keyboard navigation accessibility because users using the `tab` key will have no visual indicator of where their focus is.
+**Action:** When overriding the default focus outline on a target container (like `<main id="main-content" tabindex="-1">`) with `outline: none;` to prevent it from showing on mouse clicks, always provide a `main:focus-visible` rule (e.g., `outline: 3px solid #0f766e;`) so keyboard users still get a visible focus indicator.
diff --git a/python/fast_mlsirm/report.py b/python/fast_mlsirm/report.py
index 30ee4276b..6f41764e3 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 #0f766e;
+  outline-offset: 3px;
+}
+
 .hero {
   min-height: 172px;
   display: flex;