Skip to content

🎨 Palette: Improve HTML report data table accessibility and typography - #368

Merged
seonghobae merged 2 commits into
mainfrom
palette-html-report-a11y-17049097836170533854
Jul 31, 2026
Merged

🎨 Palette: Improve HTML report data table accessibility and typography#368
seonghobae merged 2 commits into
mainfrom
palette-html-report-a11y-17049097836170533854

Conversation

@seonghobae

@seonghobae seonghobae commented Jul 31, 2026

Copy link
Copy Markdown
Contributor

💡 What: Updated the HTML report generation logic so that the first cell of each data row is rendered as a <th scope="row"> instead of a <td>. Added font-variant-numeric: tabular-nums to base table cell styles and ensured proper baseline CSS styling (e.g. font-weight: normal; on tbody th). Added documentation to .jules/palette.md.

🎯 Why: Rendering the first column of data rows as a row header (<th scope="row">) greatly improves the experience for screen reader users by programmatically associating row data with its identifying column. Using tabular numbers prevents numerical jitter and improves column readability in data-heavy reports.

📸 Before/After: Visual regression is prevented by applying consistent styling rules across all cell variations.

♿ Accessibility: Ensures WCAG compliance for data tables by correctly semantically mapping row identifiers.


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

Summary by CodeRabbit

  • 접근성 개선

    • HTML 데이터 테이블의 첫 번째 열을 행 머리글로 제공해 보조 기술의 표 구조 이해를 개선했습니다.
  • 스타일 개선

    • 숫자 열을 일관되게 정렬하고, 열 머리글과 행 머리글의 스타일을 구분했습니다.
    • 마지막 행의 하단 테두리 표시를 자연스럽게 조정했습니다.

@google-labs-jules

Copy link
Copy Markdown

👋 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

coderabbitai Bot commented Jul 31, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

📝 Walkthrough

Walkthrough

HTML 보고서 테이블의 첫 번째 열이 행 헤더로 렌더링됩니다. CSS는 열 헤더와 행 헤더를 구분하고, 숫자 정렬 및 행 헤더 스타일을 적용합니다. 관련 접근성 지침도 학습 문서에 추가되었습니다.

Changes

HTML 테이블 접근성 및 스타일

Layer / File(s) Summary
행 헤더 마크업
python/fast_mlsirm/report.py
각 테이블 행의 첫 번째 셀을 <th scope="row">로 출력하고, 나머지 셀은 <td>로 출력합니다.
헤더 및 숫자 스타일
python/fast_mlsirm/report.py, .jules/palette.md
thead th, tbody th, td 선택자를 분리합니다. 숫자에 tabular-nums를 적용하고, 행 헤더의 기본 굵기와 마지막 행의 하단 테두기를 지정합니다. 관련 접근성 지침을 기록합니다.

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

Possibly related PRs

Suggested reviewers: copilot

🚥 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 제목은 HTML 보고서 데이터 테이블의 접근성과 타이포그래피 개선이라는 주요 변경 사항을 명확하고 간결하게 설명합니다.
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-html-report-a11y-17049097836170533854

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

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
python/fast_mlsirm/report.py (1)

320-327: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

새 접근성 계약에 대한 회귀 테스트를 추가하세요.

제공된 tests/test_report.py 테스트는 테이블과 접근성 컨테이너의 존재만 확인합니다. <th scope="row">, 이후 셀의 <td> 유지, tabular-nums, tbody th 기본 굵기는 직접 검증하지 않습니다.

다음 검증을 tests/test_report.py에 추가하세요.

제안된 테스트 변경
 assert "<caption>Item Fit diagnostics table</caption>" in html
+assert '<th scope="row">0</th>' in html
+assert '<td>1</td>' in html
+assert "font-variant-numeric: tabular-nums;" in html
+assert "tbody th {" in html

Also applies to: 685-705

🤖 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/report.py` around lines 320 - 327, Extend the report
rendering tests in test_report.py to verify the accessibility contract
implemented by the row-building logic: assert the first cell uses <th
scope="row">, subsequent cells remain <td>, and the rendered table applies
tabular-nums with the expected default tbody th font weight.
🤖 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.

Nitpick comments:
In `@python/fast_mlsirm/report.py`:
- Around line 320-327: Extend the report rendering tests in test_report.py to
verify the accessibility contract implemented by the row-building logic: assert
the first cell uses <th scope="row">, subsequent cells remain <td>, and the
rendered table applies tabular-nums with the expected default tbody th font
weight.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 17ab2587-9faa-4b0b-8eea-e20916efe9d2

📥 Commits

Reviewing files that changed from the base of the PR and between a3123a2 and 06b9f84.

📒 Files selected for processing (2)
  • .jules/palette.md
  • python/fast_mlsirm/report.py

@seonghobae
seonghobae merged commit 42d485f into main Jul 31, 2026
@seonghobae
seonghobae deleted the palette-html-report-a11y-17049097836170533854 branch July 31, 2026 12:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant