Fixed "Go to page": Touch target size of buttons is too small

[Steffen]

Affected version

2.0.7

Our users say that the the "+" and "-" buttons in the "Go to page" menu are hard to hit on touch devices. I think they are right, those buttons have a width of only 25 pixels.

"A minimum recommended touch target size is around 48 device independent pixels on a site with a properly set mobile viewport." (https://developers.google.com/web/fundamentals/accessibility/accessible-styles)

Any maybe the "-" button could be placed to the left of the input field (because the pagenav shows the "Prev" button on the left, too)?

 

[Chris D]

I've implemented a few very small changes here but it may fall slightly short of what you were expecting, although it is an improvement.

I've changed it so that the input--numberNarrow class no longer adds the inputNumber-button--smaller classes to the buttons. You can opt into this by adding data-button-smaller="on" to the number box element if you specifically want smaller buttons.

I've also changed the default button width to be 45px and changed the smaller button width to be 35px. Finally, I've removed the media query which would have reduced the size of these buttons anyway on narrow devices.

It's rolled out here now if you want to give it a whirl.