disabled bootstrap button can be accessed from tabbing

Question

So by doing the below the button is supposed to be disabled, but you can actually access the button using tabbing:

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

So to prevent that from happening do I have to add tabindex="-1" to all of the elements I want to be disabled? I thought by using the disabled class this will be taken care of, but it seems not.

Is there any other way to do this?

Answer 1

Yes, that is annoying but also rather logical. Tabbing and focus is a different browser-task; CSS is (with a few exceptions) mostly about visual behaviour. Adding tabindex="-1" would become hellish, since you most likely also want to get the button focused through tabbing once it is no longer disabled.

I would suggest a handler that moves focus to either the previous or next element, if the button is receiving focus and it is disabled :

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