Long, unbroken link text (such as email addresses) can break out of page container #2233
Comments
abbott567
added
awaiting triage
|
Worth pointing out the service this was observed on was a staff facing system, so the email address was probably longer than usual. It was chaining together team names and business areas using full stops. For example: `jonathan.macfarland@orangeteam.improvementprojects.department.gov.uk |
|
I'm not sure there's an easy generic fix for this. Adding
I think this is something that would need to be handled on a case by case basis, like we have for summary list. |
|
Yeah, I guess even if it was available as a class so you could override it manually. Possibly like |
On backstopjs 5.1 and above we were seeing test failures with very minor rendering differences to the reference images, and also fonts not always loading. We are not the only people seeing these problems - see [[1]] and [[2]]. In those issues, the author of backstopjs suggests that this is actually an issue with puppeteer, and another user suggests adding these lines to `onReady.js` to force the engine to wait for the fonts to load and ensure the window is always in the same place before taking a screenshot. We already merged this in #68, however reverted it in #69 because we thought it hadn't fixed the problems. Some more research showed that the CSS problems with text overflow on mobile are actually a separate bug with the GOV.UK Design System[[3]]. Therefore we can merge this again and it'll hopefully fix the problems we can address and allow us to stay up to date with backstop. [1]:garris/BackstopJS#1303 [2]:garris/BackstopJS#1318 [3]:alphagov/govuk-frontend#2233
vanitabarrett
added
accessibility
🕔 days
and removed
awaiting triage
querkmachine
changed the title
|
Uh oh! @abbott567, the image you shared is missing helpful alt text. Check your issue body. Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image. Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.
|
Summary
The standard wrapping on body content can create a scenario where long email addresses can cause a service to fail WCAG 2.1 - 1.4.10 Reflow.
Reflow states that content must not force horizontal scrolling in a viewport of 320px wide unless it's a map, a table, a game or something else where it is necessary. For regular content it needs to reflow and maintain vertical scrolling only.
If you provide an email address which does not contain regular breaking characters such as hyphens, then the email address refuses to break and forces the viewport to horizontal scroll.
By adding the CSS property:
overflow-wrap:anywherethe issue is resolved.Steps to reproduce the issue
Environment (where applicable)
The text was updated successfully, but these errors were encountered: