Make named anchor/placeholder link style reset more specific

This avoids applying the reset to named anchors/placeholder links (links
without an `href`) that have explicitly been made keyboard-focusable
(using `tabindex`). This is not fool-proof - it's not
easy/straightforward to check for the actual `tabindex` value itself, to
ensure it's positive, not will this apply if a link has been "blessed"
with `tabindex` via JS. However, this should catch most common uses (and
gives a reasonably valid way around the issue for developers who, for
whatever reason, DO want to use links without `href` - as side effect,
it forces best practice of at least ensuring these links can also be
focused with the keyboard)

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index f2876d1c674a4b488e7c2bc8cda91000d41a2ab3..84daa09b36f6c82b6bce3b6d2315ea365c649e08 100644 (file)
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -171,12 +171,13 @@ a {
   }
 }
 
-// And undo these styles for placeholder links/named anchors (without href).
+// And undo these styles for placeholder links/named anchors (without href)
+// which have not been made explicitly keyboard-focusable (without tabindex).
 // It would be more straightforward to just use a[href] in previous block, but that
 // causes specificity issues in many other styles that are too complex to fix.
 // See https://github.com/twbs/bootstrap/issues/19402
 
-a:not([href]) {
+a:not([href]):not([tabindex]) {
   color: inherit;
   text-decoration: none;