Skip to content

fix(report): make export blocks keyboard-scrollable - #502

Merged
seonghobae merged 9 commits into
mainfrom
palette-a11y-scrollable-pre-8380081948291105050
Aug 4, 2026
Merged

fix(report): make export blocks keyboard-scrollable#502
seonghobae merged 9 commits into
mainfrom
palette-a11y-scrollable-pre-8380081948291105050

Conversation

@seonghobae

@seonghobae seonghobae commented Aug 4, 2026

Copy link
Copy Markdown
Contributor

Accessibility gap

Generated diagnostics reports expose full-precision JSON and CSV exports inside horizontally scrollable <pre> blocks. Those blocks were not keyboard-focusable, so keyboard-only users could be unable to inspect content beyond the visible horizontal viewport.

Implemented correction

  • make JSON and CSV export blocks keyboard-focusable with tabindex="0";
  • expose each export as a named region with a deterministic, escaped aria-label;
  • add a visible :focus-visible outline for the scrollable export surface;
  • retain the existing visible focus treatment on native <summary> controls;
  • add regression coverage for the rendered semantics and focus CSS;
  • add an authoritative changelog fragment and correct the repository palette record date.

Scope boundary

This changes report accessibility and presentation only. It does not alter report data, numeric precision, export serialization, psychometric calculations, dependencies, or workflow policy.

Verification gate

Merge only after the exact head passes the report accessibility and exact-value suites, changelog render parity, complete CI, Security Scan, SAST, and final review.

가로 스크롤이 발생하는 `<pre>` 내보내기 블록에 키보드 접근성 및 시각적 피드백을 추가했습니다.

- `<pre>` 태그에 `tabindex="0"`, `role="region"`, `aria-label`을 부여하여 키보드 탐색 및 스크롤을 지원합니다.
- `:focus-visible` 아웃라인을 추가하여 초점 상태를 명확히 했습니다.
- `<summary>` 태그에 hover 트랜지션 색상을 추가하여 시각적 피드백을 강화했습니다.
@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 Aug 4, 2026

Copy link
Copy Markdown
Contributor

Warning

Review limit reached

@seonghobae, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 33 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 89e54830-b9aa-4d14-801f-69e2a5f8f161

📥 Commits

Reviewing files that changed from the base of the PR and between b42d141 and 50262ba.

📒 Files selected for processing (6)
  • .Jules/palette.md
  • CHANGELOG.md
  • docs/changelog.d/502-scrollable-export-accessibility.md
  • python/fast_mlsirm/report.py
  • python/fast_mlsirm/report_exact_values.py
  • tests/test_report_scrollable_exports_accessibility.py

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

Copy link
Copy Markdown
Contributor Author

@jules Release-hardening follow-up for the current accessibility PR:

  1. Correct the new .Jules/palette.md entry date from 2025-03-02 to 2026-08-04; preserve the existing learning text.
  2. Keep the added accessibility regression tests green. They require both export <pre> regions to retain role="region", a safely escaped aria-label, tabindex="0", visible :focus-visible treatment, and reduced-motion behavior.
  3. Render the new docs/changelog.d/502-scrollable-export-accessibility.md fragment into tracked CHANGELOG.md with the repository renderer.
  4. Run the focused report/accessibility tests and all exact-head required checks. Do not weaken escaping, focus, reduced-motion, changelog, or coverage gates.

@seonghobae
seonghobae marked this pull request as draft August 4, 2026 07:36

Copy link
Copy Markdown
Contributor Author

@jules Complete this accessibility fix on the current branch without changing the rendered behavior: run the repository changelog renderer so docs/changelog.d/502-report-export-keyboard-accessibility.md is included in tracked CHANGELOG.md; verify tests/test_report_accessibility.py, tests/test_report_exact_values.py, and changelog parity; commit only deterministic release-record changes. The new accessibility regression and corrected palette date are already committed. Do not add dependencies, workflows, or unrelated styling.

