tailwindui-issues icon indicating copy to clipboard operation
tailwindui-issues copied to clipboard

Published 20 hours ago • verified publisher icon tailwindlabs

Size of icon button

Open florianbouvot opened this issue 5 years ago • 3 comments

What component

  • Component name: Navbars, Slide-overs, ...

Describe the bug It's not a bug, but I'm wondering if the size of some icon button are ok for accessibility and touch target?

  • notification button in navbar: 32px
  • close button in slide-overs: 24px

Expected behavior I was thinking that this kind of button must be bigger: iOS recommends 44px and Android 48px.

florianbouvot avatar Nov 21 '20 08:11 florianbouvot

@florianbouvot Great feedback. Similarly, WCAG recommends 44x44 px. We can look into ways to improve tap target size, particularly for mobile-focused UI.

davidluhr avatar Nov 23 '20 19:11 davidluhr

@davidluhr I use h-11 w-11 instead of padding in some icon button to solve this issue.

EDIT: I work update some icon button like that https://play.tailwindcss.com/SdEqgIMvIU

florianbouvot avatar Nov 23 '20 20:11 florianbouvot

@florianbouvot Hey thanks again for sharing this feedback. We're still hoping to still get to this update 👍

Relevant WCAG documentation: https://www.w3.org/WAI/WCAG21/Understanding/target-size.html

reinink avatar Oct 21 '21 02:10 reinink

Hey, thanks again for reporting this!

We've corrected a bunch of the hit areas during a big component redesign that we did at the start of this year, plus we've also updated the two categories you mentioned (navbars and slide-overs), so that should take care of most of these!

If you see any other areas that are an issue feel free to report them and we'll handle those on a case-by-case basis 👍

RobinMalfait avatar Jul 27 '23 19:07 RobinMalfait