'Why is focus-visible applied on page load

If I understand correctly, focus-visible is only applied to an element if it is focused because of a keyboard interaction. However, in the following example, if I programmatically focus the element on page load, the focus ring shows up as well.

https://codesandbox.io/s/focus-on-page-load-jy595z?file=/src/index.js

Is this behavior expected? If so, what's the best way to disable it while keeping the page accessible (stop showing the focus ring on page load but still able to highlight the focused element with keyboard navigation)



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source