fix(kbutton): fix unfocusing of kbutton

[johncowen]

Summary

Clicking then releasing and moving away from a KButton without a subsequent DOM re-render leaves the KButton in its darker 'focus' state.

This PR changes some selectors to use :focus-visible over just :focus to keep the desired coloring when the browser heuristics have decided that the button should look focused, but doesn't apply them otherwise.

I'm pretty sure this is the correct way to do this going from reading:

For instance, when a button is clicked using a pointing device, the focus is generally not visually indicated, but when a text box needing user input has focus, focus is indicated. While focus styles are always required when users are navigating the page with the keyboard or when focus is managed via scripts, focus styles are not required when the user knows where they are putting focus, such as when they use a pointing device such as a mouse or finger to physically set focus on an element, unless that element continues to need user attention.

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible#focus_vs_focus-visible

My understanding form the above is that buttons generally should use :focus-visible, whereas something like an input field you should generally use ':focus' i.e. with the input field example, if you are changing the border color on 'focus' you probably want that change to stay when you move the pointer away from the input field.

But if folks have a different approach, happy to close this and go with something else.

Also, please shout if its not clear what the issue is, its a very subtle thing and easy to miss.

P.S guessing there could be other components that have similar issues, but I'm not super familiar with all of them so this only addresses KButton.

PR Checklist

• Conventional Commits all commits follow the conventional commit standards outlined in the main README.
• Tests coverage: test coverage was added for new features and bug fixes
• Docs: includes a technically accurate README

[netlify]

✅ Deploy Preview for kongponents-sandbox ready!

Name	Link
🔨 Latest commit	2172e49
🔍 Latest deploy log	https://app.netlify.com/sites/kongponents-sandbox/deploys/65bb988ab5c46300087e040c
😎 Deploy Preview	https://deploy-preview-1984--kongponents-sandbox.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for kongponents ready!

Name	Link
🔨 Latest commit	2172e49
🔍 Latest deploy log	https://app.netlify.com/sites/kongponents/deploys/65bb988aac54640008b02d2f
😎 Deploy Preview	https://deploy-preview-1984--kongponents.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[adamdehaven]

lgtm

[kongponents-bot]

🎉 This PR is included in version 9.0.0-alpha.98 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