🎨 Palette: Improve HTML Report Table Accessibility and Data Readability - #312
🎨 Palette: Improve HTML Report Table Accessibility and Data Readability#312seonghobae wants to merge 1 commit into
Conversation
…ow" and tabular-nums Changed the first column of the data tables in HTML reports to use `<th scope="row">` to improve screen reader accessibility. Also added `font-variant-numeric: tabular-nums;` to table cells to ensure better vertical alignment of numbers. Updated CSS selectors to maintain existing border styles and fix missing base styles.
|
👋 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. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughHTML 리포트 테이블의 첫 번째 열을 행 헤더로 렌더링하고, 헤더·본문 셀 스타일을 세분화했습니다. 숫자 정렬을 위한 CSS와 관련 접근성 지침도 추가되었습니다. ChangesHTML 리포트 테이블 접근성
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 |
There was a problem hiding this comment.
Pull request overview
This PR improves the generated HTML report tables by upgrading the first column of each <tbody> row to a proper row header (<th scope="row">) for better screen-reader context, and by applying tabular numeric glyphs to improve visual alignment in dense numeric tables.
Changes:
- Update HTML table body rendering to emit
<th scope="row">for the first (identifying) column in each row. - Refine table CSS selectors to distinguish header (
thead th) vs row headers (tbody th) and applyfont-variant-numeric: tabular-nums;for aligned numeric output. - Document the accessibility/readability pattern in
.jules/palette.md.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| python/fast_mlsirm/report.py | Emits row headers for first-column cells and updates table CSS to support the new semantics and numeric alignment. |
| .jules/palette.md | Records the table accessibility/readability guidance for future report HTML changes. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| cells = "" | ||
| for i, column in enumerate(columns): | ||
| value = escape(_format_value(row.get(column, ''))) | ||
| if i == 0: | ||
| cells += f'<th scope="row">{value}</th>' | ||
| else: | ||
| cells += f"<td>{value}</td>" | ||
| body_rows.append(f"<tr>{cells}</tr>") |
| tbody tr:last-child th, | ||
| tr:last-child td { | ||
| border-bottom: 0; | ||
| } |
|
중복 정리: Generated by Claude Code |
알겠습니다. 해당 작업이 #187과 중복되어 닫혔음을 확인하였으며, 이 과업에 대한 진행을 중단하겠습니다. |
💡 What: The UX enhancement changes the first column in report tables from
<td>to<th scope="row">, and addsfont-variant-numeric: tabular-nums;to table data cells.🎯 Why: Standard table bodies with identifying first columns using
<td>can cause degraded context for screen reader users. The default non-tabular numeric fonts also misalign decimal numbers vertically, making them harder to read in large matrices.📸 Before/After: Tables now announce properly in screen readers, and numerical output aligns on the axes.
♿ Accessibility: Improves programmatic table semantics and visual readability for dyscalculia or cognitive processing of large data sets.
PR created automatically by Jules for task 5751038696920746185 started by @seonghobae
Summary by CodeRabbit