Focus ring appears on autoFocus button in dialog even when opened with mouse click

[martinostvik]

Hi! 👋
I'm using react-aria-components to build a dialog with a confirm button that has autoFocus. The issue I'm facing is that when the dialog is opened via mouse click, the button still shows the focus-visible ring — even though the user hasn't used the keyboard to navigate.

From my understanding, focus-visible styles should only appear when the user opens the dialog using a keyboard (like pressing Enter or Tab), not with a mouse click.

Here’s a simple example that reproduces the issue using tailwind for styling:

function ExampleDialog() {
  return (
    <DialogTrigger>
      <Button>Open dialog</Button>
      <ModalOverlay className="fixed inset-0 bg-black/30 flex items-center justify-center">
        <Modal className="bg-white p-6 rounded-md shadow-lg w-80">
          <Dialog className="outline-none">
            {({ close }) => (
              <>
                <h3 className="text-lg font-bold mb-4">Confirm Action</h3>
                <div className="flex justify-end gap-2">
                  <Button
                    autoFocus
                    onPress={() => {
                      alert('Confirmed');
                      close();
                    }}
                    className="outline-hidden focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-500 px-4 py-2"
                  >
                    OK
                  </Button>
                </div>
              </>
            )}
          </Dialog>
        </Modal>
      </ModalOverlay>
    </DialogTrigger>
  );
}

When clicking the "Open dialog" button with a mouse, the OK button gets focus (as expected), but it also shows the focus ring, which I’d expect to be suppressed since it wasn’t a keyboard interaction.

Question:
Is there a recommended way to suppress the focus-visible ring on autoFocus elements unless the dialog was opened via keyboard?

Thanks in advance! 🙏

[snowystinger]

This is intentional and follows the guidelines from the spec draft for focus-visible.
https://drafts.csswg.org/selectors/#the-focus-visible-pseudo which says

If a newly-displayed element automatically gains focus (such as an action button in a freshly opened dialog), that element should indicate focus.

We think it's an important step to assist users in knowing that focus has moved somewhere they did not explicitly try to send it. If a user decides to switch modality upon entering a dialog for example, it's useful to know if focus went to a cancel, confirm, or some other child of the dialog such as a form element, without needing to press Esc (could potentially also cancel) or Tab (could move a user to the next element, requiring a shift tab to go back) or Enter (could possibly confirm).