Global and component focus state color #6458
Description
Description
Our focus outline is set to "2px solid --calcite-ui-brand" by default, but we should ensure the focus is exposed across all components and devs can modify to fit their need.
We will also need to document to provide context and process to designers and developers to support WCAG 2.2's upcoming level A requirement with 2.4.7: Focus Visible (Level A).
Acceptance Criteria
Exposed and documented CSS variable which sets the focus color default to --calcite-ui-brand, which can be modified.
Devs should also be able to edit the CSS variable to a color of their choice, for a specific component, or across all components.
Relevant Info
We should also complete an audit on our hitbox focus across components to improve focus throughout our components - refer to #4633
Which Component
All components
Example Use Case
Devs who currently don't like the styling can turn off focus by setting the outline to "0".
We should provide a way to support devs who wish to change the focus color, or as a last resort set the color as "transparent" so the focus state remains to ensure we're meeting and supporting WCAG 2.2 out of the box, and documenting how to change depending on branding needs.
Esri team
Calcite (dev)
monday.com sync: #9366659587