Skip to content

docs: accessibility guide with live keyboard demo + README sweep#52

Merged
jaysin586 merged 4 commits into
mainfrom
docs/accessibility
Jul 3, 2026
Merged

docs: accessibility guide with live keyboard demo + README sweep#52
jaysin586 merged 4 commits into
mainfrom
docs/accessibility

Conversation

@jaysin586

Copy link
Copy Markdown
Contributor

Summary

The keyboard/a11y feature (#36) shipped with no discoverable documentation — the README had zero accessibility mentions and the docs site only carried the viewportLabel prop row. This PR makes the accessibility story broadcastable: a full docs guide with an embedded live keyboard demo (same pattern as svelte-virtual-list's), a README Accessibility section, and a full-README accuracy sweep that removed several stale or outright false claims.

Changes

  • 📚 New Accessibility guide (/docs/guides/accessibility, in the sidebar nav): the labeled focusable region, the full keyboard map with follow-bottom semantics, descendant-interaction preservation, reduced motion, respected programmatic scrolling, and the two app-level patterns the component deliberately leaves to consumers (a polite aria-live announcer — virtualized messages are invisible to screen readers off-screen — and a jump-to-newest button via onFollowBottomChange).
  • Embedded live demo — an EmbeddedExampleV2 card running the real component with a "try it with your keyboard" panel: focus state, last scroll key, and (chat-specific) the live Following bottom indicator, so readers can watch PageUp disengage follow and End re-engage it. New reusable InlineExample wrapper mirrors the sibling repo's.
  • 📚 README Accessibility section + keyboard/reduced-motion feature bullets + the missing viewportLabel prop row, plus a new Documentation & Live Examples section linking the guides and all four interactive demos (previously unmentioned).
  • 🔧 README accuracy sweep — removed the stale test-count bullet (counts don't belong in a README), the debug prop row and the dead debug?: boolean from types.ts (accepted but never read — the one small API-surface change here), fixed non-parsing TypeScript in the LLM Streaming example, corrected the mechanics sections to the current architecture (offset-derived heights with margins counted, same-frame pre-paint follow correction), added the missing heightCacheVersion debug field, and gave the TokenMaxing badge descriptive alt text.
  • 📦 Dependency honesty, round-tripped — the sweep briefly removed esm-env as "unused" (no source imports), but the docs build caught that the Svelte compiler injects it into the packaged output; restored, with the README bullet reworded to the accurate claim ("one micro-dependency"). Net package.json change vs main: none.

Note: the demo's ArrowUp behavior is best experienced after #51 lands — this PR is docs-only for the component and merges cleanly either way.

Verification

Docs workspace svelte-check clean and full docs build green with the new page in the output; library svelte-check, unit tests, and pnpm build + publint green after the types.ts change. Demo driven with real keyboard input in a browser (focus / PageUp / End all reflected live in the panel).

🤖 Generated with Claude Code

Commits

  • 9f4465b docs: document accessibility — keyboard navigation, screen readers, reduced motion
  • 97132c8 docs(readme): full accuracy sweep; drop dead debug prop and unused esm-env dep
  • 3fdb38c docs: embed a live keyboard demo in the accessibility guide
  • 0a179ac fix(deps): restore esm-env — the compiled output imports it

jaysin586 and others added 4 commits July 3, 2026 06:38
…educed motion

The keyboard/a11y feature (#36) shipped with no discoverable
documentation: the README had zero accessibility mentions and the docs
site only carried the viewportLabel prop row.

- New Accessibility guide (/docs/guides/accessibility): the labeled
  focusable region, the full keyboard map and its follow-bottom
  semantics, descendant-interaction preservation, reduced-motion
  behavior, respected programmatic scrolling, and the two app-level
  patterns the component deliberately leaves to consumers — aria-live
  announcements for virtualized messages, and pairing
  onFollowBottomChange with a visible jump-to-newest control.
- README: Accessibility section, keyboard/reduced-motion feature
  bullets, and the missing viewportLabel prop row.
- README: descriptive alt text on the TokenMaxing badge.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…m-env dep

README sweep — every claim checked against the current code:

- New "Documentation & Live Examples" section: guide links plus a table
  of the four interactive demos on virtualchat.svelte.page, which the
  README never mentioned.
- Removed the test-count bullet (test counts don't belong in a README
  and it was stale), the `debug` prop row (the prop was accepted but
  never read — also removed from types.ts), and the esm-env caveat on
  the zero-dependencies bullet (the dep was never imported — removed
  from package.json, so the claim is now simply true; publint passes).
- Corrected stale mechanics: measurement is layout-offset-derived with
  ResizeObserver as the trigger (margins counted), follow-bottom
  corrections land pre-paint in the same frame as growth, and streaming
  updates coalesce one reactive cascade per frame.
- Added the missing heightCacheVersion row to the debug-info table.
- Fixed invalid TypeScript in the LLM Streaming example
  ($state([...]) does not parse).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Same pattern as svelte-virtual-list's accessibility page: an
EmbeddedExampleV2 card (file / live / source / reset chrome) running the
real component, with a try-it panel showing focus state, the last scroll
key, and — chat-specific — the live follow-bottom state, so readers can
watch PageUp disengage follow and End re-engage it. New InlineExample
wrapper mirrors the sibling repo's, pointing source links at this repo.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The sweep removed esm-env as "unused" based on a source grep, but the
Svelte compiler injects it into the packaged output for SSR/browser
detection — the docs build (which consumes dist) fails without it.
README bullet reworded to the accurate claim.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@jaysin586 jaysin586 added documentation Improvements or additions to documentation accessibility Apply to accessibility improvements (a11y, keyboard, screen readers) javascript Pull requests that update javascript code labels Jul 3, 2026
@jaysin586 jaysin586 self-assigned this Jul 3, 2026
@jaysin586 jaysin586 added accessibility Apply to accessibility improvements (a11y, keyboard, screen readers) javascript Pull requests that update javascript code labels Jul 3, 2026
@coderabbitai

coderabbitai Bot commented Jul 3, 2026

Copy link
Copy Markdown

Warning

Review limit reached

You’ve reached a temporary PR review limit under our Fair Usage Limits Policy.

Your recent review volume is higher than typical usage, so adaptive limits are currently applied.

Next review available in: 59 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: ASSERTIVE

Plan: Pro

Run ID: 6810ddae-ddd4-4611-9670-e1b99de9bcad

📥 Commits

Reviewing files that changed from the base of the PR and between e358c39 and 0a179ac.

📒 Files selected for processing (6)
  • README.md
  • docs/src/lib/components/general/InlineExample.svelte
  • docs/src/lib/docsNav.ts
  • docs/src/lib/examples/AccessibilityChat.svelte
  • docs/src/routes/docs/guides/accessibility/+page.svx
  • src/lib/types.ts

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

@blacksmith-sh

blacksmith-sh Bot commented Jul 3, 2026

Copy link
Copy Markdown

Found 1 test failure on Blacksmith runners:

Failure

Test View Logs
[webkit] › tests/chat/
wheel-scroll-jump.spec.ts:434:9 › Keyboard scroll jump › moves up with ArrowUp
View Logs

Fix in Cursor

@jaysin586
jaysin586 merged commit 3eaed4a into main Jul 3, 2026
9 of 11 checks passed
@jaysin586
jaysin586 deleted the docs/accessibility branch July 5, 2026 16:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

accessibility Apply to accessibility improvements (a11y, keyboard, screen readers) documentation Improvements or additions to documentation javascript Pull requests that update javascript code

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant