Tap targets on links within lists are too small

matthew-shaw commented 3 years ago

Description of the issue

When placing govuk-link classed links as list items within a govuk-list list, the tap targets on mobile device widths are too small. A Google Lighthouse audit reports these as 19px high and recommends 48px, although I believe the WCAG recommendation is 44px. At their current size and spacing they are difficult to tap individually. I can see that at desktop widths the <li> element receives a 5px margin-bottom, but a 0px margin at mobile widths.

Steps to reproduce the issue

You can see an example of the list of links on this site: https://govuk-frontend-jinja.herokuapp.com Perform a mobile Lighthouse audit on it to get the report below:

Actual vs expected behaviour

I am expecting the list items to receive either a larger tap target, or additional margin to space them out further. I am aware of the .govuk-list--spaced class, but I don't want the content spaced out further on desktop devices, only on mobile.

Environment (where applicable)

Operating system: Tested on MacOS, Windows and Android
Browser: Tested on Firefox (MacOS, Windows, Android), Chrome (Windows, Android), Edge (Windows)
Browser version: Firefox 84, Chrome 88, Edge 88
GOV.UK Frontend Version: v3.10.2

matthew-shaw commented 3 years ago

Discussed on x-gov Slack with @vanitabarrett and @edwardhorsford. Thanks both!

joelanman commented 3 years ago

alphagov / govuk-frontend