Long, unbroken link text (such as email addresses) can break out of page container

[abbott567]

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:anywhere the issue is resolved.

Steps to reproduce the issue

1. Add a long email address to some body content which does not contain any standard breaking characters. For example:

   <a href="#" class="govuk-link">
   anExampleOfAReallyLongEmailAddress@WhichPushesTheContentOver320PixelsWide.com
   </a>

2. Reduce the viewport width to 320px wide and observe horizontal scrolling.

Environment (where applicable)

• Operating system: OS X Catalina + Windows 10
• Browser: Chrome (Mac), Chrome (Win), Edge, Safari
• GOV.UK Frontend Version: 3.12.0

[abbott567]

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

[36degrees]

I'm not sure there's an easy generic fix for this. Adding overflow-wrap:anywhere to the body (or applying it generally to paragraphs, links etc) causes issues wherever we're relying on intrinsic sizing for layout, for example in tables or the phase banner.

I think this is something that would need to be handled on a case by case basis, like we have for summary list.

[abbott567]

Yeah, I guess even if it was available as a class so you could override it manually. Possibly like .govuk-!-force-wrap or something.

[github-actions[bot]]

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.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.