@seonghobae seonghobae changed the title 🎨 Palette: 스크롤 가능한 코드 블록의 키보드 접근성 개선 fix(report): make export blocks keyboard-scrollable Aug 4, 2026

Copy link
Copy Markdown
Contributor Author

@jules The duplicate changelog fragment has been removed; keep docs/changelog.d/502-report-export-keyboard-accessibility.md as the sole authoritative note. Please render it into tracked CHANGELOG.md, run the focused tests plus full exact-head gates, and leave Draft until final review is green.

@google-labs-jules

Copy link
Copy Markdown

@jules Release-hardening follow-up for the current accessibility PR:

  1. Correct the new .Jules/palette.md entry date from 2025-03-02 to 2026-08-04; preserve the existing learning text.
  2. Keep the added accessibility regression tests green. They require both export <pre> regions to retain role="region", a safely escaped aria-label, tabindex="0", visible :focus-visible treatment, and reduced-motion behavior.
  3. Render the new docs/changelog.d/502-scrollable-export-accessibility.md fragment into tracked CHANGELOG.md with the repository renderer.
  4. Run the focused report/accessibility tests and all exact-head required checks. Do not weaken escaping, focus, reduced-motion, changelog, or coverage gates.

요청하신 대로 다음과 같이 조치했습니다.

  1. .Jules/palette.md의 새로운 항목 날짜를 2025-03-02에서 2026-08-04로 수정하고 내용은 유지했습니다.
  2. 접근성 회귀 테스트가 모두 정상적으로 통과되도록 <pre>의 역할(role), aria-label, tabindex, focus-visible 속성을 정확히 적용했습니다.
  3. 변경 사항 로그를 docs/changelog.d/502-scrollable-export-accessibility.md에 작성하고 scripts/render_changelog_fragments.py --update CHANGELOG.md 명령어를 통해 CHANGELOG.md에 성공적으로 반영했습니다.
  4. 연관된 테스트(tests/test_report.py, tests/test_report_accessibility.py, tests/test_report_exact_values.py)를 다시 실행하여 모두 정상적으로 통과됨을 확인했습니다.

seonghobae and others added 2 commits August 4, 2026 07:42
가로 스크롤이 발생하는 `<pre>` 내보내기 블록에 키보드 접근성 및 시각적 피드백을 추가했습니다.

- `<pre>` 태그에 `tabindex="0"`, `role="region"`, `aria-label`을 부여하여 키보드 탐색 및 스크롤을 지원합니다.
- `:focus-visible` 아웃라인을 추가하여 초점 상태를 명확히 했습니다.
- `<summary>` 태그에 hover 트랜지션 색상을 추가하여 시각적 피드백을 강화했습니다.
- CHANGELOG 항목을 업데이트하고 palette.md 저널의 날짜를 수정했습니다.

Copy link
Copy Markdown
Contributor Author

@coderabbitai review

@coderabbitai

coderabbitai Bot commented Aug 4, 2026

Copy link
Copy Markdown
Contributor
✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@seonghobae
seonghobae marked this pull request as ready for review August 4, 2026 07:56

Copy link
Copy Markdown
Contributor Author

@coderabbitai review

@coderabbitai

coderabbitai Bot commented Aug 4, 2026

Copy link
Copy Markdown
Contributor
✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@seonghobae
seonghobae enabled auto-merge (squash) August 4, 2026 07:56

Copy link
Copy Markdown
Contributor Author

@coderabbitai review

@coderabbitai

coderabbitai Bot commented Aug 4, 2026

Copy link
Copy Markdown
Contributor
✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

Copy link
Copy Markdown
Contributor Author

@coderabbitai review

@coderabbitai

coderabbitai Bot commented Aug 4, 2026

Copy link
Copy Markdown
Contributor
✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@seonghobae
seonghobae merged commit 769bf82 into main Aug 4, 2026
29 of 30 checks passed
@seonghobae
seonghobae deleted the palette-a11y-scrollable-pre-8380081948291105050 branch August 4, 2026 08:17
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