fix(canvas-mobile): set chat textarea font-size to 16px to prevent iOS zoom #1439

Closed
core-uiux wants to merge 6 commits from fix/mobile-ios-focus-zoom into main

6 Commits

Author SHA1 Message Date
core-uiux aeed658946 fix(canvas-mobile): set chat textarea font-size to 16px to prevent iOS zoom
CI / Platform (Go) (pull_request) Successful in 7m14s
CI / Python Lint & Test (pull_request) Successful in 7m15s
CI / Canvas (Next.js) (pull_request) Successful in 9m58s
CI / all-required (pull_request) Successful in 6m38s
E2E Staging Canvas (Playwright) / Canvas tabs E2E (pull_request) Successful in 9m4s
audit-force-merge / audit (pull_request) Waiting to run
E2E API Smoke Test / E2E API Smoke Test (pull_request) Successful in 3s
Block internal-flavored paths / Block forbidden paths (pull_request) Successful in 9s
CI / Detect changes (pull_request) Successful in 9s
Handlers Postgres Integration / Handlers Postgres Integration (pull_request) Successful in 1s
Harness Replays / Harness Replays (pull_request) Successful in 2s
CI / Shellcheck (E2E scripts) (pull_request) Successful in 15s
Runtime PR-Built Compatibility / PR-built wheel + import smoke (pull_request) Successful in 4s
CI / Canvas Deploy Reminder (pull_request) Has been skipped
E2E API Smoke Test / detect-changes (pull_request) Successful in 14s
E2E Chat / detect-changes (pull_request) Successful in 9s
E2E Staging Canvas (Playwright) / detect-changes (pull_request) Successful in 8s
Handlers Postgres Integration / detect-changes (pull_request) Successful in 6s
Harness Replays / detect-changes (pull_request) Successful in 5s
lint-required-no-paths / lint-required-no-paths (pull_request) Successful in 1m5s
Runtime PR-Built Compatibility / detect-changes (pull_request) Successful in 6s
Secret scan / Scan diff for credential-shaped strings (pull_request) Successful in 4s
qa-review / approved (pull_request) Failing after 4s
sop-checklist / all-items-acked (pull_request) Successful in 3s
gate-check-v3 / gate-check (pull_request) Successful in 5s
security-review / approved (pull_request) Failing after 4s
sop-checklist / na-declarations (pull_request) N/A: (none)
sop-tier-check / tier-check (pull_request) Successful in 4s
E2E Chat / E2E Chat (pull_request) Failing after 5m12s
iOS Safari zooms in when a text input receives focus if its font-size is
below 16px. Change the MobileChat composer textarea from 14.5px to 16px
to prevent this unwanted page zoom on iOS devices.

Fixes #1434.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-17 20:22:51 +00:00
core-uiux e656221c0e fix(canvas/mobile): add aria-hidden to decorative check icon in MobileSpawn
The check-mark span inside the selected-tier button is purely decorative
visual feedback — screen readers already get the tier name from the button
text. Mark it aria-hidden to avoid redundant announcements.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-17 20:22:51 +00:00
core-uiux c8e10b88f9 fix(canvas/mobile): add ARIA tab roles + keyboard nav to MobileDetail tabs
Add role="tablist", role="tab", aria-selected, tabIndex roving, and
arrow/Home/End keyboard navigation to the Overview/Activity/Config/Memory
tab buttons in MobileDetail.tsx. Matches the pattern already applied to
the bottom TabBar and the MobileChat sub-tabs.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-17 20:22:51 +00:00
core-uiux b6adc26086 fix(canvas/mobile): add ARIA tab pattern + keyboard nav to MobileChat sub-tabs
Add role="tab", aria-selected, tabIndex roving, and arrow/Home/End
keyboard navigation to the "My Chat / Agent Comms" tab buttons in
MobileChat.tsx — matching the WCAG 2.1.1 pattern already used in the
bottom TabBar. Without ARIA roles, screen readers treat these as plain
buttons with no tab-group semantics.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-17 20:22:51 +00:00
core-uiux 40c8883736 fix(canvas/mobile): WCAG 2.4.7 focus-visible + aria-label on MobileCanvas buttons
Adds focus-visible ring + aria-label to the three inline-styled buttons in
MobileCanvas.tsx:

- Reset zoom: focus-visible ring
- Agent node: aria-label="Open {name}" + focus-visible ring (was missing both)
- Spawn FAB: focus-visible ring

Also adds MobileCanvas to the PR scope; refs #1395.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-17 20:22:51 +00:00
core-uiux e8cefcaa8a fix(canvas/mobile): WCAG 2.4.7 focus-visible rings on all mobile canvas buttons
Adds keyboard focus indicators (focus-visible:ring-2 focus-visible:ring-accent
focus-visible:ring-offset) to every keyboard-navigable button across the mobile
canvas layer. Buttons using inline style props now carry a Tailwind className
pair that shows the ring on keyboard focus without affecting mouse/touch users.

Components fixed:
- MobileChat: Back, More, tab-switch, Retry, Remove file, Attach, Send
- MobileHome: Spawn FAB
- MobileSpawn: Close, template select, tier select, Spawn agent
- MobileMe: Accent swatches, Theme/Density segmented controls
- MobileDetail: Back, More, tab-switch, Open chat CTA
- MobileComms: Filter chips (All, Errors)
- components.tsx: AgentCard, FilterChips

Refs #1384

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-17 20:22:51 +00:00