🎨 Palette: 키보드 사용성 향상을 위한 테이블 및 코드 컨테이너 포커스 스타일링

[seonghobae]

💡 What
fast_mlsirm/scoring/essay/report_html.py의 HTML 리포트 CSS에 .table-scroll 및 pre 요소의 마우스 클릭(pointer focus) 시 포커스 링을 숨기는 규칙(:focus:not(:focus-visible) { outline: none; })을 추가했습니다. 키보드 네비게이션 시에는 :focus-visible 규칙을 통해 포커스 링이 정상적으로 나타나도록 유지했습니다.
이에 따라 관련 테스트 파일(test_scoring_essay_report_html.py, test_scoring_essay_report_pointer_focus.py)의 assertion도 함께 업데이트했습니다.

🎯 Why
테이블(table-scroll)과 코드 블록(pre)은 스크롤이 가능하도록 tabindex="0"이 설정되어 있는데, 마우스 클릭으로 이 요소들과 상호작용할 때 브라우저 기본 포커스 링이 두껍게 나타나 시각적으로 거슬리고(noise) 디자인 완성도를 떨어뜨리는 문제가 있었습니다.

📸 Before/After

• Before: 마우스 클릭 시 두꺼운 Highlight 색상의 포커스 링이 나타남.
• After: 마우스 클릭 시 포커스 링이 나타나지 않으며, Tab 키를 이용한 키보드 네비게이션 시에만 포커스 링이 나타남.

♿ Accessibility
마우스/터치 유저의 시각적 불편함을 해소하면서도, 키보드 전용 사용자를 위한 포커스 인디케이터(Focus Indicator)는 온전히 보존하여 WCAG 포커스 가시성 요건을 충족했습니다.

---

PR created automatically by Jules for task 18271883918546270827 started by @seonghobae

---

Summary by CodeRabbit

• Accessibility

  • Improved focus styling in reports by hiding outlines for pointer-focused scrollable tables and preformatted content while preserving visible keyboard-focus indicators.

• Tests

  • Added regression coverage to verify accessible focus behavior across supported report elements.

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 08d384d0-1da7-41b0-a790-149018cc3692

📥 Commits

Reviewing files that changed from the base of the PR and between 04d0bc2 and 6bbb66e.

📒 Files selected for processing (3)

• python/fast_mlsirm/scoring/essay/report_html.py
• tests/test_scoring_essay_report_html.py
• tests/test_scoring_essay_report_pointer_focus.py

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.

---

📝 Walkthrough

Walkthrough

The report CSS now suppresses outlines for pointer-focused .table-scroll and pre elements. Keyboard focus remains visibly styled. Tests verify both behaviors.

Changes

Focus outline accessibility

Layer / File(s)	Summary
Conditional focus styling and regression coverage python/fast_mlsirm/scoring/essay/report_html.py, tests/test_scoring_essay_report_html.py, tests/test_scoring_essay_report_pointer_focus.py	The renderer adds :focus:not(:focus-visible) outline suppression for .table-scroll and pre. Tests verify pointer-focus suppression and visible keyboard-focus outlines.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Merge Risk: ⚪ Minimal · up to 6bbb6

This localized styling change hides focus rings for pointer interaction while preserving keyboard-visible focus indicators, with matching test updates; no actionable merge-blocking risk remains beyond normal checks and review.

Possibly related PRs

• ContextualWisdomLab/fast-mlsirm#561: Both changes update accessibility-focused CSS and tests for non-keyboard and keyboard focus.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the focus styling changes for tables and code containers, including the keyboard usability objective.
Docstring Coverage	✅ Passed	Docstring check was indeterminate for this PR — some files could not be analyzed in time. Not blocking.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch palette-focus-visible-18271883918546270827

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[devin-ai-integration]

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no bugs or issues to report.