[META] Assess Olivero for WCAG Resize Text and Reflow success criteria.

(credit for writing this issue summary goes to @andrewmacpherson, as this is largely pasted in from the issue he created here: #3087225: [META] Assess Claro's conformance with WCAG Text spacing, Text resize, and Reflow.

Problem/Motivation

WCAG 2.1 introduced success criterion 1.4.12 Text spacing:

In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:

• Line height (line spacing) to at least 1.5 times the font size;
• Spacing following paragraphs to at least 2 times the font size;
• Letter spacing (tracking) to at least 0.12 times the font size;
• Word spacing to at least 0.16 times the font size.

The Bartik theme pre-dates WCAG 2.1, so addressing this criterion in Olivero is a great way to follow modern accessibility practices.

Note: Olivero doesn't have to use these minimum dimensions in it's own stylesheets. Rather, this is about making sure Olivero doesn't break when someone overrides the author styles with a user stylesheet (e.g. with a browser extension like Stylish).

Note that the word "paragraphs" in WCAG is the general English sense. It doesn't exactly mean the HTML <p> element.

Proposed resolution

Assess Olivero's conformance with WCAG 1.4.12 Text spacing.

Apply the specified spacing dimensions, and see if anything breaks. Before-and-after screenshots are good evidence of testing.

Make child issues to fix any problems found for particular pages or components.

Useful tools

• Styleguide module.
• Form Style module. This provides a page which has all core form elements. Press submit, and you them all marked with errors. Works with and without Inline Form Errors module enabled. The module was originally developed for manual testing of the Inline Form Errors module, but it's handy for robustness tests like this too.
• Dylan Barrell's Text Spacing Bookmarklet. When activated, this adds these brute force CSS rules:
  

  * {
    line-height: 1.5 !important;
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
  }
  
  p, li, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 2em !important;
  }
  

  These are the sort of thing someone might put in their user stylesheet.

Note: the bookmarklet doesn't add 2em space after everything that might qualify as a paragraph under WCAG. It will be a good idea to test with 2em after DIV wrappers for things like form errors, form descriptions, and messages.

Background reading

These have examples of the kind of problems which can occur. Content hidden in overflows is a common problem.

• Understanding Success Criterion 1.4.12: Text Spacing
• WCAG 2.1 – What is Text Spacing?
• Exploring WCAG 2.1 — 1.4.12 Text Spacing

Remaining tasks

Complete a first-pass survey of WCAG 1.4.12 Text Spacing. A few full-page screen captures from the styleguide test modules will provide a broad overview of how well the theme performs.

• Basic typography. A full-page screen capture from the Styleguide module as evidence here.
• All standard form inputs. A full page screen capture from the Error Style module as evidence here.
• Inline form errors. Use the Error Style module again.
• Form descriptions.

Note the bookmarklet doesn't apply the 2em bottom margin to DIVs. Use browser dev tools to add 2em after the form description and inline form error DIVs.

Assess a full range of special components and pages. Include scenarios combining WCAG "Text Resize" and "Reflow" success criteria too.

Components

• Determine components that should be checked for Olivero. The list from #3087225: [META] Assess Claro's conformance with WCAG Text spacing, Text resize, and Reflow. is not being used as that is for an admin theme. Some admin-y components should still be evaluated, but something like Views UI would not need to be considered.

Special pages

• Login form
• Search form
• More???

Scenarios

• Test in combination WCAG 1.4.4 Resize text. Set the browser zoom to 200%, then apply the bookmarklet.
• Test narrow viewports. Suggested approaches:
  • Viewport width somewhere in the middle of the portrait tablet breakpoint range.
  • Viewport width in the mobile breakpoint range.
  • Also 960px window width on desktop. This is a common scenario when using window tiling to half the screen width on (a.k.a. Windows "Snap") on a HD monitor.
  • Test in combination with WCAG 1.4.10 Reflow. Use the bookmarklet in a viewport 1280 CSS pixels wide, at 400% browser zoom (or 960px at 300% zoom).

Next Steps

Waiting on core accessibility maintainer @bnjmnm to confirm and close. I walked through this with @bnjmnm on this and we identified one followup issue (added below).

Followup issues

• #3192656: Text inputs can create horizontal scrolling at narrow viewports in Olivero
• #3177475: Olivero: Ensure long words break properly when zoomed in to provide proper reflow