🎨 Palette: [UX improvement] HTML 리포트 접근성 및 시각적 개선

[seonghobae]

💡 What:

• _identifier_list의 empty state를 <p> 태그에서 <div role="status">로 변경하여 ARIA 라이브 영역으로 지정했습니다.
• CSS에 hover-focus isolation (tbody:hover tr:not(:hover) { opacity: 0.5; })을 추가하여 표의 특정 행에 마우스를 올렸을 때 다른 행들의 불투명도를 낮췄습니다.
• CSS에 main:focus { outline: none; }을 추가하여 마우스 클릭 시 불필요한 포커스 아웃라인이 나타나지 않도록 했습니다 (focus-visible은 유지되어 키보드 접근성 보장).

🎯 Why:

• 스크린 리더 사용자가 데이터가 없는 상태(empty state)를 즉각적으로 인식하지 못하는 문제를 해결합니다.
• 데이터가 밀집된 표(dense data table)에서 특정 행의 데이터를 읽거나 분석할 때 시각적 혼란을 줄이고 집중도를 높여줍니다.
• 마우스 클릭 시 <main> 영역 전체에 아웃라인이 생기는 시각적 버그를 해결하여 더 깔끔한 UI를 제공합니다.

📸 Before/After:

• Before: 빈 상태 메시지가 단순 텍스트로 렌더링되며, 표 행을 가리킬 때 시각적 피드백이 단순한 배경색 변경에 그쳤고, Skip to content 등의 기능으로 <main> 영역 클릭 시 굵은 아웃라인이 표시됨.
• After: 빈 상태 메시지가 role="status"로 렌더링되어 스크린 리더가 즉시 읽어주며, 표에서 특정 행에 마우스를 올리면 다른 행들이 희미해져 선택한 데이터에 온전히 집중할 수 있음. 또한 마우스 클릭 시 불필요한 아웃라인이 제거됨.

♿ Accessibility:

• role="status"를 통해 빈 상태 메시지에 대한 스크린 리더의 라이브 영역 지원 개선
• :focus와 :focus-visible을 분리하여 마우스 사용자의 시각적 방해 요소는 제거하면서도 키보드 내비게이션 사용자의 접근성(초점 가시성)은 그대로 보장

---

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

Summary by CodeRabbit

• Accessibility

  • Improved keyboard focus visibility in standalone HTML reports.
  • Empty validation states now use a semantic status message.

• Visual Improvements

  • Added smoother table-row opacity transitions.
  • Highlighted hovered rows while dimming non-hovered rows.

• Tests

  • Updated report and validation checks to reflect the accessibility and styling improvements.

[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]

📝 Walkthrough

Walkthrough

The change updates standalone report focus and table-row styling. It changes empty validation identifier output to a status-region <div>. Related tests now assert the updated HTML and CSS.

Changes

HTML report updates

Layer / File(s)	Summary
Report styling and coverage python/fast_mlsirm/scoring/essay/report_html.py, tests/test_scoring_essay_report_html.py	The report removes the default main focus outline, preserves keyboard-visible focus styling, and dims non-hovered table rows. Tests assert the updated CSS.
Validation report markup and formatting python/fast_mlsirm/scoring/essay/validation_report_html.py, tests/test_scoring_essay_validation_report_html.py	Empty identifier lists render as <div class="empty-state" role="status">. Several expressions and strings are reformatted without behavior changes. Tests assert the new markup.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• ContextualWisdomLab/fast-mlsirm#521: Refines the same report renderer and related accessibility tests.
• ContextualWisdomLab/fast-mlsirm#526: Overlaps on focus styling, row hover effects, and empty-state status markup.
• ContextualWisdomLab/fast-mlsirm#548: Uses related focus-visible styling and table-row opacity behavior in another report CSS file.

🚥 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 summarizes the pull request's accessibility and visual UX improvements to the HTML report.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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-ux-html-report-a11y-12954787463374055146

