Assess accessibility of Claro in High Contrast AKA forced colors mode

Starting this issue, as a placeholder for accessibility review. Leave this open until Claro is marked as stable in Drupal core.

Scope

Assess how well Claro performs when a Windows High Contrast theme is in place.

This is not intended as an implementation issue. Create child issues to fix any problems that are discovered.

Issues found

Must haves

• #3171728: Claro Select form element needs Windows High Contrast mode improvements
• #3130305: Ensure all of Claro's background images are visible in forced colors mode.
• #3269341: Claro <details> element not rendering properly in forced colors
• #3271305: Claro's radio buttons and checkboxes are unusable in high-contrast / forced colors mode

Uncategorized

• Claro currently uses the -ms-high-contrast: active media query in a lot of components (I counted 16 files). The style rules included here will NOT work in Firefox. It would be a good idea to review whether these are necessary, and find alternative approaches if possible. Reviewed and filed issues where needed here
• In css/src/components/pager.css, I found a white border:
  

  @media (-ms-high-contrast: active) {
    .pager__link.is-active {
      border: var(--pager-border-width) solid var(--color-white);
    }
  }
  

  This won't work when a user has chosen the "High Contrast White" preset HC scheme, or has specified their own light background. You should probably use border-color: currentColor;, or avoid specifying a colour at all inside a this media query.
  Solved in #3194669: Misuse of explicit colour for active pager item in -ms-high-contrast media query

Should haves

• #3269417: Claro: Breadcrumb divider icon not always visible in forced colors
• #3269419: Claro: Boundary of modals are difficult to discern in forced colors

Should haves that need to be fixed outside of Claro

These issues also occur in other themes (including Seven) and need to be fixed within their core components.

• #3269420: Toolbar icons may not meet contrast when in forced colors mode - This is under the toolbar module.
• #3269342: "Edit" cog icon for Field UI does not meet contrast minimums when in forced colors This is under the field UI module
• #3227431: Tabledrag icon doesn't adapt to forced-colors mode - this is categorized under the system module
• #3277262: Dialog close icon has poor contrast with forced-colors (even worse in Seven, btw)
• #3277285: Firefox WHCM messages don't have a border
• #3277287: Improve vertical tabs in forced colors mode
• #3277284: Firefox WHCM has a slightly broken border in views UI filter config
• #3277286: Edge in Windows high contrast mode creates a horizontal scroll in the media library dialog

Testing approach, and useful implementation tips

• Test with more than one high-contrast theme. Windows has 4 preset high-contrast colour schemes.
• Be aware that users can specify their own high-contrast theme colours. Don't assume that are using one of the 4 preset high contrast themes. They might want deep purple on pale orange, say.
• The -ms-high-contrast media query does not work in Firefox, even though the browser has some reasonable support for Windows High Contrast mode. Don't rely on this media query to convey any essential information.
• Avoid using the black-on-white or white-on-black values for the -ms-high-contrast media query. These aren't matched by user-specified high-contrast colour schemes.
• Avoid using the -ms-high-contrast-adjust property.
• Avoid using CSS background image to convey essential information. These are stripped out in Internet Explorer and Firefox.

Background reading

• Windows High Contrast Mode: the limited utility of -ms-high-contrast

Triage plan for high-contrast support

For Claro as an experimental theme in Drupal core:

1. Alpha: Windows high contrast support is NOT a blocker to adding Claro to Drupal core as an experimental theme. Aim for a first-pass assessment, to get an idea of how well it performs, and a rough plan of what needs to be addressed.
2. Beta: Complete a detailed assessment of Claro with Windows High Contrast. We don't have to fix all of the issues for beta. At this stage we aim to identify the issues in detail, along with an idea of how they will be addressed.
3. Stable: Fix issues found here. The exact must/should/could triage will be decided for each child issue individually, as different theme components can fall under different WCAG success criteria. Aim to maximize support for Windows high contrast, across Edge, Internet Explorer, and Firefox.
4. Enabled in Standard profile as the default admin theme: Aim to fix all of the outstanding should-haves discovered here.

Browser support

3 browsers currently respond to Windows High Contrast mode.

• Edge - displays CSS background images.
• Internet Explorer - strips out CSS background images.
• Firefox - doesn't respond to the -ms-high-contrast media query. Strips out CSS background images.

We don't have to achieve exactly the same appearance in all of these, and aesthetics is low priority. Rather, we should make sure there isn't any functionality/information which which works in one browser, but not another. For example:

• Edge shows CSS background images, but Internet Explorer and Firefox strip them out. So if any icon conveys important information, this would be a problem.
• Firefox doesn't respond to the -ms-high-contrast media query. Relying on this to fix issues may result in a WCAG failure in Firefox.