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

Problem/Motivation

Note that this issue was initially being discussed here: #3083657: Devise strategy to address several SVG loading+usage issues, but that issue became a larger meta for many SVG issues due to it having the most useful information overall.

Claro has many CSS background images. These are stripped out by Internet Explorer and Firefox, but Edge displays them.

When Windows high contrast themes were originally introduced, IE and Firefox policy was to strip out all CSS background image, on the assumption that they interfered with the legibility of text that was on top of them. Early versions of Edge did this too, but later Edge changed the policy to display background images, but enforce a plain background in places where text was on top of a background image.

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

Proposed resolution

This is compatible with the approach agreed upon in #3083657: Devise strategy to address several SVG loading+usage issues

Find uses of background images that include information that high contrast mode users should be able to see
These uses can be addressed on a case-by-case basis using whatever solution seems to work best.
1. This could be providing text in lieu of an image
2. The image could be provided with a different mechanism: using SVG-in-HTML, or (in D10) CSS mask-image or clip-path. They would need to be accompanied by a comment noting why the usual approach of background: url() is not used in order to support high contrast mode

Remaining tasks

DONE: they all warrant being shown. Identify background images that should be available to high contrast mode users.
Refactor so these images (or the information provided by them) are available in high contrast mode. Use child issues on a case by case basis.

Components to be updated

~~Next/prev icons in pager~~
~~section chevron on admin/config~~
~~All of the icons on /admin/reports/status~~
there are a lot of icons within /core/themes/claro/images/icons/windowText that use a combo of -ms-high-contrast and windowText. These work properly in MS Edge (which supports that MQ), but not FF. We should convert those over to whatever method we choose (my preference is mask-image). This can be done in a separate issue.