fix(infieldbutton): no outline on focus-visible

[mdt2]

Description

Addresses issue #2232. Per the spec files, the In-field Button component shouldn't have an outline on keyboard focus. Keyboard focus also looks the same as hover focus for this component.

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps @jenndiaz

1. Open the component in the docs site
   • When you tab through to apply keyboard focus, you should not see an outline
   • Keyboard focus should look the same as the hover state
2. In the docs site, turn on WHCM
   • You should see a border with the Highlight color when:
     • Tabbing with keyboard
     • You click and the button is active
     • You hover a button
   • You shouldn't see a border on hover, active, or focus on disabled infield buttons
   • The border should have the same border radius as the component does when it's not hovered/focused/active
3. Open the component in Storybook
   • When you tab through to apply keyboard focus, you should not see an outline
   • Keyboard focus should look the same as the hover state

Regression testing

Validate:

1. The documentation pages for at least two other components are still loading, including:

• The pages render correctly, are accessible, and are responsive.

5. If components have been modified, VRTs have been run on this branch:

• VRTs have been run and looked at.
• Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

Screenshots

To-do list

• I have read the contribution guidelines.
• I have updated relevant storybook stories and templates.
• I have tested these changes in Windows High Contrast mode.
• If my change impacts other components, I have tested to make sure they don't break.
• If my change impacts documentation, I have updated the documentation accordingly.
• ✨ This pull request is ready to merge. ✨

[github-actions]

🚀 Deployed on https://pr-2288--spectrum-css.netlify.app

[github-actions]

File metrics

Summary

Total size: 3.97 MB^*
Total change (Δ): ⬇ 1.05 KB (0.03%)

Package	Size	Δ
infieldbutton	18.37 KB	🚨 deleted, moved, or renamed

Details

infieldbutton

File	Size	Base	Δ
Total	18.72 KB	18.37 KB	⬇ 0.36 KB (1.86%)
index-base.css	16.57 KB	16.22 KB	⬇ 0.36 KB (2.10%)
index-theme.css	2.72 KB	2.72 KB	-
index-vars.css	18.72 KB	18.37 KB	⬇ 0.36 KB (1.86%)
index.css	18.72 KB	18.37 KB	⬇ 0.36 KB (1.86%)
mods.json	2.16 KB	2.16 KB	-
themes/express.css	1.64 KB	1.64 KB	-
themes/spectrum.css	1.08 KB	1.08 KB	-

* Size determined by adding together the size of the main file for all packages in the library.
* Results are not gzipped or minified.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

[jenndiaz]

Looks good to me!

[pfulton]

@Westbrook mind taking a quick look at this one? Thanks!

[Westbrook]

LGTM!