Skip to content

Mobile Audit W1-B: Accessibility Foundation - #4697

Merged
iscekic merged 20 commits into
mainfrom
feature/mobile-audit-w1-accessibility-foundation
Jul 27, 2026
Merged

Mobile Audit W1-B: Accessibility Foundation#4697
iscekic merged 20 commits into
mainfrom
feature/mobile-audit-w1-accessibility-foundation

Conversation

@iscekic

@iscekic iscekic commented Jul 23, 2026

Copy link
Copy Markdown
Contributor

Mobile Audit W1-B — Accessibility Foundation

Implements the 13-slice accessibility-foundation plan for the mobile app (iOS + Android). All changes are scoped to apps/mobile/; no web/service/DB/native-sibling code is touched. Each slice landed as its own small commit with co-located unit tests.

Two audit-reproduced defects are the acceptance anchors:

  • Defect A (QB-16, iOS max-text OTP): OTP Verify / Resend / Back were occluded by the number pad at Dynamic Type XXXL.
  • Defect B (QB-A1, Android small-phone login IME): the primary "Send code" submit sat behind the IME and Enter only dismissed the keyboard.

Slices

  • P1-C-21a — reflow tab shell + header at large font scale
  • P1-C-21b — reflow core/profile/auth layouts at max text
  • P1-C-22 — scale PR diff text with bounded font scale (removes allowFontScaling={false}, variable-height rows)
  • P1-C-23 — AA-contrast token for muted-soft text + contrast-pair assertion (kept in sync across global.css and the static color mirror)
  • P1-C-24a — expose Kilo Chat message content + actions to screen readers
  • P1-C-24b — align Agent message bubble a11y with the chat contract (interactive descendants stay individually focusable)
  • P1-C-25a — announce + focus blocking agent question/permission cards (new shared announce helper)
  • P1-C-25b — route consequential toasts through one screen-reader announcement adapter
  • P1-C-26a — non-color diff add/delete markers + 44pt selection via hitSlop
  • P1-C-26b — safe-area scrolling layouts for blocking recovery screens (behavior-neutral; preserves the force-update refutation, EV-08)
  • P1-C-26c — document portrait lock as a WCAG 1.3.4 essential exception (no landscape/iPad multitasking work)
  • P1-I-63 — keep the Android login submit reachable above the IME; IME go submits the email
  • P2-C-20a — keep OTP actions reachable at max text with a keyboard-event bottom spacer (no nested KeyboardAvoidingView)

Main merge (2026-07-27, two base advances)

