Focus visible styles (#1426)

* Add focus-visible styles

* Add focus-visible styles

* Add focus-visible styles

* Add focus-visible styles

* Add focus-visible styles

5 files changed, 249 insertions, 45 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;
diff --git a/ext/css/display.css b/ext/css/display.css
index 44b607ee..b016a231 100644
--- a/ext/css/display.css
+++ b/ext/css/display.css
@@ -138,9 +138,12 @@
 
     --notification-text-color: #ffffff;
     --notification-background-color: #333333;
+    --notification-background-color-light: #555555;
+    --notification-background-color-lighter: #666666;
     --notification-shadow-color: rgba(0, 0, 0, 0.5);
 
-    --action-button-active-color: var(--scrollbar-thumb-color);
+    --action-button-hover-color: #dddddd;
+    --action-button-active-color: #c1c1c1;
 }
 :root[data-theme=dark] {
     /* Colors */
@@ -199,9 +202,12 @@
 
     --notification-text-color: #2f2f2f;
     --notification-background-color: #e1e1e1;
+    --notification-background-color-light: #bbbbbb;
+    --notification-background-color-lighter: #aaaaaa;
     --notification-shadow-color: rgba(255, 255, 255, 0.25);
 
-    --action-button-active-color: var(--scrollbar-thumb-color);
+    --action-button-hover-color: #282828;
+    --action-button-active-color: #444444;
 }
 
 
@@ -502,6 +508,12 @@ button.sidebar-button:hover,
 button.sidebar-button:focus {
     background-color: var(--sidebar-button-background-color-hover);
 }
+button.sidebar-button:focus:not(:focus-visible):not(:hover) {
+    background-color: var(--sidebar-button-background-color);
+}
+button.sidebar-button:focus-visible {
+    background-color: var(--sidebar-button-background-color-hover);
+}
 button.sidebar-button:active {
     background-color: var(--sidebar-button-background-color-active);
 }
@@ -512,6 +524,12 @@ button.sidebar-button.danger:hover,
 button.sidebar-button.danger:focus {
     background-color: var(--sidebar-button-danger-background-color-hover);
 }
+button.sidebar-button.danger:focus:not(:focus-visible):not(:hover) {
+    background-color: var(--sidebar-button-danger-background-color);
+}
+button.sidebar-button.danger:focus-visible {
+    background-color: var(--sidebar-button-danger-background-color-hover);
+}
 button.sidebar-button.danger:active {
     background-color: var(--sidebar-button-danger-background-color-active);
 }
@@ -536,6 +554,12 @@ button.sidebar-button.danger:hover .sidebar-button-icon,
 button.sidebar-button.danger:focus .sidebar-button-icon {
     background-color: var(--sidebar-button-danger-icon-color);
 }
+button.sidebar-button.danger:focus:not(:focus-visible):not(:hover) .sidebar-button-icon {
+    background-color: var(--sidebar-button-icon-color);
+}
+button.sidebar-button.danger:focus-visible .sidebar-button-icon {
+    background-color: var(--sidebar-button-danger-icon-color);
+}
 button.sidebar-button.sidebar-button-highlight>.sidebar-button-icon {
     background-color: var(--accent-color);
 }
@@ -616,6 +640,10 @@ button.action-button:focus {
     background-color: transparent;
     box-shadow: none;
 }
