🎨 Palette: [UX improvement] HTML 리포트 접근성 및 사용성 개선 - #526
Conversation
- `role="status"`를 사용하여 비어있는 상태(empty-state)가 스크린 리더에서 올바르게 읽히도록 개선 - 숫자 데이터 가독성 향상을 위해 테이블 셀에 `font-variant-numeric: tabular-nums;` 적용 - 테이블 행(row)에 대한 hover 격리(isolation) 및 트랜지션 적용으로 시각적 피드백 제공 - 사용자의 OS 애니메이션 줄이기 설정(prefers-reduced-motion)을 지원하는 미디어 쿼리 추가 - 키보드 내비게이션 사용자를 위한 `main` 태그의 focus outline 처리 및 skip-link의 `focus-visible` 개선
|
👋 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 New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
📝 WalkthroughWalkthroughThe essay score report renderer now uses status semantics for empty states and adds focus, numeric alignment, hover, and reduced-motion styling. Tests and changelogs document the updated HTML and CSS behavior. ChangesEssay report accessibility
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
seonghobae
left a comment
seonghobae
left a comment
There was a problem hiding this comment.
@jules Please revise this exact head before merge:
- Preserve reliable skip-link exposure. Keep
.skip-link:focus { top: 8px; }so any actual focus—including assistive-technology or programmatic focus—reveals the link. Use:focus-visibleonly to refine the visible outline. Do not suppress the main landmark indicator withmain:focus { outline: none; }; remove that rule and retain a positivemain:focus-visiblestyle. - Remove
tbody:hover tr:not(:hover) { opacity: 0.5; }. Applying opacity to entire non-hovered rows dims text, borders, controls, and focus indicators and can reduce effective contrast. The subtle hovered-row background is sufficient; keep its reduced-motion handling. - Add deterministic regression assertions for the CSS contract: the skip link is revealed on
:focus, reduced-motion override is present, tabular numerals are present, and row opacity dimming is absent. - Update
docs/changelog.d/essay-score-report-html.mdso the authoritative Unreleased changelog records the accessibility refinement. Also revise the new.Jules/palette.mdlearning to avoid unsupported claims such as “extreme eye strain” or layout shifting from proportional numerals.
The role="status" empty-state change and tabular-numeral styling are otherwise acceptable. Keep the PR narrowly scoped and rerun the exact-head CI, SAST, Security Scan, and CodeRabbit review.
|
@jules Exact-head CI on |
요청하신 대로 |
1c84ce2 to
079afa7
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 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 @.Jules/palette.md:
- Around line 23-25: Correct the dated learning entry in the “Status Semantics
and Numeric Alignment for Reports” section so it is not dated later than the
August 4, 2026 review date; use the actual authoring date, or move the entry to
after August 5, 2026 while preserving its content.
In `@CHANGELOG.md`:
- Line 19: Regenerate CHANGELOG.md from the current fragments using
scripts/render_changelog_fragments.py with the --update option, and commit only
the resulting changelog synchronization. Then rerun the exact-head CI, Security
Scan, SAST, and review gates.
In `@tests/test_scoring_essay_report_html.py`:
- Around line 97-102: Update the assertions in the scoring essay report HTML
test to verify the rendered `.skip-link:focus-visible` rule includes its
keyboard-focus outline indicator, alongside the existing skip-link focus and
accessibility checks.
🪄 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: f34a629d-ad6a-437e-83c7-a4399c7e4881
📒 Files selected for processing (5)
.Jules/palette.mdCHANGELOG.mddocs/changelog.d/essay-score-report-html.mdpython/fast_mlsirm/scoring/essay/report_html.pytests/test_scoring_essay_report_html.py
1 participant
What
role="status"regions.font-variant-numeric: tabular-numsto report table cells for more stable numeric comparison.:focus, while using:focus-visiblefor a strong author-supplied focus indicator on the skip link and main landmark.prefers-reduced-motionby reducing transitions and animations.Boundaries
This is a narrowly scoped standalone-report accessibility refinement. It does not claim full WCAG conformance, scoring validity, fairness, reliability, interchangeability, security certification, or authorization for consequential deployment.
Validation required before merge
Created from the Palette task initiated by @seonghobae.
Summary by CodeRabbit
Accessibility Improvements
Presentation
Documentation
Tests