Focus-styling uses :focus, could :focus-visible be an improvement?

[JonatanLindstrom]

Currently with the use of :focus selectors, many components (such as Button's) get the focus styles on mouse clicks. A better experience might be to user :focus-visible to only display the focus-highlighting on navigation by keyboard.

:focus-visible has good support on newer browsers with only Safari lacking behind and in need of either a polyfill or a fallback strategy. A fallback strategy could be defining standard :focus-rules (as in current implementation) and add rules that overwrites them when the browser supports :focus-visible (example from the polyfill repo).

I can probably draft a PR if the issue gets a green light, but don't want to do the work before asking for your opinions. So, is adding :focus-visible-support something which you could see as an improvement? Any input in supporting other browsers (e.g. polyfill vs fallback vs ignoring safari and ie11)?

[illright]

I'm not sure if this can really lead to better user experience. I must confess I haven't heard of this pseudoclass before, but I believe that it should be indicated that mouse clicks change the focus from one element to another, so that one could carry on with the keyboard.

Why do you think it's better that Buttons don't show focus on mouse clicks?

[JonatanLindstrom]

I think it is visible through the ripple that the click grants focus, but for many applications you would only want the styling for the buttons if they are currently being used.

One example would be the date-picker that renders a calender: When I go to the next month the button remains highlighted as it has focus (see screenshot) but the user might rather want to pick a date and doesn't care whether the focus is on the arrow or not (assuming the user is navigating with the mouse, otherwise the focus is important so the user can navigate to the calendar). This could instead lead to the user thinking they can only go forward in time and not back, as the buttons differ in styling.

Calendar state after clicking forward one month, showing focus on the go forward button rather than showing an empty slate, which I think would be more clear to a mouse-navigating user.

[illright]

I finally got around to really researching this pseudo-class and I must say, it sounds pretty good. I wouldn't call the browser support good, given the lack of support by Safari, but this could be a nice progressive enhancement.

Generally, I think the focus styles could use some improvement around the library in general. This thing will definitely be on the list