This class is assigned to elements that were focused by Unpoly but should not
have a visible focus ring.
You can use this class to remove an unwanted focus outline.
Relation to :focus-visible
Unpoly will try to unset :focus-visible whenever it sets .up-focus-visible, but can only do so
in some browsers.
Because of this the .up-focus-hidden class may be set on elements that the browser considers to be
:focus-visible.
Example
You may see unwanted focus rings that you inherited from a user agent stylesheet or from
a CSS framework like Bootstrap. You can remove these outlines for most mouse and touch interactions, using CSS like this:
:focus:not(:focus-visible, .up-focus-visible),
.up-focus-hidden {
outline: none !important;
}
By default Unpoly removes an outline CSS property from elements with an .up-focus-hidden class.
Tip
CSS frameworks might render focus rings using properties other than outline. For example,
Bootstrap uses a box-shadow to produce a blurred outline.
