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; } `;