[calcite-checkbox]: Initial render of unselected checkbox does not show up in high contrast

[jasdelreyes]

Check existing issues

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

Summary

Calcite checkbox is not visible on initial render when unselected in high contrast browsers.

More details on repro: https://devtopia.esri.com/WebGIS/arcgis-portal-app/issues/54063

Other relevant issue: https://devtopia.esri.com/WebGIS/arcgis-app-components/issues/5887

Actual Behavior

When calcite checkbox is used in high contrast browsers, the initial render of the component, when unselected, does not show visibly.

Expected Behavior

Calcite checkbox's box outline should always be visible.

Reproduction Sample

https://codepen.io/jasdelreyes/pen/MWNpvKO?editors=100

Reproduction Steps

1. Turn on high contrast mode in your browser or operating system.
   • This was initially found on a Windows computer on Firefox with high contrast mode on
2. Visit the codepen link mentioned above

Reproduction Version

~2.13.1

Working W3C Example/Tutorial

No response

Relevant Info

No response

Regression?

No response

Priority impact

impact - p2 - want for an upcoming milestone

Calcite package

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

Esri team

ArcGIS Online

[jasdelreyes]

cc @paulcpederson @mpriour

[mpriour]

Happy to look at this and make a PR to fix it.