Prevent panel text overflowing when zoomed in on mobile #2366
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-2366
vanitabarrett
changed the title
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-2366
8 tasks
36degrees
approved these changes
Sep 27, 2021
What the problem is Prevent text in the panel component from overflowing on mobile zoom. This overflowing is more likely to happen when user increases text size on a mobile eg. using iOS Safari text resize controls. The overflowing is a particular problem with the panel component since it uses white text. When the text overflows the container, it is invisible on the white (page) background. When the text in our other components overflow, the user might have to scroll horizontally to view it but the the text remains legible. We should aim to meet the WCAG Text resize Success criterion which requires that text can be scaled up to 200%. How this fixes it Decrease the padding on mobile to allow the text flow better. As an if-all-else-fails attempt to stop very long words from clipping, force them to break and wrap instead. Hopefully this is not something that would happen often since we’re reducing the padding to help with this. We additionally considered reducing the font size of the heading on a mobile to avoid the text wrapping at very narrow viewports. However, the `govuk-font` mixin uses the responsive font scale which fixes font sizes for different breakpoints to make components behave consistently. There currently isn’t a way to override those set font sizes for `govuk-font`. Since the other fixes in this commit go a long way towards solving this issue and we haven’t come across this requirement with our other components so far, we’re hesitant to add such new feature to `govuk-font` at this point, but we’ll keep an eye out for similar requirements in the future. We also considered progressively enhancing any words that wrap by using `hyphens: auto` to hyphenate them. However, we found that iOS Safari can omit the dash from some words but not others, or hyphenating unnecessarily; it seems that it would be introducing more issues than it would be solving. See #2347 for more details.
vanitabarrett
force-pushed
the
fix-panel-overflow
branch
from
dcef6ee
to
7033813
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-2366
36degrees
changed the title
This was referenced Oct 4, 2021
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Note: this PR cherry-picks commits from #2347 in order to merge and release them from a support branch. Ordinarily, this fix would be made in the support branch first, and then copied over to
main. However, in this instance, we're testing out the support branch release process in a slightly artificial scenario - the change has already been made (unreleased) inmain, but we want to trial out releasing it from thesupport/v3.xbranchAs discussed in #2173, the panel heading text can overflow its container when a user increases text size on a mobile eg. using iOS Safari text resize controls. The overflowing is a particular problem with the panel component since it uses white text. When the text overflows the container, it is invisible on the white (page) background. When the text in our other components overflow, the user might have to scroll horizontally to view it but the the text remains legible.
We should aim to meet the WCAG Text resize Success criterion which requires that
How we fix this
To help fix this, this PR:
Possible future improvements
We additionally considered reducing the font size of the heading on a mobile to avoid the text wrapping at very narrow viewports. However, the
govuk-fontmixin uses the responsive font size map which fixes font sizes for different breakpoints to make our components behave consistently. There currently isn’t a way to override those set font sizes forgovuk-font. Since the other fixes in this commit go a long way towards solving this issue and we haven’t come across this requirement with our other components so far, we’re hesitant to add this new feature togovuk-fontat this point, but we’ll keep an eye out for similar requirements in the future.We could consider adding something to the panel guidance about the need to keep the panel heading wording concise.
iOS 12 mini in Safari at 100% (no zoom)
Before
After
iOS 12 mini at 150% zoom
Before
After
iOS 12 mini at 200% zoom
Before
After
We decided not to hyphenate words that wrap
We also considered progressively enhancing any words that wrap by using
hyphens: autoto hyphenate them but this seemed to potentially introduce more problems than it was solving. For instance, we found that iOS Safari can omit the dash from some words but not others, see below:iOS Safari can also hyphenate words unnecessarily, see below:
Fixes #2173