up.viewport .up-focus-visible

HTML selector

This class is assigned to elements that were focused by Unpoly and should have a visible focus ring.

You can use this class to give a new component a focus ring for keyboard users, while not rendering a focus ring for mouse or touch users.

Relation to :focus-visible

Unpoly will try to force :focus-visible whenever it sets .up-focus-visible, but can only do so in some browsers. Because of this the .up-focus-visible class may be set on elements that the browser considers to not be :focus-visible.

Example

When creating a new interactive component, you should make it focusable using the keyboard's Tab key by assigning a [tabindex] attribute:

<span class="my-button" tabindex="0">
  ...
</span>

To show a focus ring for keyboard users only, use CSS like this:

.my-button {
  &:focus-visible:not(.up-focus-hidden),
  &.up-focus-visible {
    outline: 1px solid royalblue;
  }
}