origin/main was merged twice; every behavior from both sides is preserved. Plain-language summary of what the merge resolution changed on this branch:

  • Message bubble: long-pressing a message now opens the message details sheet (new on main), and the screen-reader overlay from this branch stays in place. The accessibility hint reads "Long press for message details".
  • Session detail: dismissing a blocking question/permission card keeps this branch's focus handback to the transcript, and main's rules for when the composer is mounted/visible are preserved end to end (including the details-sheet threading).
  • PR diff file list: this branch's font-scale provider and row re-measure now live inside main's first-page loading gate; the list's scroll logic moved into a dedicated hook (use-pr-diff-list-scroll) to satisfy the file-size lint without changing behavior.
  • Tests: the oversized message-bubble suite was split into a shared helpers module + focused accessibility/badge suites; main's details-sheet tests were kept, and two Pressable-hint tests superseded by the overlay contract were dropped. The interaction-handler test gained the required a11y-announce mock and now asserts the classified error toast messages.
  • E2E harness: the shared launch/settle flows now also handle the SpringBoard Open in "Kilo"? confirmation that iOS shows for simctl openurl since universal links (associatedDomains) were configured on main; the runbook bullet that claimed simctl openurl skips confirmations was corrected.
  • Workflow learnings: four environment blockers and their fixes were recorded for future runs (SpringBoard dialog, Maestro driver wedge under multi-simulator load, git-token-service 503 vs hermetic stub, stub's missing /pulls/{n}/files endpoint).

Design principle

UX primacy governs: font scaling is bounded to preserve density, 44pt targets are reached via hitSlop rather than bulk, and screen-reader affordances (announce/focus, accessibilityActions, labels/roles) are preferred over visible changes.

Verification

  • pnpm format && pnpm typecheck && pnpm lint && pnpm check:unused && pnpm test green (263 test files / 2252 tests) on the merged head.
  • Fresh mobile-reviewer over the full merge-resolution diff: No findings.
  • Fresh on-device E2E (iOS 26.5) over the merge-affected flows, all passing:
    • blocking permission card raised from a live agent session → composer hidden while blocked → dismiss → card gone, transcript intact, composer restored without duplication (focus-handback contract);
    • long-press on a message bubble opens the message details sheet; overlay a11y labels (User message / Assistant message) present;
    • PR Files tab against the hermetic GitHub stub: first-page loading skeleton → file list renders; Dynamic Type change re-measures rows (22pt → ~29–30pt); scroll stays sane across content-size changes;
    • header smoke: leading accessories render, long session titles truncate instead of displacing them.
  • On-device E2E for AC-Repro-A (iOS XXXL OTP) and AC-Repro-B (Android small-phone login IME) plus VoiceOver/TalkBack passes were run against the pre-merge head; the merge did not touch those flows.

Non-goals (preserved audit refutations)

Normal Agent keyboard avoidance, malformed deep-link handling, force-update foreground-recheck (QB-18), generic Reduce-Motion, persisted-cache durability, and landscape/iPad orientation are explicitly out of scope.

@iscekic iscekic self-assigned this Jul 23, 2026
Comment thread apps/mobile/src/components/pr-review/diff/diff-font-metrics.ts
Comment thread apps/mobile/src/components/agents/permission-card.tsx
@kilo-code-bot

kilo-code-bot Bot commented Jul 23, 2026

Copy link
Copy Markdown
Contributor

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Executive Summary

Since the last review, new commits reworked message-bubble accessibility into a shared message-bubble-a11y helper plus an inner actions overlay, added blocking-card submission-error surfacing and post-dismissal screen-reader focus routing in session-detail-content.tsx, extracted PR-diff list scrolling into use-pr-diff-list-scroll.ts, and made minor layout fixes (profile actions, screen header, session row); no defects found in the changed code.

Files Reviewed (21 files)
  • apps/mobile/.kilo/WORKFLOW_LEARNINGS.md
  • apps/mobile/app.config.ts
  • apps/mobile/e2e/AGENTS.md
  • apps/mobile/e2e/flows/open-app.yaml
  • apps/mobile/e2e/flows/settle-app.yaml
  • apps/mobile/src/components/agents/message-bubble-a11y.ts
  • apps/mobile/src/components/agents/message-bubble-a11y.test.ts
  • apps/mobile/src/components/agents/message-bubble-accessibility.test.ts
  • apps/mobile/src/components/agents/message-bubble-test-utils.ts
  • apps/mobile/src/components/agents/message-bubble.test.ts
  • apps/mobile/src/components/agents/message-bubble.tsx
  • apps/mobile/src/components/agents/session-detail-content.tsx
  • apps/mobile/src/components/agents/session-list-content.tsx
  • apps/mobile/src/components/agents/use-interaction-handlers.test.ts
  • apps/mobile/src/components/agents/use-interaction-handlers.ts
  • apps/mobile/src/components/pr-review/diff/pr-diff-file-list.tsx
  • apps/mobile/src/components/profile-screen.tsx
  • apps/mobile/src/components/screen-header.tsx
  • apps/mobile/src/components/ui/session-row.tsx
  • apps/mobile/src/lib/pr-review/diff/use-pr-diff-list-scroll.ts
  • apps/mobile/vitest.config.ts
Previous Review Summaries (2 snapshots, latest commit 924f148)

Current summary above is authoritative. Previous snapshots are kept for context only.

Previous review (commit 924f148)

Status: No Issues Found | Recommendation: Merge

Executive Summary

The only change since the previous review (adding accessibilityRole="button" and accessibilityLabel="Retry" to the Retry button) resolves the prior SUGGESTION; no new issues found in the changed code.

Files Reviewed (1 file)
  • apps/mobile/src/components/agents/permission-card.tsx

Previous review (commit f7b5e02)

Status: 2 Issues Found | Recommendation: Address before merge

Executive Summary

The highest-risk finding is a font-scale/line-height mismatch in the new bounded PR-diff metrics helper (diff-font-metrics.ts) that could clip scaled diff text inside its own Text node despite the surrounding row growing to fit.

Overview

Severity Count
CRITICAL 0
WARNING 1
SUGGESTION 1
Issue Details (click to expand)

WARNING

File Line Issue
apps/mobile/src/components/pr-review/diff/diff-font-metrics.ts 85 lineHeight stays unscaled while rowMinHeight is scaled, risking text clipping at the max font-scale bound

SUGGESTION

File Line Issue
apps/mobile/src/components/agents/permission-card.tsx 211 New Retry button lacks accessibilityRole/accessibilityLabel, unlike its sibling buttons added in the same PR
Files Reviewed (60 files)
  • apps/mobile/app.config.ts
  • apps/mobile/src/app/(app)/(tabs)/(1_kiloclaw)/index.tsx
  • apps/mobile/src/app/(app)/(tabs)/_layout.tsx
  • apps/mobile/src/components/agents/agent-interaction-policy.ts
  • apps/mobile/src/components/agents/blocking-card-state.test.ts
  • apps/mobile/src/components/agents/blocking-card-state.ts
  • apps/mobile/src/components/agents/compaction-separator.tsx
  • apps/mobile/src/components/agents/message-bubble-a11y.test.ts
  • apps/mobile/src/components/agents/message-bubble-a11y.ts
  • apps/mobile/src/components/agents/message-bubble.test.ts
  • apps/mobile/src/components/agents/message-bubble.tsx
  • apps/mobile/src/components/agents/permission-card.tsx - 1 issue
  • apps/mobile/src/components/agents/question-card.tsx
  • apps/mobile/src/components/agents/session-detail-content.tsx
  • apps/mobile/src/components/agents/session-list-content.tsx
  • apps/mobile/src/components/agents/session-list-section-header.tsx
  • apps/mobile/src/components/agents/use-interaction-handlers.ts
  • apps/mobile/src/components/bootstrap-error-screen.tsx
  • apps/mobile/src/components/force-update-screen.tsx
  • apps/mobile/src/components/kilo-chat/conversation-list-screen.tsx
  • apps/mobile/src/components/kilo-chat/message-bubble-a11y.test.ts
  • apps/mobile/src/components/kilo-chat/message-bubble-a11y.ts
  • apps/mobile/src/components/kilo-chat/message-bubble.tsx
  • apps/mobile/src/components/kiloclaw/instance-list-screen.tsx
  • apps/mobile/src/components/login-screen.tsx
  • apps/mobile/src/components/login/email-otp-form.tsx
  • apps/mobile/src/components/login/idle-auth.tsx
  • apps/mobile/src/components/pr-review/diff/diff-font-metrics.test.ts
  • apps/mobile/src/components/pr-review/diff/diff-font-metrics.ts - 1 issue
  • apps/mobile/src/components/pr-review/diff/diff-line.tsx
  • apps/mobile/src/components/pr-review/diff/pr-diff-file-list.tsx
  • apps/mobile/src/components/pr-review/diff/pr-diff-side-by-side-row.tsx
  • apps/mobile/src/components/profile-action-tile.tsx
  • apps/mobile/src/components/profile-screen.tsx
  • apps/mobile/src/components/screen-header.tsx
  • apps/mobile/src/components/tab-screen.tsx
  • apps/mobile/src/components/ui/configure-row.tsx
  • apps/mobile/src/components/ui/session-row.tsx
  • apps/mobile/src/lib/a11y/announce.test.ts
  • apps/mobile/src/lib/a11y/announce.ts
  • apps/mobile/src/lib/a11y/announcing-toast.test.ts
  • apps/mobile/src/lib/a11y/announcing-toast.ts
  • apps/mobile/src/lib/hooks/use-code-reviewer.ts
  • apps/mobile/src/lib/hooks/use-code-reviews.ts
  • apps/mobile/src/lib/hooks/use-kiloclaw-mutations.ts
  • apps/mobile/src/lib/hooks/use-manual-refresh.ts
  • apps/mobile/src/lib/hooks/use-organization-mutations.ts
  • apps/mobile/src/lib/hooks/use-security-agent-commands.ts
  • apps/mobile/src/lib/hooks/use-security-agent-mutations.ts
  • apps/mobile/src/lib/hooks/use-session-mutations.test.ts
  • apps/mobile/src/lib/hooks/use-session-mutations.ts
  • apps/mobile/src/lib/hooks/use-theme-colors.contrast.test.ts
  • apps/mobile/src/lib/hooks/use-theme-colors.ts
  • apps/mobile/src/lib/pr-review/diff/diff-target.test.ts
  • apps/mobile/src/lib/pr-review/diff/diff-target.ts
  • apps/mobile/src/lib/pr-review/diff/parse-patch-accessibility.test.ts
  • apps/mobile/src/lib/pr-review/diff/parse-patch.ts
  • apps/mobile/src/lib/tab-bar-layout.test.ts
  • apps/mobile/src/lib/tab-bar-layout.ts
  • apps/mobile/vitest.config.ts

Fix these issues in Kilo Cloud


Reviewed by claude-sonnet-5 · Input: 74 · Output: 20.8K · Cached: 2.7M

Review guidance: REVIEW.md from base branch main

iscekic added 5 commits July 27, 2026 14:42
…w1-accessibility-foundation

# Conflicts:
#	apps/mobile/src/components/agents/message-bubble.test.ts
#	apps/mobile/src/components/agents/message-bubble.tsx
#	apps/mobile/src/components/agents/session-detail-content.tsx
#	apps/mobile/src/components/pr-review/diff/pr-diff-file-list.tsx
#	apps/mobile/src/components/screen-header.tsx
…w1-accessibility-foundation

# Conflicts:
#	apps/mobile/.kilo/WORKFLOW_LEARNINGS.md
Resolutions:
- vitest.config.ts: keep main's projects split; move the a11y include into
  vitest.pure.config.ts
- message-bubble.test.ts: drop the now-unused SDK type import (moved to
  message-bubble-test-utils.ts) and use the renamed @kilocode/cloud-agent-sdk
@iscekic
iscekic enabled auto-merge (squash) July 27, 2026 18:09
@iscekic
iscekic merged commit 304b31e into main Jul 27, 2026
19 checks passed
@iscekic
iscekic deleted the feature/mobile-audit-w1-accessibility-foundation branch July 27, 2026 18:12
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