Ensure all of Claro's background images are visible in forced colors mode.

Tagging, also adding link to
https://accessabilly.com/accessibility-issues-concerning-windows-high-co...

The short answer is... ALL OF THEM. I don't really see any point in this issue.

Find uses of background images that include information that high contrast mode users should be able to see

This sounds misguided to me. You may as well ask whether users should be able to see them when they aren't using high-contrast mode.

Some of them are essential information, for example:

• The chevron on disclosure elements conveys behaviour and state. WIthout it sighted users won't know that additional content is available, regardless of what the colours are.
• The icon on toolbar orientation button, which doesn't have a visible text label.

Some of them aren't essential (and don't warrant a text-alternative) but they still serve as recognizable and meaningful markers which users can become familiar with. Most of the toolbar items fall in this category; they accompany the visible text labels which say what they do.

Whichever category they fall in, I can't think of any icons in our admin interface which are displayed in author-colours* mode, which won't be EQUALLY useful, recognizable, and informative to users in a forced-colours mode. Put another way: you'd miss them if they weren't shown in author-colours mode.

I think a more pertinent question is: do any of our icons rely on a particular colour, which amounts to a failure of WCAG SC 1.4.1 Use of Color?

If not, then there's no reason they can't adapt to forced-colours mode. The vast majority are monochrome icons anyway, and don't rely on gradients or shadows.

If any icons do fail WCAG Use of Color they should be fixed in both the author-colour and forced-colour modes. The yellow-star design for the shortcut module is an example of this, which already has a new design proposal.

Some of these icons may include essential information. In those cases they can't be background images.

Ahem, this isn't actually true.

WCAG doesn't care how the image (or it's text alternative) is implemented. For example, see my pedantic folly on CodePen: Text alternative for a CSS background image. It conforms to WCAG SC 1.1.1, but has little to commend it. It could be useful for the full-bleed hero images in Umami.

A common technique for providing a text alternative for a icon is to put a visually-hidden span inside the link, button, or whatever. We already do this in various places.

Background images can be used in forced-colours modes. All of our supported browsers on Windows can have CSS background-image overridden (or restored in the case of MSIE) using a forced-colors media query. It's certainly feasible to have a set of variant SVG images which use system-colours. We already have WindowText icons in Claro, for example the wastebin icon for the node form's delete button. (It should be ButtonText, mind, since it's used inside a button.)

Updating title summary.

Removed note suggesting use of content: url(), as this doesn't work on chromium based browsers.

My thought on this is to update the following components in this issue using CSS image-mask (note this isn't supported under IE11) for both 9.4.x and 10.0.x. We can create a followup for IE11 (that likely will not ever get fixed) if necessary.

• Next/prev icons in pager
• Breadcrumb divider - this works in FF, but not MSEdge (which doesn't support currentColor in SVGs in Forced Colors
• section chevron on admin/config
• All of the icons on /admin/reports/status

However, there will undoubtedly be some stragglers that aren't included in the above list. To keep this reasonable, I say that once identified, they can become followup issues (to keep this patch manageable and prevent creep)

Before I start work, I'd love to get input on this from @ckrina and @lauriii

@mherchel do you mean mask-image? Like we use in Gin? Totally up for it, also can be used together with SVG fragments.
For support also see also #3205375: [Plan] Move to SVG fragments (blocked by FF esr)

Yep. https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image. It's supported in all supported browsers except for IE11. It can be combined with CSS system colors (like CanvasText or LinkText) to render the shape of the icon in forced colors mode.

The various properties (mask-size, etc) all have equivalent properties to background-image, so it's an easy way to make it compatible with forced colors using CSS alone.

https://codepen.io/mherchel/pen/YzYZGKV

@mherchel yes, we use it for a while now in Gin for accent coloring icons, darkmode and other stuff. You can have a look at the implementation. It works great. And as mentioned before we use it together with SVG fragments for an even better (& smaller) integration.

Just updated the action links. Not sure where in the UI we can view all of these, however, you can paste the following HTML into browser developer tools to test the styling:

<a href="" class="action-link action-link--icon-plus">Icon plus</a><br>
<a href="" class="action-link action-link--icon-trash">Icon trash</a><br>
<a href="" class="action-link action-link--icon-ex">Icon ex</a><br>
<a href="" class="action-link action-link--icon-checkmark">Icon checkmark</a><br>
<a href="" class="action-link action-link--icon-cog">Icon cog</a><br>
<a href="" class="action-link action-link--icon-show">Icon show</a><br>
<a href="" class="action-link action-link--icon-hide">Icon hide</a><br>
<a href="" class="action-link action-link--icon-key">Icon key</a><br>
<a href="" class="action-link action-link--icon-questionmark">Icon questionmark</a><br>

Here are screenshots from where I tested the following on Windows 10 with a high contrast theme using Microsoft Edge, Chrome, and Firefox:

• Next/prev icons in pager
• section chevron on admin/config
• All of the icons on /admin/reports/status
• action link icons
• password indicator
• progress indicator

All icons and indicators were displayed. Marking RTBC.

Here are some more screenshots that show the following in Edge and Firefox:

• Dropbutton chevron
• Tablesort indicator
• Tabledrag icon

Committed 3adb15f and pushed to 10.0.x. Also committed to 9.4.x. Thanks!

Leaving open for backport to 9.3.x after the patch release.

Cherry-picked to 9.3.x. ✌️