[Switch] Enhance the component's colors for a11y and usability

[mjuniper]

Check existing issues

• I have checked for existing issues to avoid duplicates and reviewed the Accessibility page for guidance.

Summary

We got a number of accessibility violations on calcite-switch when LevelAccess audited Hub. See:

• https://devtopia.esri.com/dc/hub/issues/11268
• https://devtopia.esri.com/dc/hub/issues/11241
• https://devtopia.esri.com/dc/hub/issues/11273
• https://devtopia.esri.com/dc/hub/issues/11288
• https://devtopia.esri.com/dc/hub/issues/11300

I think these boil down to: when the switch is off the track border (--calcite-color-border-2 / #d4d4d4) does not sufficiently contrast with the track background (--calcite-color-foreground-2 / #f3f3f3). It would not sufficiently contrast with even a white (#ffffff) surrounding background either but I think it is sufficient to focus on making its own border and background contrast sufficiently.

Actual Behavior

calcite switch has insufficient contrast between the track border and track background when in the off position.

Expected Behavior

calcite-switch should have sufficient contrast between the track border and track background when in the off position. I think something like border: #949494 (--calcite-color-border-input) and background #ffffff (--calcite-color-foreground-1) would do it.

Acceptance criteria

• Update the component's track colors
• Update border color of the handle
• Update the component's color on hover
• Simplify the focus to a single outer ring

Reproduction Sample

https://codepen.io/mjuniper/pen/rNXemPZ?editors=100

Reproduction Steps

1. Visit https://codepen.io/mjuniper/pen/rNXemPZ?editors=100
2. Observe that the contrast between the track border (#d4d4d4) and the track background (#f3f3f3) is only 1.3
3. Also observe that the contrast between the track border and the white surrounding background is only 1.48.

Reproduction Version

2.13.0

Working W3C Example/Tutorial

No response

Relevant Info

No response

Regression?

No response

Priority impact

impact - p1 - need for current milestone

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Hub

[geospatialem]

Adding design for expertise on any modifications to the switch component's contrast when in the "off" position.