twbs/bootstrap

Remove tabindex ruleset

danielnixon opened this issue · 5 comments

danielnixon commented

The following isn't specific to any browser or OS.

Bootstrap contains the following SCSS in _reboot.scss:

// Suppress the focus outline on elements that cannot be accessed via keyboard.
// This prevents an unwanted focus outline from appearing around elements that
// might still respond to pointer events.
//
// Credit: https://github.com/suitcss/base
[tabindex="-1"]:focus {
  outline: 0 !important;
}

This was actually removed from suitcss/base five months ago:

tabindex=-1 CSS ruleset has been removed in order to support visual feedback on programmatically focused elements.

Please consider also removing it from Bootstrap.

The visual focus indicator is required for accessibility. See e.g.:

If an author programmatically sets focus to a div (e.g. when a search form returns results you might move focus to the results) then they will need to undo Bootstrap's outline: 0.

patrickhlauke commented

i agree in principle - though would caution that because of the naive way many browsers still apply the focus outline as a result of mouse interaction as well in these cases will have some odd repercussions. if we remove that rule from our reboot styles, we should reintroduce it specifically for some things such as modal dialogs - otherwise, even after a mouse activation, our dialogs will have a very prominent focus outline (since they're tabindex="-1" and programmatically focused).

in future, we can probably generalise this with :focus-visible, but for now we need to weigh up both the aesthetics and visual presentation for non-keyboard users and clarity for keyboard users.

patrickhlauke commented

and for reference, once :focus-visible is supported, the rule could be modified to

[tabindex="-1"]:focus:not(:focus-visible) { outline: 0 !important; }

(can be verified in Chrome > 67 with experimental web features flag enabled)

patrickhlauke commented

in fact, we can do both: replace the current [tabindex="-1"] reboot rule with that, and explicitly suppress outline on the modal dialog when it receives programmatic focus. once :focus-visible has more support, we can then drop the second part of this (or make it explicitly a positive :focus-visible style for modal dialogs when reached as a result of keyboard interaction)

patrickhlauke commented

looking at our code now, it seems there's already explicit outline suppression for .modal ... so pushing the above change to reboot would not affect modals. going to investigate if there are other cases where vanilla bootstrap components currently get programmatic focus on elements with negative tabindex...

  • 👍1