Adjust components to scale with android system font size

[owenatgov]

What

Ensure as many of our components as possible are responding when viewing govuk-frontend web pages on android devices and adjusting android's system font size.

Why

Govuk-frontend web pages should respect accessibility settigns and respond to them as expected.

Steps to replicate

Tested in chrome on browserstack's Galaxy S23 instance as it's easy to notice the issue due to the device's large font size scale.

1. Go to the settings of the testing device and locate the setting to adjust device font size
2. Increase font size (recommend max in order to visualise issue more clearly)
3. Open a govuk-frontend web page on a browser on an android device eg: the review app's announcements page

Notice that the breadcrumbs have not increased in size. Digging into the runtime styles, you will find that rem values of other elements on the page have adjusted in response to the font size change but the breadcrumbs haven't.

Notes

Considerations from the spec

The likely reason this is happening can be found in CSS Mobile Text Size section of the CSS spec, specifically 2.2: Conditions that suppress adjustment. This section notes 4 reasons that would suppress text size adjustment. From initial testing, certain components can be 'fixed' by removing their block level positioning rules eg: components that have display: inline-block. We should be able to use inline-block on components and the text size adjustment not be suppressed. Recommend using the the spec in figuring out a solution.

Effected components

• Accordion
• Back link
• Breadcrumbs
• Button, and places consumed
  • Cookie banner buttons
  • Exit this page
• Checkboxes
• Details (not the content)
• File upload
• Some of the footer's links
• Header menu
• Notification banner
• Pagination
• Radios
• Select
• Table
• Tabs
• Tag
• Task list
• Text input, and places consumed
  • Date input
  • Password input

Who needs to work on this

Developers

Who needs to review this

Developers