Reset outline to default - roll back #4895 (#5035)

Replaces #4965. Rolls back #4895. Fixes #4964. Partially fixes #4819.

The previous attempts to add a stylised "focus" ring, while with the best intentions, did not take into account how "outline" normally works for people using visual aids. Most high contrast software will effect the outline if its available (ie. make it bolder or more prevalant), thus the "outline" property is paramount to maintaining accessibility.

The previous changes also present issues with elements using box-shadows already, and again, on high contrast, box-shadows are no longer rendered.

This change will bring back the outline property for focus, but with an addition to allow a blue highlight for Firefox, would should keep it in "parity" with WebKit.

Refs:
- https://a11yproject.com/posts/never-remove-css-outlines/
-  http://www.outlinenone.com
- https://stackoverflow.com/questions/52589391/css-box-shadow-vs-outline

modules/backend/assets/css/october.css

@@ -664,7 +664,7 @@ nav#layout-mainmenu a {text-decoration:none}
 nav#layout-mainmenu a:focus {background:transparent}
 nav#layout-mainmenu ul {margin:0;padding:0;list-style:none;float:left;white-space:nowrap;overflow:hidden}
 nav#layout-mainmenu ul li {color:rgba(255,255,255,0.6);display:inline-block;vertical-align:top;position:relative;margin-right:30px}
-nav#layout-mainmenu ul li a {display:inline-block;font-size:14px;color:inherit;outline:none;padding:14px 0 10px}
+nav#layout-mainmenu ul li a {display:inline-block;font-size:14px;color:inherit;padding:14px 0 10px}
 nav#layout-mainmenu ul li a:hover {background-color:transparent}
 nav#layout-mainmenu ul li a:active,
 nav#layout-mainmenu ul li a:focus {text-decoration:none;color:rgba(255,255,255,0.6)}
@@ -771,7 +771,7 @@ nav#layout-mainmenu.navbar-mode-collapse .menu-toggle {display:inline-block;colo
 .mainmenu-collapsed >div ul.mainmenu-nav li:first-child {margin-left:0}
 .mainmenu-collapsed >div ul {margin:0;padding:5px 0 15px 15px;overflow:hidden}
 .mainmenu-collapsed >div ul li {color:rgba(255,255,255,0.6);display:inline-block;vertical-align:top;position:relative;margin-right:30px}
-.mainmenu-collapsed >div ul li a {display:inline-block;font-size:14px;color:inherit;outline:none}
+.mainmenu-collapsed >div ul li a {display:inline-block;font-size:14px;color:inherit}
 .mainmenu-collapsed >div ul li a:hover {background-color:transparent}
 .mainmenu-collapsed >div ul li a:active,
 .mainmenu-collapsed >div ul li a:focus {text-decoration:none;color:rgba(255,255,255,0.6)}

modules/backend/assets/less/layout/mainmenu.less

@@ -20,7 +20,6 @@ body.mainmenu-open {
     display: inline-block;
     font-size: @font-size-base;
     color: inherit;
-    outline: none;
 
     &:hover {
         background-color: transparent;

modules/system/assets/css/styles.css

@@ -89,7 +89,7 @@ textarea {background-image:none}
 a {color:#0181b9;text-decoration:none}
 a:hover,
 a:focus {color:#001721;text-decoration:underline}
-a:focus {outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}
+a:focus {outline:thin dotted;outline-offset:0;outline:4px auto Highlight;outline:4px auto -webkit-focus-ring-color}
 img {vertical-align:middle}
 .img-responsive {display:block;max-width:100%;height:auto}
 .img-rounded {-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px}

modules/system/assets/ui/less/global.mixins.utility.less

@@ -26,9 +26,12 @@
 .tab-focus() {
     // Default
     outline: thin dotted;
+    outline-offset: 0px;
+
+    // Firefox
+    outline: 4px auto Highlight;
     // WebKit
-    outline: 5px auto -webkit-focus-ring-color;
-    outline-offset: -2px;
+    outline: 4px auto -webkit-focus-ring-color;
 }
 
 // Center-align a block level element
@@ -128,4 +131,4 @@
 
 .responsive-invisibility() {
     display: none !important;
-}
+}

modules/system/assets/ui/less/site.normalize.less

@@ -1,13 +1,3 @@
-/*! Make focus ring standard on every browser */
-
-// See github issue https://github.com/octobercms/october/issues/4892
-
-&:focus {
-    outline: none;
-    -webkit-box-shadow: inset 0 1px 2px rgba(27,31,35,.075), 0 0 0 0.2em rgba(3,102,214,.3);
-    box-shadow: inset 0 1px 2px rgba(27,31,35,.075), 0 0 0 0.2em rgba(3,102,214,.3);
-}
-
 /*! normalize.css v3.0.0 | MIT License | git.io/normalize */
 
 //

modules/system/assets/ui/storm.css

@@ -1,4 +1,3 @@
-:focus {outline:none;-webkit-box-shadow:inset 0 1px 2px rgba(27,31,35,.075),0 0 0 .2em rgba(3,102,214,.3);box-shadow:inset 0 1px 2px rgba(27,31,35,.075),0 0 0 .2em rgba(3,102,214,.3)}
 html {font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
 body {margin:0}
 article,
@@ -90,7 +89,7 @@ textarea {background-image:none}
 a {color:#0181b9;text-decoration:none}
 a:hover,
 a:focus {color:#001721;text-decoration:underline}
-a:focus {outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}
+a:focus {outline:thin dotted;outline-offset:0;outline:4px auto Highlight;outline:4px auto -webkit-focus-ring-color}
 img {vertical-align:middle}
 .img-responsive {display:block;max-width:100%;height:auto}
 .img-rounded {-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px}
@@ -467,7 +466,7 @@ address {margin-bottom:20px;font-style:normal;line-height:1.42857143}
 .btn {display:inline-block;margin-bottom:0;font-weight:normal;text-align:center;vertical-align:middle;cursor:pointer;background-image:none;border:1px solid transparent;white-space:nowrap;padding:8px 19.5px;font-size:14px;line-height:1.42857143;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
 .btn:focus,
 .btn:active:focus,
-.btn.active:focus {outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}
+.btn.active:focus {outline:thin dotted;outline-offset:0;outline:4px auto Highlight;outline:4px auto -webkit-focus-ring-color}
 .btn:hover,
 .btn:focus {color:#fff;text-decoration:none}
 .btn:active,
@@ -3690,7 +3689,7 @@ select[multiple],
 select[size] {height:auto}
 input[type="file"]:focus,
 input[type="radio"]:focus,
-input[type="checkbox"]:focus {outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}
+input[type="checkbox"]:focus {outline:thin dotted;outline-offset:0;outline:4px auto Highlight;outline:4px auto -webkit-focus-ring-color}
 output {display:block;padding-top:9px;font-size:14px;line-height:1.42857143;color:#385487}
 .form-control {display:block;width:100%;height:38px;padding:8px 13px 9px;font-size:14px;line-height:1.42857143;color:#385487;background-color:#fff;background-image:none;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-transition:border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;transition:border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s}
 .form-control:focus {border-color:#d1d6d9;outline:0}