Giving focus to Dialog buttons using :focus-visible

[vhscom]

When programmatically selected HTMLButtonElement elements using :focus-visible to manage visible focus state will not be rendered with an outline/focus ring inside a dialog. There's an HTML proposal linked below which would update FocusOptions so in the future we'll be able to focus buttons using :focus-visible styles and not only :focus within dialogs:

The proposal:
whatwg/html#7830

Without getting into details, this is a long-standing issue which you can read about the merits of within the links provided in the above issue. When the proposal makes it to spec here's the likely enhancement we'll want to make to allow button elements using :focus-visible styles to appear focused when a Dialog is opened:

form[control].focus({ focusVisible: true });

Dropping this in a discussion here for now and would expect this to be supported by the upstream Headless UI library when it becomes available.