Focus visible styles (#1426)

* Add focus-visible styles

* Add focus-visible styles

* Add focus-visible styles

* Add focus-visible styles

* Add focus-visible styles

1 files changed, 53 insertions, 15 deletions

diff --git a/ext/css/context.css b/ext/css/context.css
index a77511ad..4345d3a6 100644
--- a/ext/css/context.css
+++ b/ext/css/context.css
@@ -144,7 +144,13 @@ label {
 
 /* Toggle */
 .toggle>input[type=checkbox] {
-    display: none;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    display: block;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
 }
 .toggle>input[type=checkbox]:not(:checked)~.toggle-group {
     transform: translateX(-50%);
@@ -205,12 +211,21 @@ body[data-loaded=true] .toggle-group {
     background-image: linear-gradient(#337ab7, #265a88);
     background-repeat: repeat-x;
 }
-.toggle-on:focus,
-.toggle-on:hover {
+input[type=checkbox]:focus~.toggle-group>.toggle-on,
+input[type=checkbox]~.toggle-group>.toggle-on:hover {
     background-color: #265a88;
     background-image: linear-gradient(#2d65a0, #265a88 50%);
 }
-.toggle-on:active {
+input[type=checkbox]:focus:not(:focus-visible)~.toggle-group>.toggle-on:not(:hover) {
+    background-color: #337ab7;
+    background-image: linear-gradient(#337ab7, #265a88);
+}
+input[type=checkbox]:focus-visible~.toggle-group>.toggle-on {
+    background-color: #265a88;
+    background-image: linear-gradient(#2d65a0, #265a88 50%);
+}
+input[type=checkbox]~.toggle-group>.toggle-on:active,
+input[type=checkbox]~.toggle-group>.toggle-on:active:focus {
     background-color: #204d74;
     background-image: none;
     box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
@@ -244,16 +259,28 @@ body[data-loaded=true] .toggle-group {
     background-repeat: repeat-x;
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
 }
-.toggle-off:focus,
-.toggle-off:hover,
-.toggle-handle:focus,
-.toggle-handle:hover {
+input[type=checkbox]:focus~.toggle-group>.toggle-off,
+input[type=checkbox]~.toggle-group>.toggle-off:hover,
+input[type=checkbox]~.toggle-group>.toggle-handle:hover {
+    background-color: #e6e6e6;
+    background-image: linear-gradient(#e0e0e0, #e6e6e6 50%);
+    border-color: #adadad;
+}
+input[type=checkbox]:focus:not(:focus-visible)~.toggle-group>.toggle-off:not(:hover) {
+    background-color: #ffffff;
+    background-image: linear-gradient(#ffffff, #e0e0e0);
+    border-color: #cccccc;
+}
+input[type=checkbox]:focus-visible~.toggle-group>.toggle-off,
+input[type=checkbox]~.toggle-group>.toggle-off:hover {
     background-color: #e6e6e6;
     background-image: linear-gradient(#e0e0e0, #e6e6e6 50%);
     border-color: #adadad;
 }
-.toggle-off:active,
-.toggle-handle:active {
+input[type=checkbox]~.toggle-group>.toggle-off:active,
+input[type=checkbox]~.toggle-group>.toggle-handle:active,
+input[type=checkbox]~.toggle-group>.toggle-off:active:focus,
+input[type=checkbox]~.toggle-group>.toggle-handle:active:focus {
     background-color: #d4d4d4;
     background-image: none;
     box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
@@ -279,21 +306,32 @@ body[data-loaded=true] .toggle-group {
 .nav-button+.nav-button {
     margin-left: -1px;
 }
-.nav-button:hover {
+.nav-button:hover,
+.nav-button:focus {
     z-index: 1;
     border-color: #aaaaaa;
     background-image: linear-gradient(#e8e8e8, #d0d0d0);
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
+    outline: none;
+}
+.nav-button:focus:not(:focus-visible) {
+    background-image: linear-gradient(#f8f8f8, #e0e0e0);
+    border-color: #cccccc;
+    box-shadow: none;
 }
-.nav-button:active {
+.nav-button:focus-visible {
+    z-index: 1;
+    border-color: #aaaaaa;
+    background-image: linear-gradient(#e8e8e8, #d0d0d0);
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
+}
+.nav-button:active,
+.nav-button:active:focus {
     z-index: 1;
     border-color: #808080;
     background-image: linear-gradient(#c8c8c8, #e0e0e0);
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
 }
-.nav-button:focus {
-    outline: none;
-}
 .nav-button>.icon {
     --icon-size: 16px 16px;
     display: block;