maas-ui icon indicating copy to clipboard operation
maas-ui copied to clipboard

Published 20 hours ago • verified publisher icon canonical

Increase TooltipButton target size

Open petermakowski opened this issue 3 years ago • 0 comments

Issue

ToggleButton when only used with icon as content has a very small click/tap target area (16x16px) which is far below the recommended 48x48px: https://www.w3.org/WAI/WCAG21/Understanding/target-size.html

Solutions

  • We need to find a way to increase the target area to recommended 48x48px without affecting the layout.
  • When icons are accompanied by a label we could potentially increase the tap target to include the label text as well.
  • Once we find something that works we should consider upstreaming this to react-components

https://web.dev/accessible-tap-targets/

Related comment posted in https://github.com/canonical-web-and-design/maas-ui/pull/3890#discussion_r866666071

petermakowski avatar May 06 '22 10:05 petermakowski