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 #1359.

Actual Behavior

Some components elements are depicted as block elements when focused.

Expected Behavior

Focus highlights the extent of the element.

Components

• color-picker: feat(color-picker): replaces thumb focus outline to rounded #7378 (verified in 1.5.0-next.30)
• link: feat(switch): updates focus outline to be rounded #7390 (verified in 1.5.0-next.30)
• pagination: no change
• rating: Focus outline should appear when clicked fix(rating): adds focus outline on click #7341
• stepper: no change
• tabs: no change
• switch: feat(switch): updates focus outline to be rounded #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 #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?

[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]

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.