---

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@python/fast_mlsirm/scoring/essay/report_html.py`:
- Around line 188-190: Update the table hover CSS rules in the report HTML
styling to remove the row-level opacity applied by tbody:hover tr:not(:hover),
keeping table-row content—including text, borders, and focus indicators—at full
opacity while preserving the existing hover background behavior.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: c97e0daf-a4ea-4f75-b987-26e3bbc87abd

📥 Commits

Reviewing files that changed from the base of the PR and between 84f3251 and bceede6.

📒 Files selected for processing (4)

• python/fast_mlsirm/scoring/essay/report_html.py
• python/fast_mlsirm/scoring/essay/validation_report_html.py
• tests/test_scoring_essay_report_html.py
• tests/test_scoring_essay_validation_report_html.py

[coderabbitai]

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Keep table-row content at full opacity.

opacity: 0.5 affects the complete row, including text, borders, and focus indicators. In the light color scheme, this can reduce normal text contrast below the accessible threshold. If a row contains a focusable control, the control can also remain dim while the pointer stays inside tbody. Remove row-level opacity or apply the effect only to non-text decoration.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@python/fast_mlsirm/scoring/essay/report_html.py` around lines 188 - 190,
Update the table hover CSS rules in the report HTML styling to remove the
row-level opacity applied by tbody:hover tr:not(:hover), keeping table-row
content—including text, borders, and focus indicators—at full opacity while
preserving the existing hover background behavior.

[seonghobae]

Closing this mixed-scope UX change rather than merging a regression. The role="status" empty-state improvement is independently useful, but this PR also adds tbody:hover tr:not(:hover) { opacity: 0.5; }, directly conflicting with the contrast-preservation decision in #550, and suppresses the generic main:focus outline. Those changes should not share one acceptance decision. Reintroduce the semantic empty-state change later as a focused, documented regression-tested PR after the canonical report accessibility branches settle; no source from this PR is being merged now.

[seonghobae]

Closing because the proposed bundle is not an accessibility improvement for this static standalone report. role="status" is a live-region contract for content updates/status changes, not ordinary empty content already present at page load. The added peer-opacity rule lowers the rendered contrast of still-active table data, and main:focus { outline: none; } can suppress the user-agent focus indicator outside the narrower :focus-visible case. These changes conflict with the repository's fail-safe focus/contrast policy and add no browser/assistive-technology evidence. The row-header semantics work remains separately governed in PR #556.

[google-labs-jules]

Closing this mixed-scope UX change rather than merging a regression. The role="status" empty-state improvement is independently useful, but this PR also adds tbody:hover tr:not(:hover) { opacity: 0.5; }, directly conflicting with the contrast-preservation decision in #550, and suppresses the generic main:focus outline. Those changes should not share one acceptance decision. Reintroduce the semantic empty-state change later as a focused, documented regression-tested PR after the canonical report accessibility branches settle; no source from this PR is being merged now.

Understood. Acknowledging that this work is now obsolete and stopping work on this task.

[seonghobae]

Closing as not mergeable in its current form. The patch reintroduces tbody:hover tr:not(:hover) { opacity: 0.5; }, which conflicts with the contrast-preserving direction and focused evidence in PR #550, and adds main:focus { outline: none; }, which suppresses an actual-focus indicator rather than preserving a clear keyboard/fallback boundary. The useful empty-state semantic change is separable, but this PR also lacks the required doctoring/changelog and combines it with contradictory presentation behavior. Reopen that semantic improvement as a focused, independently tested slice after #550 is resolved.

[seonghobae]

Closing this automation branch because it conflicts with the accepted accessibility direction and mixes an unrelated static empty-state change into the report styling repair. It reintroduces tbody:hover tr:not(:hover) { opacity: 0.5; }, which PR #550 deliberately removes to preserve peer data contrast, and adds main:focus { outline: none; }, which can suppress the only visible indicator when :focus-visible heuristics do not apply. The static role="status" change also needs a separate dynamic-announcement requirement and assistive-technology test rather than being bundled here. PR #550 remains the canonical focus/contrast repair; row-header semantics are handled separately by #556.

