Is your feature request related to a problem? Please describe.

Frequently, input components are implemented using HTML <button> components which display popovers, such as for combo-boxes and date selectors (e.g. in Shadcn: combobox, date picker).

If one of these inputs has a validation error, when React Hook Form focuses on it, we don't see a focus outline by default, because buttons don't define :focus - they only define :focus-visible.

Describe the solution you'd like

There is a new option for focus(): options.focusVisible, which allows programmatic focus to force focus-visible styles to be displayed.

Support here isn't great yet, but it's a standard, it's supported in Safari and Firefox, and there is discussion about supporting it in Chrome.

Would it be reasonable to always supply this option when calling .focus() in React Hook Form? As more browsers start to implement this option, users would immediately benefit from more accessible button-based inputs.

Describe alternatives you've considered

A workaround for this is for developers to define a :focus style, but then these components will get focus rings even when clicked normally, which isn't ideal.

A more complex workaround is to use javascript to apply a :focus style only if the button's value has an error. UI wise, this seems better than nothing, but the developer experience isn't great.