Difficult to visually determine if focused action is active

[nwhittaker]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

When an action has focus, it is difficult to tell if the action is active.

Inactive	Active

Expected Behavior

The action's background is the same as when it's unfocused and unhovered. The background color of the inactive action is still set to --calcite-action-background-color-hover when hovered.

Inactive	Active

Reproduction Sample

https://codepen.io/nwhittaker-esri/pen/RwXPRVB

Reproduction Steps

1. Visit the repro.
2. Move the pointer over/out the action and notice it responds with hover styles.
3. Click the action to focus and enable its active state.
4. Click the action again to disable its active state.
5. Move the pointer over/out the action and notice the background color remains. This makes it difficult to tell if the action is really no longer active. Was instead expecting the hover styles from step 1 to be restored.

Reproduction Version

2.12.2

Relevant Info

An accessibility concern is whether the active styling offers enough contrast. I was considering that out-of-scope and perhaps more appropriate for #5003 anyway.

Should reconsider if the focus style should even get a background change in cases where its focus ring is visible. Of course the user can shift focus, but this is a less discoverable remediation, and it also adds effort to using the action. If focus and hover styles did not share a background color, then moving the pointer off the action would be a more discoverable remediation.

Regression?

No response

Priority impact

impact - p2 - want for an upcoming milestone

Impact

Looking for a workaround, --calcite-action-background-color-hover exists, however what really would be needed is a way to set the hover and focus colors separately.

Usability is mostly impacted as it is not immediately clear if an action is really inactive, or not.

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 Field Apps

[geospatialem]

Adding design for additional expertise for adoption of states in the action component.

[ashetland]

Closing in favor of #10007.