Text within panel component can overflow the container

[36degrees]

Description of the issue

As originally raised in hmrc/accessibility#20, and flagged in the backlog here, text within the panel component can overflow the container, for example if viewed on a mobile with text resized to 200%.

Steps to reproduce the issue

In Safari on iOS

1. Open http://govuk-frontend-review.herokuapp.com/components/panel/preview on a mobile device
2. Resize the text to 200%

Actual vs expected behaviour

The text should remain readable, but the words 'Application' and 'completed' are truncated (because they are white text on a white background where they overflow the container).

[paulwaitehomeoffice]

When I was testing a service I work on, I figured this was probably a WCAG 1.4.4 non-conformance.

I got around it by creating a class with these styles:

  word-wrap: break-word; // Fallback for older browsers only
  overflow-wrap: break-word;

Which I pinched from the summary-list component:

govuk-frontend/src/govuk/components/summary-list/_index.scss

Line 58 in 22bbe47

word-wrap: break-word; // Fallback for older browsers only

It’s also useful for potentially-long string like e-mail addresses entered by the user.

[vanitabarrett]

This came up on support today, again flagged by an internal accessibility audit at HMRC as failing WCAG 1.4.4.

Issue: Text is clipped (AA)
WCAG 2.1 violation: 1.4.4 Resize text
Page: Application Submitted
URL:
Journey/Step: J1 S6
Description: A long string of text not breaking to accommodate the width of the parent container. The text gets clipped. Tested with increased page zoom 200% on ios using iPhone11
Resolve: Text getting clipped due to text doesn’t wrap. Apply appropriate CSS.

[vanitabarrett]

Had a quick look at this, using the solution mentioned above:

    word-wrap: break-word; // Fallback for older browsers only
    overflow-wrap: break-word;

It's definitely an improvement, as the text no longer overflows (white on white) so you can read it. On very small width screens it can be difficult to read because the text is so broken up.

The other alternative would probably be combining the above solution with something like min-content for newer browsers, e.g:

    word-wrap: break-word; // Fallback for older browsers only
    overflow-wrap: break-word;

    @include govuk-media-query($until: tablet) {
      padding: govuk-spacing(6) - $govuk-border-width;
    }

    @supports (width: min-content) {
      min-width: min-content;
    }

Text is more readable, but it means the panel overflows the page which looks a bit broken and you have to scroll to see all the content.

[paulwaitehomeoffice]

Yeah it's not ideal eh; ours can be really tricky to read when zoomed in more:

Not sure if there's any scope for reducing the panel's padding on smaller viewports, although obviously that would only help a bit.

Marat did mention some other word wrapping-related CSS that might be worth trying, even if not supported everywhere yet, that might be worth trying too:

  word-wrap: break-word; /* old version of overflow-wrap for IE and Edge and FF < 49*/
  overflow-wrap: anywhere; /* modern, tries to fit word on a new line rather than fitting on remnants of the current line */
  /* hyphens is not supported on Chrome < 55 or Opera and misc mobile browsers */
  -webkit-hyphens: auto;
  -ms-hyphens: auto; /* ie10+ */
  -moz-hyphens: auto;
  hyphens: auto;