Отключенная кнопка начальной загрузки может быть доступна из вкладок

Question

Таким образом, выполнение нижеприведенной кнопки должно быть отключено, но вы можете получить доступ к кнопке с помощью табуляции:

<button type="submit" class="btn btn-primary disabled">Submit</button>

Итак, чтобы этого не случилось, мне нужно добавить tabindex="-1" ко всем элементам, которые я хочу отключить? Я думал, что с помощью отключенного класса об этом позаботятся, но, похоже, нет.

Есть ли другой способ сделать это?

Answer 1

Да, это раздражает, но также довольно логично. Вкладка и фокус - это другая задача браузера; CSS (за некоторыми исключениями) в основном о визуальном поведении. Добавление tabindex="-1" станет адским, так как вы, скорее всего, также захотите сфокусировать кнопку с помощью вкладок, когда она больше не будет отключена.

Я бы предложил обработчик, который перемещает фокус на предыдущий или следующий элемент, если кнопка получает фокус и имеет значение disabled:

$('button').focus(function(e) {
  if ($(this).hasClass('disabled')) {
    e.currentTarget.nextElementSibling.focus()
    //or e.currentTarget.previousElementSibling.focus()
  }
})