Remove tabindex ruleset

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.:

• https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html
• https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/F78
• http://www.outlinenone.com/

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]

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…

[patrickhlauke]

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)