[seonghobae]

Closing rather than merging this mixed change. The peer-row opacity rule reverses the reviewed contrast-preservation contract in #550 by dimming unrelated table data, and main:focus { outline: none; } is an unnecessary global focus override. The independent empty-state semantic change should be proposed only as a narrow, standards-backed PR if it is still absent after current accessibility work merges. Keeping this PR open would reintroduce a known UX/accessibility regression and conflict with the canonical report direction.

[seonghobae]

Closing this automation PR rather than merging the mixed accessibility changes. The new tbody:hover tr:not(:hover) { opacity: 0.5; } deliberately reduces adjacent data contrast during comparison, conflicting with the maintained report-accessibility direction in #550, and main:focus { outline: none; } risks suppressing the focus destination reached through skip navigation. The independent empty-state role="status" idea can be reintroduced in a narrowly scoped, standards-reviewed PR without the contrast/focus regressions or unrelated formatting churn.

[google-labs-jules]

Closing because the proposed bundle is not an accessibility improvement for this static standalone report. role="status" is a live-region contract for content updates/status changes, not ordinary empty content already present at page load. The added peer-opacity rule lowers the rendered contrast of still-active table data, and main:focus { outline: none; } can suppress the user-agent focus indicator outside the narrower :focus-visible case. These changes conflict with the repository's fail-safe focus/contrast policy and add no browser/assistive-technology evidence. The row-header semantics work remains separately governed in PR #556.

Understood. Acknowledging that this work is now obsolete and stopping work on this task.

[google-labs-jules]

Closing as not mergeable in its current form. The patch reintroduces tbody:hover tr:not(:hover) { opacity: 0.5; }, which conflicts with the contrast-preserving direction and focused evidence in PR #550, and adds main:focus { outline: none; }, which suppresses an actual-focus indicator rather than preserving a clear keyboard/fallback boundary. The useful empty-state semantic change is separable, but this PR also lacks the required doctoring/changelog and combines it with contradictory presentation behavior. Reopen that semantic improvement as a focused, independently tested slice after #550 is resolved.

Understood. Acknowledging that this work is now obsolete and stopping work on this task.

[google-labs-jules]

Closing this automation branch because it conflicts with the accepted accessibility direction and mixes an unrelated static empty-state change into the report styling repair. It reintroduces tbody:hover tr:not(:hover) { opacity: 0.5; }, which PR #550 deliberately removes to preserve peer data contrast, and adds main:focus { outline: none; }, which can suppress the only visible indicator when :focus-visible heuristics do not apply. The static role="status" change also needs a separate dynamic-announcement requirement and assistive-technology test rather than being bundled here. PR #550 remains the canonical focus/contrast repair; row-header semantics are handled separately by #556.

Understood. Acknowledging that this work is now obsolete and stopping work on this task.

[google-labs-jules]

Closing rather than merging this mixed change. The peer-row opacity rule reverses the reviewed contrast-preservation contract in #550 by dimming unrelated table data, and main:focus { outline: none; } is an unnecessary global focus override. The independent empty-state semantic change should be proposed only as a narrow, standards-backed PR if it is still absent after current accessibility work merges. Keeping this PR open would reintroduce a known UX/accessibility regression and conflict with the canonical report direction.

Understood. Acknowledging that this work is now obsolete and stopping work on this task.

[google-labs-jules]

Closing this automation PR rather than merging the mixed accessibility changes. The new tbody:hover tr:not(:hover) { opacity: 0.5; } deliberately reduces adjacent data contrast during comparison, conflicting with the maintained report-accessibility direction in #550, and main:focus { outline: none; } risks suppressing the focus destination reached through skip navigation. The independent empty-state role="status" idea can be reintroduced in a narrowly scoped, standards-reviewed PR without the contrast/focus regressions or unrelated formatting churn.

Understood. Acknowledging that this work is now obsolete and stopping work on this task.