<Button> should not look focused after clicking and moving mouse away #1403
Description
I was always wondering why after clicking Patternfly <Button> it stays clicked (darker) - I have to click in other place (and I always did it to not feel there's some tension) to make the button go back to initial light state.
Here's a video showing how HTML <button> (with styled :hover and :active) and Patternfly <Button> work.
https://github.com/user-attachments/assets/894fa723-bb59-4c6c-a044-dce662159009
https://getbootstrap.com/docs/5.3/examples/buttons/ shows the behavior I find more natural - when you hover+click+hover_away, the button is as it was before.
Mind that it's not about https://www.w3.org/WAI/WCAG21/Understanding/focus-visible, where it is suggested to highlight focused element for keyboard users:
Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
[…]
When a user interface control receives focus, a visible border is displayed around it.
There's new (CSS Selectors 4) :focus-visible and https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible says:
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.
So what Bootstrap is doing, it's defining a bordered :focus-visible pseudoclass, not :focus, so the behavior is more natural (in my subjective opinion).
Here's a combination of :hover and :focus:
https://github.com/patternfly/patternfly/blob/3caaf892d89e77c23b5ad73995ef1f0cbbf19bd5/src/patternfly/components/Button/button.scss#L671-L678
Indeed - when you click any button (even native HTML one), it is focused (you can confirm by TAB + shift-TAB), but probably it'd be better to use :focus-visible?