КодПен

Вставка элемента в порядок табуляции

Вставьте элемент в естественный порядок табуляции, используя tabindex="0" . Например:

<div tabindex="0">Focus me with the TAB key</div>

Чтобы сфокусировать элемент, нажмите клавишу Tab или вызовите метод focus() элемента.

Удаление элемента из порядка табуляции

Удалите элемент, используя tabindex="-1" . Например:

<button tabindex="-1">Can't reach me with the TAB key!</button>

Это удаляет элемент из естественного порядка табуляции, но элемент все равно можно сфокусировать, вызвав его метод focus() .

Обратите внимание, что применение tabindex="-1" к элементу не влияет на его дочерние элементы; если они находятся в порядке табуляции естественным образом или из-за значения tabindex , они останутся в порядке табуляции. Чтобы удалить элемент и все его дочерние элементы из порядка табуляции, рассмотрите возможность использования inert полифила WICG . Полифилл имитирует поведение предлагаемого inert атрибута, который предотвращает выбор или чтение элементов с помощью вспомогательных технологий.

Заставьте вещи вращаться!

.loader {
  animation: spin 0.75s infinite steps(var(--count));
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

Обратите внимание на использование steps(var(--count)) для получения правильного эффекта ✨