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.
Go to the settings of the testing device and locate the setting to adjust device font size
Increase font size (recommend max in order to visualise issue more clearly)
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.
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.
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 useinline-blockon components and the text size adjustment not be suppressed. Recommend using the the spec in figuring out a solution.Effected components
Who needs to work on this
Developers
Who needs to review this
Developers