A11Y: Radio buttons don't show checked state in high contrast mode

[mpriour]

Summary

High contrast mode on Windows renders webpages with forced colors and removes box-shadows and background colors. Calcite-component's radio buttons use box-shadows to indicate checked state. This doesn't work on high contrast and makes it impossible to determine which radio button is selected.

Actual Behavior

Layers is selected, but shows nothing.

Expected Behavior

Something like this

Reproduction Steps

1. Open windows VM
2. Go to settings > High Contrast and enable
3. Visit https://developers.arcgis.com/calcite-design-system/components/radio-button-group/

Relevant Info

All browsers on Windows. MacOS doesn't provide a true high contrast option.

Version: @esri/calcite-components@beta.73

• CDN
• NPM package

Working W3C Example/Tutorial

Possible to use forced-colors media query to add elements or styling specifically for this issue.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors#examples
This media query is supported on Chrome 89, Edge 79, and Firefox 89

[github-actions]

More information is required to proceed with this issue:

• Copy the appropriate issue template format and paste it into a comment, providing all of the requested items

This issue will be automatically closed in five days if the information is not provided. Thanks for your understanding.

[mpriour]

Closely related to #2355

[macandcheese]

It may be good to audit all of our components. I know you can provide user-defined high contrast colors in MS as well so could be something to test against. Cc @benelan

[jcfranco]

Agreed. Created #3887 as a starting point. Feel free to modify it. cc @benelan