paper-checkbox icon indicating copy to clipboard operation
paper-checkbox copied to clipboard

Touch target size should be bigger

Open jouni opened this issue 9 years ago • 2 comments

Currently, it’s not very easy to hit the touch target of paper-checkbox on a touch device (at least on iOS). You need to hit exactly inside the root element boundaries (which includes the label) to toggle the state.

For native input elements, iOS extends the touch target area outside the visible parts of the element (not sure about Android), making it easier to hit it. This doesn’t apply for paper-checkbox.

jouni avatar May 25 '16 14:05 jouni

For native input elements, iOS extends the touch target area outside the visible parts of the element

I'm not sure we're going to be able to emulate this behavior decently given that the target area extension is dependent upon if surrounding targets exist. (But that assumes the layout is tightly packed, which is a bad idea for touch devices anyway.) It might be reasonable to put something like this behind a flag or maybe there's room for a generic wrapper element which forwards events into Polymer's gesture handling stuff.

Another way you can accomplish this is by using an absolutely positioned ::before pseudoelement to make the checkbox cover more space (exaggerated demo).

bicknellr avatar Jul 12 '16 19:07 bicknellr

I encountered this problem simply going through the Polymer tutorial - the last step is to add a paper-checkbox, and the user experience on touch devices is WOEFUL. What a terrible first impression of Polymer I am experiencing.

sisyfus avatar May 19 '18 00:05 sisyfus