Hitbox focus on components

[geospatialem]

Summary

Complete an audit of all the components to reduce block elements in focus. For instance, the color picker selector.

This came up as an action as part of https://github.com/Esri/calcite-components/issues/1359.

Actual Behavior

Some components elements are depicted as block elements when focused.

Expected Behavior

Focus highlights the extent of the element.

Components

• [x] color-picker: #7378 (verified in 1.5.0-next.30)
• [x] link: #7390 (verified in 1.5.0-next.30)
• [x] pagination: no change
• [x] rating: Focus outline should appear when clicked #7341
• [x] stepper: no change
• [x] tabs: no change
• [x] switch: #7390 (verified in 1.5.0-next.30)

Reproduction Sample

https://developers.arcgis.com/calcite-design-system/components/color-picker/#sample

Reproduction Steps

1. Open the sample page.
2. Navigate into the color picker using keyboard keys (tab) to see the focus highlighting a box for the color picker selector.

Reproduction Version

beta.82

Working W3C Example/Tutorial

N/A

Relevant Info

N/A

Regression?

No response

[geospatialem]

Audit results:

1. color-picker

Includes boxy focus on the following elements of the component (displayed in one image below for clarity):

• color handle
• swatch handle and
• RGB and HSV groupings (depicted in a 1px black rectangle)

2. link

The hitbox needs a bit more padding, it's a bit hard to discern on the left/right, includes spacing where links could extend multiple lines.

3. pagination cc https://github.com/Esri/calcite-components/issues/5113

The focus and selection conflict, maybe a differing focus, such as a circle would help differentiate?

4. rating

There is a boxed focus so noting as part of the audit, but it seems to be the best look for the component.

5. stepper and stepper-item

There is a boxed focus so noting as part of the audit, but it seems like a low priority to mitigate, if at all.

6. tabs

There is a boxed focus so noting as part of the audit, but it seems to be the best look for the component.

cc @driskull @macandcheese - Based on the above results, should we aim to accomplish any of the above for the January release? Thinking link could be a potential candidate (the others likely post 1.0).

[geospatialem]

Adding to the February priorities, but the milestone could change depending on prioritization to tackle the above components hitbox focus.

[geospatialem]

Adding one additional component per feedback from Living Atlas:

7. switch

Boxed focus, maybe could be similar to FAB's focus (radius)?

[geospatialem]

@ashetland @SkyeSeitz We've gotten some feedback from a few teams regarding our focus hitbox. I performed a rough audit late last year, but would be good to get a design eye on this one, too. Could you both take a peek, and determine if the above and any other components we could the focus states on in the next few weeks?

[ashetland]

Specific to Link in this list, issue https://github.com/Esri/calcite-components/issues/6588 mentions that links used to have a +2px offset on the focus outline instead of -2px.

[ashetland]

Also related: https://github.com/Esri/calcite-components/issues/3392

[yelenakreyndel]

@geospatialem Aaron mentioned he completed design work. The issue needs to be reassigned to a developer.

[ashetland]

Recommendations in Figma: https://www.figma.com/file/VWnXYHCyCM8coZCYsCxAAt/Focus-outline-audit-%5Bissue-4633%5D?node-id=0%3A1&t=UryXS4JodeKj9btE-1

[geospatialem]

Reassigned to the July priorities to adopt all of the focus changes across the identified components in https://github.com/Esri/calcite-components/issues/4633#issuecomment-1511590646.

[geospatialem]

Most of the above have been tackled, with rating being prioritized for the August release.

Components verified in 1.5.0-next.30:

• color-picker:

• link:

• switch:

[github-actions[bot]]

Installed and assigned for verification.

[geospatialem]

The final component, rating has been mitigated on click similar to keyboard use, which has been verified on the main branch.