Make docs code-copy controls accessible - #403
Conversation
|
Warning Review limit reached
Next review available in: 37 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the 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 configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (3)
📝 WalkthroughWalkthroughDocumentation code blocks now use accessible copy controls with clipboard status feedback, syntax highlighting, expandable long blocks, and dedicated markdown rendering for non-demo fences. ChangesDocumentation code-copy flow
Estimated code review effort: 3 (Moderate) | ~30 minutes Sequence Diagram(s)sequenceDiagram
participant Markdown
participant XyDocsMarkdownTransformer
participant code_block
participant CopyButton
participant Clipboard
Markdown->>XyDocsMarkdownTransformer: provide code fence
XyDocsMarkdownTransformer->>code_block: render non-demo fence
code_block->>CopyButton: render accessible copy control
CopyButton->>Clipboard: copy code
Clipboard-->>CopyButton: report success or failure
CopyButton-->>Markdown: show copy status
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
docs/app/xy_docs/code.py (1)
65-97: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick winAlign the
group-datavariants with the button attribute.Change both variants to
group-data-[xy-code-copy-state=copied]. The inline selectors currently keep the icon swap working; remove them after the corrected variants are in place.🤖 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 `@docs/app/xy_docs/code.py` around lines 65 - 97, Update both icon class_name values in the code-copy button to use the group-data-[xy-code-copy-state=copied] variant, matching the data-xy-code-copy-state attribute. After correcting the variants, remove the redundant inline icon-swap selectors from the button’s style configuration.
🤖 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 `@docs/app/xy_docs/code.py`:
- Around line 60-89: Update the button created in the component’s super().create
call to include a persistent visually hidden span containing the reactive label,
such as the existing label expression, alongside the icons. Keep aria_live and
aria_atomic unchanged so status updates modify live-region text as well as the
button attributes.
---
Nitpick comments:
In `@docs/app/xy_docs/code.py`:
- Around line 65-97: Update both icon class_name values in the code-copy button
to use the group-data-[xy-code-copy-state=copied] variant, matching the
data-xy-code-copy-state attribute. After correcting the variants, remove the
redundant inline icon-swap selectors from the button’s style configuration.
🪄 Autofix (Beta)
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: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 4800fb1b-56c4-46d6-b5d9-79f0da7bd745
📒 Files selected for processing (4)
docs/app/tests/test_code_copy.pydocs/app/xy_docs/code.pydocs/app/xy_docs/examples.pydocs/app/xy_docs/markdown.py
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
All reported issues were addressed across 4 files
Tip: instead of fixing issues one by one fix them all with cubic
Re-trigger cubic
There was a problem hiding this comment.
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 `@docs/app/tests/test_code_copy.py`:
- Around line 15-45: Extend the tests around the existing serialized code-block
assertions with a browser test that loads the built documentation and enumerates
every visible production copy button. Compute each button’s accessible name and
fail when any visible button has an empty name, preserving the existing
single-code-block assertions while validating the contract across the full built
documentation DOM.
🪄 Autofix (Beta)
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: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: f18df519-00a9-468d-be81-31ce5a551243
📒 Files selected for processing (3)
docs/app/tests/test_code_copy.pydocs/app/xy_docs/code.pydocs/app/xy_docs/xy_docs.py
Merging this PR will not alter performance
Comparing 
Footnotes
|
1 participant
What changed
aria-livefeedback, and distinct copied/failed labels.Why
The locked upstream code component rendered icon-only buttons whose icon was hidden from assistive technology. Across the docs, those controls therefore had no accessible name or perceivable success state.
Impact
Code-copy controls now expose
Copy code, remain keyboard-focusable as native buttons, announceCopiedorCopy failed, swap to a check icon on success, and reset after 1.5 seconds.Validation
docs/app/.venv/bin/pytest -q docs/app/tests— 105 passedFixes #395
Summary by CodeRabbit