+button.action-button:focus-visible {
+    background-color: var(--action-button-hover-color);
+    box-shadow: none;
+}
 button.action-button:active {
     background-color: var(--action-button-active-color);
     box-shadow: none;
@@ -1579,6 +1607,12 @@ button.footer-notification-close-button:active {
     font-size: inherit;
     box-shadow: none;
 }
+button.footer-notification-close-button:focus-visible {
+    background-color: var(--notification-background-color-light);
+}
+button.footer-notification-close-button:focus-visible:active {
+    background-color: var(--notification-background-color-lighter);
+}
 .footer-notification-close-button-icon {
     display: block;
     width: calc(16em / var(--font-size-no-units));
@@ -1709,9 +1743,14 @@ button.footer-notification-close-button:active {
 .popup-menu-item-group .popup-menu-item-set-primary-audio-button:focus .popup-menu-item-icon {
     opacity: 0.375;
 }
-.popup-menu-item-group[data-is-primary-card-audio=true] .popup-menu-item-set-primary-audio-button .popup-menu-item-icon {
-    opacity: 1;
+.popup-menu-item-group .popup-menu-item-set-primary-audio-button:focus:not(:focus-visible) .popup-menu-item-icon {
+    opacity: 0;
+}
+.popup-menu-item-group .popup-menu-item-set-primary-audio-button:hover:not(:focus-visible) .popup-menu-item-icon,
+.popup-menu-item-group .popup-menu-item-set-primary-audio-button:active:not(:focus-visible) .popup-menu-item-icon {
+    opacity: 0.375;
 }
+.popup-menu-item-group[data-is-primary-card-audio=true] .popup-menu-item-set-primary-audio-button .popup-menu-item-icon,
 .popup-menu-item-group[data-is-primary-card-audio=true] .popup-menu-item-set-primary-audio-button:hover .popup-menu-item-icon,
 .popup-menu-item-group[data-is-primary-card-audio=true] .popup-menu-item-set-primary-audio-button:active .popup-menu-item-icon,
 .popup-menu-item-group[data-is-primary-card-audio=true] .popup-menu-item-set-primary-audio-button:focus .popup-menu-item-icon {
diff --git a/ext/css/material.css b/ext/css/material.css
index 9745d27e..9cde17f3 100644
--- a/ext/css/material.css
+++ b/ext/css/material.css
@@ -351,6 +351,21 @@ label.checkbox {
     visibility: visible;
     transition: var(--selectable-indicator-transition2);
 }
+.checkbox>input[type=checkbox]:focus:not(:focus-visible)+.checkbox-body::after {
+    transform: scale(0);
+    opacity: 0;
+    visibility: hidden;
+    transition: var(--selectable-indicator-transition1);
+}
+.checkbox>input[type=checkbox]:focus-visible+.checkbox-body::after,
+.checkbox>input[type=checkbox]:focus-visible:focus+.checkbox-body::after,
+.checkbox>input[type=checkbox]:focus-visible:active+.checkbox-body::after,
+.checkbox:active>input[type=checkbox]:focus-visible+.checkbox-body::after {
+    transform: scale(1);
+    opacity: 1;
+    visibility: visible;
+    transition: var(--selectable-indicator-transition2);
+}
 .checkbox>input[type=checkbox]:focus+.checkbox-body::after {
     opacity: 0.5;
 }
@@ -444,12 +459,24 @@ label.toggle {
     visibility: visible;
     transition: var(--selectable-indicator-transition2);
 }
-.toggle>input[type=checkbox]:focus+.toggle-body>.toggle-knob::after {
+.toggle>input[type=checkbox]+.toggle-body>.toggle-knob::after {
     opacity: 0.5;
 }
-.toggle>input[type=checkbox]:active:focus+.toggle-body>.toggle-knob::after,
-.toggle:active>input[type=checkbox]:focus+.toggle-body>.toggle-knob::after {
+.toggle>input[type=checkbox]:active+.toggle-body>.toggle-knob::after,
+.toggle:active>input[type=checkbox]+.toggle-body>.toggle-knob::after {
+    opacity: 1;
+}
+.toggle>input[type=checkbox]:focus:not(:focus-visible)+.toggle-body>.toggle-knob::after {
+    transform: scale(0);
+    opacity: 0;
+    visibility: hidden;
+    transition: var(--selectable-indicator-transition1);
+}
+.toggle>input[type=checkbox]:focus-visible+.toggle-body>.toggle-knob::after {
+    transform: scale(1);
     opacity: 1;
+    visibility: visible;
+    transition: var(--selectable-indicator-transition2);
 }
 .toggle>input[type=checkbox]:checked+.toggle-body>.toggle-knob {
     transform: translateX(1em);
@@ -580,6 +607,18 @@ label.radio {
     visibility: visible;
     transition: var(--selectable-indicator-transition2);
 }
+.radio>input[type=radio]:focus:not(:focus-visible)+.radio-body::after {
+    transform: scale(0);
+    opacity: 0;
+    visibility: hidden;
+    transition: var(--selectable-indicator-transition1);
+}
+.radio>input[type=radio]:focus-visible+.radio-body::after {
+    transform: scale(1);
+    opacity: 1;
+    visibility: visible;
+    transition: var(--selectable-indicator-transition2);
+}
 .radio>input[type=radio]:focus+.radio-body::after {
     opacity: 0.5;
 }
@@ -732,14 +771,20 @@ button {
     cursor: pointer;
     background-color: transparent;
     box-shadow: var(--button-shadow-params) var(--shadow-color-off);
-    transition: background-color var(--animation-duration) ease-in, box-shadow var(--animation-duration) ease-in, border-color var(--animation-duration) ease-in;
+    transition:
+        background-color var(--animation-duration) ease-in,
+        box-shadow var(--animation-duration) ease-in,
+        border-color var(--animation-duration) ease-in;
     -webkit-tap-highlight-color: transparent;
 }
 button:focus {
     outline: none;
 }
 button:hover {
-    transition: background-color var(--animation-duration) ease-out, box-shadow var(--animation-duration) ease-out, border-color var(--animation-duration) ease-out;
+    transition:
+        background-color var(--animation-duration) ease-out,
+        box-shadow var(--animation-duration) ease-out,
+        border-color var(--animation-duration) ease-out;
 }
 button:hover {
     box-shadow: var(--button-shadow-params) var(--shadow-color-light);
@@ -754,14 +799,21 @@ button {
     border-color: var(--accent-color);
     background-color: var(--accent-color);
 }
-button:hover {
+button:hover,
+button:focus {
     background-color: var(--accent-color-light);
     border-color: var(--accent-color-light);
 }
-button:focus {
+button:focus:not(:focus-visible):not(:hover):not(:active) {
+    background-color: var(--accent-color);
+    border-color: var(--accent-color);
+}
+button:focus-visible {
     background-color: var(--accent-color-light);
+    border-color: var(--accent-color-light);
 }
-button:active {
+button:active,
+button:active:focus {
     border-color: var(--accent-color-lighter);
     background-color: var(--accent-color-lighter);
 }
@@ -772,14 +824,21 @@ button.danger {
     border-color: var(--danger-color);
     background-color: var(--danger-color);
 }
-button.danger:hover {
+button.danger:hover,
+button.danger:focus {
     background-color: var(--danger-color-light);
     border-color: var(--danger-color-light);
 }
-button.danger:focus {
+button.danger:focus:not(:focus-visible):not(:hover):not(:active) {
+    background-color: var(--danger-color);
+    border-color: var(--danger-color);
+}
+button.danger:focus-visible {
     background-color: var(--danger-color-light);
+    border-color: var(--danger-color-light);
 }
-button.danger:active {
+button.danger:active,
+button.danger:active:focus {
     border-color: var(--danger-color-lighter);
     background-color: var(--danger-color-lighter);
 }
@@ -790,14 +849,21 @@ button.low-emphasis {
     border-color: var(--button-border-color);
     background-color: var(--accent-color-transparent0);
 }
-button.low-emphasis:hover {
+button.low-emphasis:hover,
+button.low-emphasis:focus {
+    border-color: var(--accent-color);
     background-color: var(--accent-color-transparent5);
-    border-color: var(--accent-color-light);
 }
-button.low-emphasis:focus {
+button.low-emphasis:focus:not(:focus-visible):not(:hover):not(:active) {
+    border-color: var(--button-border-color);
+    background-color: var(--accent-color-transparent0);
+}
+button.low-emphasis:focus-visible {
     border-color: var(--accent-color);
+    background-color: var(--accent-color-transparent5);
 }
-button.low-emphasis:active {
+button.low-emphasis:active,
+button.low-emphasis:active:focus {
     border-color: var(--accent-color);
     background-color: var(--accent-color-transparent25);
 }
@@ -808,28 +874,39 @@ button.low-emphasis.danger {
     border-color: var(--button-border-color);
     background-color: var(--danger-color-transparent0);
 }
-button.low-emphasis.danger:hover {
-    border-color: var(--danger-color-light);
+button.low-emphasis.danger:hover,
+button.low-emphasis.danger:focus {
+    border-color: var(--danger-color);
     background-color: var(--danger-color-transparent5);
 }
-button.low-emphasis.danger:focus {
+button.low-emphasis.danger:focus:not(:focus-visible):not(:hover):not(:active) {
+    border-color: var(--button-border-color);
+    background-color: var(--danger-color-transparent0);
+}
+button.low-emphasis.danger:focus-visible {
     border-color: var(--danger-color);
+    background-color: var(--danger-color-transparent5);
 }
-button.low-emphasis.danger:active {
+button.low-emphasis.danger:active,
+button.low-emphasis.danger:active:focus {
     border-color: var(--danger-color);
     background-color: var(--danger-color-transparent25);
 }
 
 /* Disabled buttons */
 button:disabled,
-button.danger:disabled {
+button:disabled:focus,
+button:disabled:hover,
+button:disabled:active {
     color: var(--button-text-color);
     border-color: var(--disabled-color);
     background-color: var(--disabled-color);
     cursor: default;
 }
 button.low-emphasis:disabled,
-button.low-emphasis.danger:disabled {
+button.low-emphasis:disabled:focus,
+button.low-emphasis:disabled:hover,
+button.low-emphasis:disabled:active {
     color: var(--disabled-color);
     border-color: var(--disabled-color);
     background-color: transparent;
@@ -858,7 +935,14 @@ button.input-suffix-button.input-suffix-icon-button:hover,
 button.input-suffix-button.input-suffix-icon-button:focus {
     background-color: var(--input-background-color-dark);
 }
-button.input-suffix-button.input-suffix-icon-button:active {
+button.input-suffix-button.input-suffix-icon-button:focus:not(:focus-visible):not(:hover):not(:active) {
+    background-color: var(--input-background-color);
+}
+button.input-suffix-button.input-suffix-icon-button:focus-visible {
+    background-color: var(--input-background-color-dark);
+}
+button.input-suffix-button.input-suffix-icon-button:active,
+button.input-suffix-button.input-suffix-icon-button:active:focus {
     background-color: var(--input-background-color-darker);
 }
 button.input-suffix-button.input-suffix-icon-button>.icon {
@@ -906,6 +990,12 @@ button.icon-button:active {
     background-color: transparent;
     box-shadow: none;
 }
+button.icon-button:focus:not(:focus-visible),
+button.icon-button:focus:hover:not(:focus-visible),
+button.icon-button:focus:active:not(:focus-visible) {
+    background-color: transparent;
+    box-shadow: none;
+}
 .icon-button>.icon-button-inner::after {
     position: absolute;
     display: block;
@@ -922,7 +1012,23 @@ button.icon-button:active {
     visibility: hidden;
     transition: var(--selectable-indicator-transition1);
 }
-.icon-button:focus>.icon-button-inner::after {
+.icon-button:focus>.icon-button-inner::after,
+.icon-button:active>.icon-button-inner::after {
+    transform: scale(1);
+    opacity: 1;
+    visibility: visible;
+    transition: var(--selectable-indicator-transition2);
+}
+.icon-button:focus:not(:focus-visible)>.icon-button-inner::after {
+    transform: scale(0);
+    opacity: 0;
+    visibility: hidden;
+    transition: var(--selectable-indicator-transition1);
+}
+.icon-button:focus-visible>.icon-button-inner::after,
+.icon-button:focus-visible:active>.icon-button-inner::after,
+.icon-button:focus>.icon-button-inner::after,
+.icon-button:focus:active>.icon-button-inner::after {
     transform: scale(1);
     opacity: 1;
     visibility: visible;
@@ -1009,7 +1115,13 @@ button.popup-menu-item:focus {
     background-color: var(--menu-item-hover-color);
     box-shadow: none;
 }
-button.popup-menu-item:active {
+button.popup-menu-item:focus:not(:focus-visible):not(:hover):not(:disabled) {
+    background-color: transparent;
+}
+button.popup-menu-item:focus-visible:not(:disabled) {
+    background-color: var(--menu-item-hover-color);
+}
+button.popup-menu-item:active:not(:disabled) {
     background-color: var(--menu-item-active-color);
     box-shadow: none;
 }
diff --git a/ext/css/search.css b/ext/css/search.css
index eb537ba4..72df8a67 100644
--- a/ext/css/search.css
+++ b/ext/css/search.css
@@ -103,7 +103,14 @@ h1 {
 #search-button:focus {
     background-color: var(--input-background-color-dark);
 }
-#search-button:active {
+#search-button:focus:not(:focus-visible):not(:hover) {
+    background-color: var(--input-background-color);
+}
+#search-button:focus-visible {
+    background-color: var(--input-background-color-dark);
+}
+#search-button:active,
+#search-button:active:focus {
     background-color: var(--input-background-color-darker);
 }
 
diff --git a/ext/css/settings.css b/ext/css/settings.css
index 4a8879fc..8255d0b8 100644
--- a/ext/css/settings.css
+++ b/ext/css/settings.css
@@ -407,7 +407,15 @@ a.heading-link-light {
     text-decoration: none;
     color: var(--text-color);
 }
-.outline-item:hover {
+.outline-item:hover,
+.outline-item:focus {
+    outline: none;
+    background-color: var(--outline-item-background-color-hover);
+}
+.outline-item:focus:not(:focus-visible) {
+    background-color: var(--outline-item-background-color);
+}
+.outline-item:focus-visible {
     background-color: var(--outline-item-background-color-hover);
 }
 .outline-item-left {