summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2021-02-20 20:56:20 -0500
committerGitHub <noreply@github.com>2021-02-20 20:56:20 -0500
commitad0f8bfe39018563033a82ac1ee7d38dd5034594 (patch)
tree17388952bf4539658a7e5668b5d4fff007e875c3
parent7315ecdd1ae36df20b36ca3102359e9c64270154 (diff)
Focus visible styles (#1426)
* Add focus-visible styles * Add focus-visible styles * Add focus-visible styles * Add focus-visible styles * Add focus-visible styles
-rw-r--r--ext/css/context.css68
-rw-r--r--ext/css/display.css47
-rw-r--r--ext/css/material.css160
-rw-r--r--ext/css/search.css9
-rw-r--r--ext/css/settings.css10
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 {