improve Viewport:focus focusVisible behavior

[axelpale]

Elements that have focus do display an outline in most browsers. This is true for focusable viewport too. Viewport must be focusable in order to receive keyboard events such as arrow key navigation. The outline is generally a good thing for usability. However, because the viewport usually takes the whole viewport, the blue outline is somewhat redundant and possibly annoying.

The Viewport:focus method already has an option to control focus visibility: focusVisible. However, setting this option to false does not hide the outline, at least on Chrome. The method should do more to ensure the expected behavior and cross-compatibility.

The host app can already solve the issue via CSS: .affine-viewport:focus-visible { outline: none }. This solution is a bit hard to find. The Viewport:focus method should apply this style out of the box.

The method cannot directly modify pseudo-class styles via JS but it can modify classes of the viewport. Therefore Tapspace's native CSS should define a class for viewport that does that. Suggested name for the class: focus-invisible