From dac8b3fa7054589de6b71df6bac9c573081304c0 Mon Sep 17 00:00:00 2001 From: Graham Barber Date: Sun, 17 May 2026 20:39:45 -0700 Subject: [PATCH] fix(a11y): bump audience toolbar tap targets to 44x44 (WCAG 2.5.5) The audience opens decks on their own device (often a phone via the share QR), so the bottom toolbar is a real touch surface. Its icon buttons sat at ~40x40 (24px SVG + 0.5em padding) which falls under WCAG 2.5.5's 44x44 floor. Add a 44px min-width/min-height to .tool and a matching min-height on the .info counter slot so the bar reads as a single 44px strip and the 24px icons stay centered with breathing room. Co-Authored-By: Claude Opus 4.7 --- packages/wc/components/toolbar.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/wc/components/toolbar.ts b/packages/wc/components/toolbar.ts index 3a66f05..99b6153 100644 --- a/packages/wc/components/toolbar.ts +++ b/packages/wc/components/toolbar.ts @@ -71,6 +71,13 @@ export class Toolbar extends MorkdeckElement { justify-content: center; color: inherit; padding: 0.5em; + /* WCAG 2.5.5: touch targets need a 44x44 floor. The audience + opens decks on their own device (often a phone, via the + share QR), so the toolbar is a real touch surface. The 24px + icon sits centered with breathing room inside the 44px + button. */ + min-width: 44px; + min-height: 44px; } .info { @@ -80,7 +87,10 @@ export class Toolbar extends MorkdeckElement { flex-direction: column; align-items: center; justify-content: center; - height: 100%; + /* Match the tool buttons' minimum height so the counter row + stays vertically aligned with the icon glyphs and the bar + reads as one strip of consistent height. */ + min-height: 44px; gap: 0.25em; } `; -- 2.51.2