fix: Show button focus styles only when needed

[gnapse]

Short description

In our products today, when you click a button with the mouse, it stays visually as if hovered, even when you moved the mouse out of it. This is because buttons stay focused after clicked, and we have this rule that hover and focus states show visually the same. This is, of course, disruptive to mouse-centric users, who do not expect that unhovering leaves the button as if "engaged".

Here we're switching from :focus to :focus-visible, which automatically and transparently fixes this issue. Browser support is already good enough (all latest versions of all major supported browsers already support this, and while we may still support older versions of these browsers that do not yet support this CSS pseudo-selector, this is acceptable as it is not super disruptive, and any user who complains only need to upgrade their browser of choice).

PR Checklist

• Added tests for bugs / new features
• Updated docs (storybooks, readme)
• Executed npm run validate and made sure no errors / warnings were shown
• Described changes in CHANGELOG.md
• Bumped version in package.json and package-lock.json (npm --no-git-tag-version version <major|minor|patch>) ref
• Updated all static build artifacts (npm run build-all)

Versioning

Patch release.