Adjust components to scale with android system font size #4933
Labels
accessibility
🐛 bug
Something isn't working the way it should (including incorrect wording in documentation)
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-block
on 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
The text was updated successfully, but these errors were encountered: