Skip to content

feat(chat): a11y improvements and small-phone breakpoint#359

Merged
furukama merged 2 commits intomainfrom
extract-chat-a11y-mobile
Apr 20, 2026
Merged

feat(chat): a11y improvements and small-phone breakpoint#359
furukama merged 2 commits intomainfrom
extract-chat-a11y-mobile

Conversation

@maxnoller
Copy link
Copy Markdown
Member

Summary

Extracted from #323 as an independent PR. Touches only the chat page styles, message actions, and one test — no overlap with the Button extraction (#358) or the pending React 19 refactor.

Accessibility

  • aria-label on copy/edit/regenerate/branch-nav buttons and edit textarea
  • `.messageBlock:focus-within` reveals message actions for keyboard users
  • focus-visible outlines on composer input, attach, and send buttons
  • `.composer:focus-within` border highlight
  • `@media (prefers-reduced-motion: reduce)` disables thinking-dot and sidebar slide-in animations

Mobile / responsive

  • `@media (max-width: 480px)` small-phone breakpoint (wider bubbles, tighter padding, smaller empty-state heading)
  • Slash suggestions capped at `max-height: 40vh` below 900px

Bug fix

  • Mobile sidebar overlay (`.sidebarOpen`) was `inset: 0` which stretched the 280px panel across the viewport and blocked backdrop clicks. Replaced with explicit `top/left/bottom`.

Test plan

  • `vitest run` — 183/183 console tests pass
  • `tsc --noEmit` clean
  • Tab through chat message actions with keyboard — action row appears on focus
  • Enable prefers-reduced-motion in devtools — thinking dots and sidebar animation stop
  • Resize <480px — bubbles are wider, padding tighter
  • Open mobile sidebar, click backdrop — closes

🤖 Generated with Claude Code

Extracted a11y/mobile polish from #323, independent of its larger
React 19 refactor:

- aria-label on copy/edit/regenerate/branch-nav message actions and the
  edit textarea, so screen readers announce purpose instead of glyphs
- .messageBlock:focus-within reveals the action row during keyboard nav
- focus-visible outlines on composer input, attach, and send buttons
- .composer:focus-within border highlight
- @media (max-width: 480px) small-phone breakpoint: wider bubbles,
  tighter padding, smaller empty-state heading
- @media (prefers-reduced-motion: reduce): disable thinking-dot and
  sidebar slide-in animations
- Cap slash suggestions at 40vh below 900px so they don't cover the
  whole screen
- Fix sidebar overlay blocking backdrop clicks: replace inset: 0 on
  .sidebarOpen with explicit top/left/bottom so the 280px panel no
  longer stretches across the viewport

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@maxnoller
Copy link
Copy Markdown
Member Author

Code review

No issues found. Checked for bugs and CLAUDE.md compliance.

🤖 Generated with Claude Code

- If this code review was useful, please react with 👍. Otherwise, react with 👎.

@furukama furukama merged commit 141189f into main Apr 20, 2026
6 checks passed
@furukama furukama deleted the extract-chat-a11y-mobile branch April 20, 2026 15:08
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.

2 participants