aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/menu
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2018-09-08 14:34:32 +0200
committerChocobozzz <me@florianbigard.com>2018-09-11 10:58:48 +0200
commite78980ebd116be1ea901387c126876af902191e6 (patch)
treeea037d021e1383501e2b79add1a9581ef80a7c99 /client/src/app/menu
parentecf06378ff95ec35f75de0169a02a974d2c17c62 (diff)
downloadPeerTube-e78980ebd116be1ea901387c126876af902191e6.tar.gz
PeerTube-e78980ebd116be1ea901387c126876af902191e6.tar.zst
PeerTube-e78980ebd116be1ea901387c126876af902191e6.zip
use focus-visible polyfill to improve keyboard navigation
Only the homepage is concerned, but it should have decent keyboard navigation support now.
Diffstat (limited to 'client/src/app/menu')
-rw-r--r--client/src/app/menu/menu.component.html4
-rw-r--r--client/src/app/menu/menu.component.scss3
2 files changed, 4 insertions, 3 deletions
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 63ff4a86f..139664534 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -85,10 +85,10 @@
85 85
86 <div class="footer d-flex justify-content-between"> 86 <div class="footer d-flex justify-content-between">
87 <span class="language"> 87 <span class="language">
88 <span (click)="openLanguageChooser()" i18n-title title="Change the language" class="icon icon-language"></span> 88 <span tabindex="0" (keyup.enter)="openLanguageChooser()" (click)="openLanguageChooser()" i18n-title title="Change the language" class="icon icon-language"></span>
89 </span> 89 </span>
90 <span class="color-palette"> 90 <span class="color-palette">
91 <span (click)="toggleDarkTheme()" i18n-title title="Toggle dark interface" class="icon icon-moonsun"></span> 91 <span tabindex="0" (keyup.enter)="toggleDarkTheme()" (click)="toggleDarkTheme()" i18n-title title="Toggle dark interface" class="icon icon-moonsun"></span>
92 </span> 92 </span>
93 </div> 93 </div>
94 </menu> 94 </menu>
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 592860e12..f1b0a284f 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -130,7 +130,7 @@ menu {
130 transition: background-color .1s ease-in-out; 130 transition: background-color .1s ease-in-out;
131 @include disable-default-a-behaviour; 131 @include disable-default-a-behaviour;
132 132
133 &:hover { 133 &:hover, &.focus-visible {
134 background-color: rgba(255, 255, 255, 0.15); 134 background-color: rgba(255, 255, 255, 0.15);
135 } 135 }
136 136
@@ -202,6 +202,7 @@ menu {
202 font-weight: $font-semibold; 202 font-weight: $font-semibold;
203 203
204 .icon { 204 .icon {
205 @include disable-outline;
205 @include icon(28px); 206 @include icon(28px);
206 opacity: 0.9; 207 opacity: 0.9;
207 208