[button] focus-visible vs focus when focus persist after clicking with a mouse for keyboard actions

[valerii15298]

Docs feedback

When clicking with a mouse on a button the button stays focused(tailwind focus: styles apply). So when pressing then Space or Enter the button receives click event and handles it.

The issue is that examples use :focus-visible pseudo and not :focus so user does not have visibility that button is currently focused and clicking Space or Enter would trigger some action. In cases when the button does some change or potential destructive action this can be a bad UX.

Suggested docs improvement

Change the examples in button docs to use :focus selector or prevent keyboard actions when button is focused via mouse and not a keyboard.

Example in MUI: https://mui.com/material-ui/react-button/#basic-button
When clicking with mouse and then press Space or Enter the MUI button is not activated(does not receive the click event)

[atomiks]

This is a Firefox-only browser issue

Chrome and Safari trigger :active and :focus-visible when you use the keyboard, making it very clear. In contrast, Firefox does neither of those.

Screen.Recording.2026-01-16.at.3.58.36.pm.mov

[valerii15298]

@atomiks i think you misunderstood what I meant. And you are talking about different bug.

I meant that when clicking button with mouse and then pressing enter or space - the button is triggered. Which is okay, but before pressing enter user doesn't necessary know what will be triggered because focus-visible only works when navigating with tab and not focusing via mouse.

I'm testing on

Safari 26.2
MacOS

[atomiks]

Material UI still fires click on Space + Enter after a pointer click.

This is just native behavior and I don't see why it's necessary to work around it:

Screen.Recording.2026-01-16.at.8.55.00.pm.mov

[oliviertassinari]

https://bugzilla.mozilla.org/show_bug.cgi?id=68851 (HTML buttons should go :active on keydown (spacebar)), 26 years old, lol.

[valerii15298]

@atomiks you are right about mui button. I assumed that click was not fired because there is no any visual indication at all(which is a separate topic and is bad UX from mui button side).

safari-buttons.mov

Safari 26.2
Here I tested MUI button, native button and base ui button.
For each button: I clicked it, then pressed Space and then pressed Enter

• MUI Button: click is triggered in all three cases but when triggered via Space or Enter - no visual indication.

• Native Button: click is triggered only via mouse click, when pressing Space or Enter - click is not fired(but in chrome click is triggered in all three cases and there is visual indication).

• BaseUI Button: click is triggered in all three cases and there is visual indication when it is triggered via Space or Enter

My only point was that in base ui docs for button, after button click there is no visual indication that button is focused and subsequent keyboard actions like Space or Enter would trigger click. And that maybe totally okay and intended behavior. By default browser also does not show outline for focus: state.

This is really nit pick docs discussion and users can chose different styling. As a mouse + keyboard user I always prefer to see what is focused on the page after mouse click(so that before I press any key I know what will be triggered), but I understand that some users find it ugly as stated in MDN and most of the websites do not show visual indication for focus: state.

Taking it into account - this is discussion about default button example in docs and seems minor one, so if no one minds I would close it.

[oliviertassinari]

As a mouse + keyboard user I always prefer to see what is focused on the page after mouse click(so that before I press any key I know what will be triggered), but I understand that some users find it ugly as stated in MDN and most of the websites do not show visual indication for focus: state.

Yeah, I don't expect that we will ever change this. Users have different preferences :focus-visible was precisely introduced by the platform to make it easier to implement the opposite of what you expect.

[valerii15298]

@oliviertassinari yep yep, I know, you are right. Not necessary like it, but it's the standard nowadays. Unfortunately browsers don't have a setting to change focus-visible to always be the same as focus.

Sorry for taking your time.