Hide focus outlines without crippling a11y, plus active state change for buttons

edit.html

@@ -359,5 +359,6 @@
 
     </svg>
   
+  <script src="vendor/focus/what-input.min.js"></script>
   </body>
 </html>

edit/edit.css

@@ -145,7 +145,6 @@ input:invalid {
   align-items: center;
   margin-left: -13px;
   cursor: pointer;
-  outline: none;
   margin-top: 8px;
   margin-bottom: 8px;
 }
@@ -360,7 +359,6 @@ html:not(.usercss) .applies-to li:last-child .add-applies-to {
 }
 .regexp-report summary, .regexp-report div {
   cursor: pointer;
-  outline: none;
 }
 .regexp-report mark {
   background-color: rgba(255, 255, 0, .5);
@@ -376,7 +374,6 @@ html:not(.usercss) .applies-to li:last-child .add-applies-to {
   font-weight: bold;
   margin-left: -1rem;
   margin-bottom: .5rem;
-  outline: none;
   cursor: default;
   overflow-wrap: break-word;
 }

global.css

@@ -1,3 +1,13 @@
+html:not([data-whatinput="keyboard"]) button,
+html:not([data-whatinput="keyboard"]) input[type="checkbox"],
+html:not([data-whatinput="keyboard"]) input[type="radio"],
+html:not([data-whatinput="keyboard"]) #header summary,
+html:not([data-whatinput="keyboard"]) .applies-to-extra-expander,
+html:not([data-whatinput="keyboard"]) .regexp-report summary,
+html:not([data-whatinput="keyboard"]) .regexp-report div {
+  outline: none;
+}
+
 button {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -17,6 +27,13 @@ button:not(:disabled):hover {
   border-color: hsl(0, 0%, 52%);
 }
 
+button:active {
+  background-color: hsl(0, 0%, 95%);
+  border-color: hsl(0, 0%, 52%);
+  background: url(../images/button-active.png)repeat-x;
+  background-size: 100% 100%;
+}
+
 /* For some odd reason these hovers appear lighter than all other button hovers in every browser */
 #message-box-buttons button:not(:disabled):hover {
   background-color: hsl(0, 0%, 90%);
@@ -60,12 +77,11 @@ input[type="checkbox"]:not(.slider) {
   display: inline-flex;
   border-radius: 2px;
   background-color: hsla(0, 0%, 0%, .1);
-  outline: none;
   margin: 0;
   transition: background-color .1s, border-color .1s;
 }
 
-input[type="checkbox"]:not(.slider):not(:disabled):hover {
+input[type="checkbox"]:not(.slider):hover {
   border-color: hsl(0, 0%, 32%);
   background-color: hsl(0, 0%, 82%);
 }
@@ -128,7 +144,6 @@ select {
 input[type="radio"] {
   -webkit-appearance: none;
   -moz-appearance: none;
-  outline: none;
   background: hsl(0, 0%, 88%);
   border-radius: 50%;
   border: 1px solid hsl(0, 0%, 60%);
@@ -172,6 +187,7 @@ select[disabled] > option {
 
 @supports (-moz-appearance: none) {
   .moz-appearance-bug .svg-icon.checked,
+  .moz-appearance-bug .onoffswitch input,
   .moz-appearance-bug input[type="radio"]:after {
     display: none !important;
   }

install-usercss.html

@@ -91,6 +91,7 @@
     </div>
   </div>
   
+  <script src="vendor/focus/what-input.min.js"></script>
   <script src="/install-usercss/install-usercss.js"></script>
 
   <svg xmlns="http://www.w3.org/2000/svg" style="display: none !important;">

manage.html

@@ -337,6 +337,7 @@
 
 <div id="installed"></div>
 
+<script src="vendor/focus/what-input.min.js"></script>
 <script src="manage/import-export.js"></script>
 <script src="msgbox/msgbox.js"></script>
 <script src="manage/incremental-search.js" async></script>

manage/manage.css

@@ -212,7 +212,6 @@ select {
 .applies-to-extra-expander {
   font-weight: bold;
   cursor: pointer;
-  outline: none;
 }
 
 .applies-to-extra-expander {
@@ -284,7 +283,6 @@ select {
   align-items: center;
   margin-left: -13px;
   cursor: pointer;
-  outline: none;
 }
 
 #header summary h2 {
@@ -363,7 +361,6 @@ select {
 
 .filter-selection select {
   height: 18px;
-  outline: none;
   border: none;
   max-width: 100%;
   padding-left: 4px;

options.html

@@ -158,6 +158,7 @@
     </div>
   </div>
 
+  <script src="vendor/focus/what-input.min.js"></script>
   <script src="options/options.js"></script>
 </body>
 </html>

options/onoffswitch.css

@@ -9,7 +9,21 @@
 }
 
 .onoffswitch input {
-  display: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  pointer-events: none;
+  position: absolute;
+  top: -8px;
+  bottom: -10px;
+  left: -10px;
+  width: calc(100% + 12px);
+}
+
+#message-box .onoffswitch input {
+  top: -6px;
+  left: -6px;
+  bottom: 0;
+  height: calc(100% + 12px);
 }
 
 .onoffswitch span {

popup.html

@@ -246,5 +246,6 @@
     </symbol>
   </svg>
   
+  <script src="vendor/focus/what-input.min.js"></script>
 </body>
 </html>

vendor/focus/what-input.min.js

@@ -0,0 +1,7 @@
+/**
+ * what-input - A global utility for tracking the current input method (mouse, keyboard or touch).
+ * @version v5.0.3
+ * @link https://github.com/ten1seven/what-input
+ * @license MIT
+ */
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("whatInput",[],t):"object"==typeof exports?exports.whatInput=t():e.whatInput=t()}(this,function(){return function(e){function t(o){if(n[o])return n[o].exports;var i=n[o]={exports:{},id:o,loaded:!1};return e[o].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t){"use strict";e.exports=function(){var e=document.documentElement,t=null,n="initial",o=n,i=null,r=["input","select","textarea"],u=[],d=[16,17,18,91,93],a={keydown:"keyboard",keyup:"keyboard",mousedown:"mouse",mousemove:"mouse",MSPointerDown:"pointer",MSPointerMove:"pointer",pointerdown:"pointer",pointermove:"pointer",touchstart:"touch"},s=!1,c=!1,w={x:null,y:null},p={2:"touch",3:"touch",4:"mouse"},f=!1;try{var l=Object.defineProperty({},"passive",{get:function(){f=!0}});window.addEventListener("test",null,l)}catch(e){}var v=function(){var e=!!f&&{passive:!0};window.PointerEvent?(window.addEventListener("pointerdown",m),window.addEventListener("pointermove",y)):window.MSPointerEvent?(window.addEventListener("MSPointerDown",m),window.addEventListener("MSPointerMove",y)):(window.addEventListener("mousedown",m),window.addEventListener("mousemove",y),"ontouchstart"in window&&(window.addEventListener("touchstart",x,e),window.addEventListener("touchend",m))),window.addEventListener(b(),y,e),window.addEventListener("keydown",x),window.addEventListener("keyup",x),window.addEventListener("focusin",E),window.addEventListener("focusout",L)},m=function(e){if(!s){var t=e.which,i=a[e.type];"pointer"===i&&(i=g(e));var u="keyboard"===i&&t&&-1===d.indexOf(t)||"mouse"===i||"touch"===i;if(n!==i&&u&&(n=i,h("input")),o!==i&&u){var c=document.activeElement;c&&c.nodeName&&-1===r.indexOf(c.nodeName.toLowerCase())&&(o=i,h("intent"))}}},h=function(t){e.setAttribute("data-what"+t,"input"===t?n:o),M(t)},y=function(e){if(O(e),!s&&!c){var t=a[e.type];"pointer"===t&&(t=g(e)),o!==t&&(o=t,h("intent"))}},E=function(n){t=n.target.nodeName.toLowerCase(),e.setAttribute("data-whatelement",t),n.target.classList&&n.target.classList.length&&e.setAttribute("data-whatclasses",n.target.classList.toString().replace(" ",","))},L=function(){t=null,e.removeAttribute("data-whatelement"),e.removeAttribute("data-whatclasses")},x=function(e){m(e),window.clearTimeout(i),s=!0,i=window.setTimeout(function(){s=!1},100)},g=function(e){return"number"==typeof e.pointerType?p[e.pointerType]:"pen"===e.pointerType?"touch":e.pointerType},b=function(){return"onwheel"in document.createElement("div")?"wheel":void 0!==document.onmousewheel?"mousewheel":"DOMMouseScroll"},M=function(e){for(var t=0,i=u.length;t<i;t++)u[t].type===e&&u[t].fn.call(void 0,"input"===e?n:o)},k=function(e){for(var t=0,n=u.length;t<n;t++)if(u[t].fn===e)return t},O=function(e){w.x!==e.screenX||w.y!==e.screenY?(c=!1,w.x=e.screenX,w.y=e.screenY):c=!0};return"addEventListener"in window&&Array.prototype.indexOf&&function(){a[b()]="mouse",v(),h("input"),h("intent")}(),{ask:function(e){return"intent"===e?o:n},element:function(){return t},ignoreKeys:function(e){d=e},registerOnChange:function(e,t){u.push({fn:e,type:t||"input"})},unRegisterOnChange:function(e){var t=k(e);t&&u.splice(t,1)}}}()}])});