44px touch targets on the redesign icon controls (coarse pointer) #535

Merged

longjacksonle merged 1 commit from feat/mobile-tap-targets into main

2026-07-09 22:53:03 +02:00

longjacksonle commented

2026-07-09 22:29:47 +02:00

Owner

The deferred tap-target item from LC-565. Adds a @media (pointer: coarse) rule giving the redesign's icon controls a 44px minimum height on touch devices (WCAG 2.5.5), while mouse / trackpad layouts keep the denser sizing:

.lc-set-tab (settings / admin nav)
.lc-header-action (room-header icons)
.lc-fmt-btn (composer formatting toolbar)
.lc-composer-btn / .lc-composer-send (composer actions)

Why height only

min-height can never cause horizontal overflow, so it is safe everywhere. min-width is not:

.lc-set-tab is already >=44px wide (full-width column, or nowrap text tabs in the mobile scroll rail), so min-height alone makes it a true 44x44 target.
The composer button rows and the room-header action cluster are fixed-width dense single lines - up to ~10 icon buttons plus the textarea (composer) or the room title (header). Forcing 44px width there overflows a ~360px viewport (10 x 44 = 440px before the textarea), so they get height only. 44px tall x >=28px wide still clears the 24px WCAG 2.5.8 AA floor on both axes.

.lc-header is min-height: 3rem, so the taller actions do not overflow the header vertically.

Deferred (needs real-device visual QA)

Full 44x44 on the dense composer/header icon rows requires a mobile reflow - letting the toolbar wrap, moving secondary actions behind an overflow menu, or hiding them under a breakpoint. That is a layout/UX change I can't validate headlessly, so it is left as follow-up rather than shipped blind. Notably the composer bottom row already runs tight on narrow phones at its current 36px, which is the underlying blocker.

Safety

CSS-only, served directly from main.css (no template or build change). pointer: coarse scopes it to touch input, so desktop is untouched.

The deferred tap-target item from LC-565. Adds a `@media (pointer: coarse)` rule giving the redesign's icon controls a **44px minimum height** on touch devices (WCAG 2.5.5), while mouse / trackpad layouts keep the denser sizing: - `.lc-set-tab` (settings / admin nav) - `.lc-header-action` (room-header icons) - `.lc-fmt-btn` (composer formatting toolbar) - `.lc-composer-btn` / `.lc-composer-send` (composer actions) ## Why height only `min-height` can never cause horizontal overflow, so it is safe everywhere. `min-width` is not: - `.lc-set-tab` is already >=44px wide (full-width column, or nowrap text tabs in the mobile scroll rail), so **min-height alone makes it a true 44x44 target**. - The composer button rows and the room-header action cluster are fixed-width dense **single lines** - up to ~10 icon buttons plus the textarea (composer) or the room title (header). Forcing 44px width there overflows a ~360px viewport (10 x 44 = 440px before the textarea), so they get height only. 44px tall x >=28px wide still clears the 24px WCAG 2.5.8 AA floor on both axes. `.lc-header` is `min-height: 3rem`, so the taller actions do not overflow the header vertically. ## Deferred (needs real-device visual QA) Full **44x44** on the dense composer/header icon rows requires a mobile reflow - letting the toolbar wrap, moving secondary actions behind an overflow menu, or hiding them under a breakpoint. That is a layout/UX change I can't validate headlessly, so it is left as follow-up rather than shipped blind. Notably the composer bottom row already runs tight on narrow phones at its current 36px, which is the underlying blocker. ## Safety CSS-only, served directly from `main.css` (no template or build change). `pointer: coarse` scopes it to touch input, so desktop is untouched.

longjacksonle added 1 commit

2026-07-09 22:29:47 +02:00

feat(a11y): 44px touch targets on the redesign icon controls (coarse pointer)

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

Details

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

Details

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

Details

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

Details

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

Details

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

Details

Check / clippy + fmt + tests (pull_request) Successful in 2m56s

Details

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

Details

b20f16f2f9

Add a `@media (pointer: coarse)` rule giving the redesign's icon controls (.lc-set-tab, .lc-header-action, .lc-fmt-btn, .lc-composer-btn, .lc-composer-send) a 44px minimum height on touch devices (WCAG 2.5.5), while mouse / trackpad layouts keep the denser sizing. This is the deferred tap-target item from LC-565.

Height only, deliberately. min-height can never cause horizontal overflow. .lc-set-tab is already >=44px wide (full-width column, or nowrap text tabs in the mobile scroll rail), so min-height alone makes it a true 44x44 target. The composer button rows and the room-header action cluster are fixed-width dense single lines (up to ~10 icon buttons plus the textarea / the room title); forcing 44px WIDTH there overflows a ~360px viewport, so they get height only for now - 44px tall x >=28px wide still clears the 24px WCAG 2.5.8 AA floor on both axes. Full 44x44 on those dense rows needs a mobile reflow (wrap / overflow menu / hide-secondary) that wants real-device visual QA; tracked as follow-up. .lc-header min-height is 3rem so the taller actions do not overflow the header vertically.

CSS-only, served from main.css (no template / build change).

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