fix(a11y): call-button 44x44 tap targets on touch (LC-573) #541

Merged

longjacksonle merged 1 commit from feat/lc573-call-button-tap-targets into main

2026-07-11 04:21:29 +02:00

longjacksonle commented

2026-07-11 04:16:31 +02:00

Owner

Closes the tail of LC-565 / LC-UI-12 (Visual / accessibility regression pass), carved out as follow-up LC-573. The reconcile comment left two tap-target items open (roadmap R4).

What changed

.lc-cbtn call-control buttons were omitted from PR #535's coarse-pointer 44px selector list, so they stayed ~34-40px on touch. This adds .lc-cbtn to the @media (pointer: coarse) min-height rule and, because the buttons collapse to icon-only on a narrow bar (@container lc-callbar), a 44px min-width + justify-content: center for a true 44x44.

No overflow risk, unlike the composer: the outer .lc-callbar wraps and the inner .lc-callbar-controls cluster scrolls horizontally on mobile rather than pushing the page wide.

Dense-row decision (the other open item)

The composer bottom row and room-header action cluster keep height-only (as shipped in #535). They clear the WCAG 2.5.8 (AA) 24px floor on both axes (44px tall x >=28px wide); full 44px width (AAA 2.5.5) is not pursued because it needs a composer reflow (wrap / overflow menu) that would harm the primary typing UX. The call bar, a dedicated scrolling control strip, is the exception that gets true 44x44. Decision is recorded in the rule's comment and on LC-573.

Verification

CSS-only, tokens only, scoped to coarse pointers. dev-web image rebuilt; served /assets/main.css carries the rule; app healthy.

Acceptance criteria

Call buttons are >=44x44 on coarse pointers (icon-only + collapsed states), no page overflow. ✅
Dense-row decision recorded in code + ticket. ✅
Tokens only, no raw hex; CSS-only. ✅

🤖 Generated with Claude Code

https://claude.ai/code/session_01GJbJChgMXj7m1Q8GdnTPyT

Closes the tail of **LC-565 / LC-UI-12 (Visual / accessibility regression pass)**, carved out as follow-up **LC-573**. The reconcile comment left two tap-target items open (roadmap R4). ## What changed `.lc-cbtn` call-control buttons were omitted from PR #535's coarse-pointer 44px selector list, so they stayed ~34-40px on touch. This adds `.lc-cbtn` to the `@media (pointer: coarse)` min-height rule and, because the buttons collapse to icon-only on a narrow bar (`@container lc-callbar`), a 44px min-width + `justify-content: center` for a true **44x44**. No overflow risk, unlike the composer: the outer `.lc-callbar` wraps and the inner `.lc-callbar-controls` cluster scrolls horizontally on mobile rather than pushing the page wide. ## Dense-row decision (the other open item) The composer bottom row and room-header action cluster keep **height-only** (as shipped in #535). They clear the WCAG 2.5.8 (AA) 24px floor on both axes (44px tall x >=28px wide); full 44px width (AAA 2.5.5) is not pursued because it needs a composer reflow (wrap / overflow menu) that would harm the primary typing UX. The call bar, a dedicated scrolling control strip, is the exception that gets true 44x44. Decision is recorded in the rule's comment and on LC-573. ## Verification CSS-only, tokens only, scoped to coarse pointers. dev-web image rebuilt; served `/assets/main.css` carries the rule; app healthy. ## Acceptance criteria - Call buttons are >=44x44 on coarse pointers (icon-only + collapsed states), no page overflow. ✅ - Dense-row decision recorded in code + ticket. ✅ - Tokens only, no raw hex; CSS-only. ✅ 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_01GJbJChgMXj7m1Q8GdnTPyT

longjacksonle added 1 commit

2026-07-11 04:16:31 +02:00

fix(a11y): call-button 44x44 tap targets on touch (LC-573)

check-secrets / TruffleHog (pull_request) Successful in 5s

Details

check-secrets / Nosey parker (pull_request) Successful in 5s

Details

check-secrets / Kingfisher (pull_request) Successful in 7s

Details

check-secrets / TruffleHog (push) Successful in 9s

Details

check-secrets / Nosey parker (push) Successful in 9s

Details

check-secrets / Kingfisher (push) Successful in 10s

Details

Check / clippy + fmt + tests (pull_request) Successful in 3m35s

Details

Create release / Create release from merged PR (pull_request) Has been skipped

Details

a5f51a64f7

Closes the tail of LC-565 (LC-UI-12): `.lc-cbtn` call-control buttons were omitted from PR #535's coarse-pointer 44px selector list, so they stayed ~34-40px on touch. Adds `.lc-cbtn` to the `@media (pointer: coarse)` min-height rule and, because the buttons collapse to icon-only on a narrow bar, a 44px min-width plus `justify-content: center` for a true 44x44. Safe from overflow: the outer `.lc-callbar` wraps and the inner `.lc-callbar-controls` cluster scrolls horizontally on mobile rather than forcing page overflow, unlike the composer.

Records the dense-row decision (the other open LC-565 item): the composer bottom row and room-header action cluster keep height-only. They clear the WCAG 2.5.8 (AA) 24px floor on both axes; full 44px width (AAA 2.5.5) is not pursued because it needs a composer reflow that would harm the primary typing UX. Decision is now in the rule's comment and on LC-573.

CSS-only, tokens only, scoped to coarse pointers. dev-web rebuilt; served /assets/main.css carries the rule.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GJbJChgMXj7m1Q8GdnTPyT

longjacksonle scheduled this pull request to auto merge when all checks succeed

2026-07-11 04:20:36 +02:00