From bf1d0bedecbc87fb3cf623e49066b4b54fb0a3ed Mon Sep 17 00:00:00 2001
From: Kristofor Salmin <racse1@users.noreply.github.com>
Date: Wed, 3 Oct 2018 16:34:20 +0300
Subject: [PATCH] Remove tabindex ruleset

`tabindex=-1` CSS ruleset has been removed in order to support visual feedback on programmatically focused elements.
---
 CHANGELOG.md    |  1 +
 lib/base.css    | 10 ----------
 test/index.html | 12 ------------
 3 files changed, 1 insertion(+), 22 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 29665b1..a9bea7f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ### HEAD
 
 * Update normalize.css to `^8.0.0`.
+* Remove `tabindex=-1` ruleset.
 
 ### 4.0.0 (September 25th, 2017)
 
diff --git a/lib/base.css b/lib/base.css
index 865e97e..a74d8fd 100644
--- a/lib/base.css
+++ b/lib/base.css
@@ -71,13 +71,3 @@ ul {
   margin: 0;
   padding: 0;
 }
-
-/**
- * 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.
- */
-
-[tabindex="-1"]:focus {
-  outline: none !important;
-}
diff --git a/test/index.html b/test/index.html
index d17fa75..8d33121 100644
--- a/test/index.html
+++ b/test/index.html
@@ -20,11 +20,6 @@
   #iframe iframe {
     background-clip: content-box;
   }
-
-  #tabindex a:focus,
-  #tabindex button:focus {
-    outline: 5px solid red;
-  }
 </style>
 
 <div class="Test">
@@ -135,13 +130,6 @@ <h3 class="Test-it">has no border, margin, or padding</h3>
     <iframe class="dev-highlight"></iframe>
   </div>
 
-  <h2 class="Test-describe">[tabindex="-1"]:focus</h2>
-  <h3 class="Test-it">has no focus outline (try clicking to trigger focus)</h3>
-  <div class="Test-run" id="tabindex">
-    <a class="dev-highlight" href="#n" tabindex="-1">example link</a>
-    <button class="dev-highlight" tabindex="-1">example button</button>
-  </div>
-
   <h2 class="Test-describe">border-box</h2>
   <h3 class="Test-it">padding should not add to the element width (elements should be centred)</h3>
   <div class="Test-run" style="width: 80%; margin: 0 auto">