Edit this page

up.viewport .up-focus-visible
HTML selector

This feature is experimental. It may be changed or removed in a future version.

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.


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">

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

.my-button {
  &.up-focus-visible {
    outline: 1px solid royalblue;