use focus-visible polyfill to improve keyboard navigation

Only the homepage is concerned, but it should have decent keyboard
navigation support now.

9 files changed, 23 insertions, 10 deletions

diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index 20e573de1..23ed04c2d 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -22,7 +22,7 @@
   <div class="sub-header-container">
     <my-menu *ngIf="isMenuDisplayed"></my-menu>
 
-    <div id="right-container" class="main-col container-fluid" [ngClass]="{ expanded: isMenuDisplayed === false }">
+    <div id="content" tabindex="-1" class="main-col container-fluid" [ngClass]="{ expanded: isMenuDisplayed === false }">
 
       <div class="main-row">
         <router-outlet></router-outlet>
diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts
index b484a89e8..ba16c072e 100644
--- a/client/src/app/app.module.ts
+++ b/client/src/app/app.module.ts
@@ -6,6 +6,7 @@ import { ResetPasswordModule } from '@app/reset-password'
 import { MetaLoader, MetaModule, MetaStaticLoader, PageTitlePositioning } from '@ngx-meta/core'
 import { ClipboardModule } from 'ngx-clipboard'
 import { HotkeyModule, IHotkeyOptions } from 'angular2-hotkeys'
+import 'focus-visible'
 
 import { AppRoutingModule } from './app-routing.module'
 import { AppComponent } from './app.component'
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 @@
 
     <div class="footer d-flex justify-content-between">
       <span class="language">
-        <span (click)="openLanguageChooser()" i18n-title title="Change the language" class="icon icon-language"></span>
+        <span tabindex="0" (keyup.enter)="openLanguageChooser()" (click)="openLanguageChooser()" i18n-title title="Change the language" class="icon icon-language"></span>
       </span>
       <span class="color-palette">
-        <span (click)="toggleDarkTheme()" i18n-title title="Toggle dark interface" class="icon icon-moonsun"></span>
+        <span tabindex="0" (keyup.enter)="toggleDarkTheme()" (click)="toggleDarkTheme()" i18n-title title="Toggle dark interface" class="icon icon-moonsun"></span>
       </span>
     </div>
   </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 {
       transition: background-color .1s ease-in-out;
       @include disable-default-a-behaviour;
 
-      &:hover {
+      &:hover, &.focus-visible {
         background-color: rgba(255, 255, 255, 0.15);
       }
 
@@ -202,6 +202,7 @@ menu {
       font-weight: $font-semibold;
 
       .icon {
+        @include disable-outline;
         @include icon(28px);
         opacity: 0.9;
 
diff --git a/client/src/app/search/search.component.html b/client/src/app/search/search.component.html
index a258d4edd..c4072b291 100644
--- a/client/src/app/search/search.component.html
+++ b/client/src/app/search/search.component.html
@@ -48,9 +48,9 @@
       <my-video-thumbnail [video]="result"></my-video-thumbnail>
 
       <div class="video-info">
-        <a class="video-info-name" [routerLink]="['/videos/watch', result.uuid]" [attr.title]="result.name">{{ result.name }}</a>
+        <a tabindex="-1" class="video-info-name" [routerLink]="['/videos/watch', result.uuid]" [attr.title]="result.name">{{ result.name }}</a>
         <span i18n class="video-info-date-views">{{ result.publishedAt | myFromNow }} - {{ result.views | myNumberFormatter }} views</span>
-        <a class="video-info-account" [routerLink]="[ '/accounts', result.byAccount ]">{{ result.byAccount }}</a>
+        <a tabindex="-1" class="video-info-account" [routerLink]="[ '/accounts', result.byAccount ]">{{ result.byAccount }}</a>
       </div>
     </div>
   </ng-container>
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
index de84bccf9..9cf3fb321 100644
--- a/client/src/app/shared/video/video-miniature.component.html
+++ b/client/src/app/shared/video/video-miniature.component.html
@@ -3,6 +3,7 @@
 
   <div class="video-miniature-information">
     <a
+      tabindex="-1"
       class="video-miniature-name"
       [routerLink]="[ '/videos/watch', video.uuid ]" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoBlur() }"
     >
@@ -11,10 +12,10 @@
 
     <span i18n class="video-miniature-created-at-views">{{ video.publishedAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span>
 
-    <a *ngIf="displayOwnerAccount()" class="video-miniature-account" [routerLink]="[ '/accounts', video.byAccount ]">
+    <a tabindex="-1" *ngIf="displayOwnerAccount()" class="video-miniature-account" [routerLink]="[ '/accounts', video.byAccount ]">
       {{ video.byAccount }}
     </a>
-    <a *ngIf="displayOwnerVideoChannel()" class="video-miniature-channel" [routerLink]="[ '/video-channels', video.byVideoChannel ]">
+    <a tabindex="-1" *ngIf="displayOwnerVideoChannel()" class="video-miniature-channel" [routerLink]="[ '/video-channels', video.byVideoChannel ]">
       {{ video.byVideoChannel }}
     </a>
   </div>
diff --git a/client/src/app/shared/video/video-thumbnail.component.scss b/client/src/app/shared/video/video-thumbnail.component.scss
index c3cb1ec75..1dd8e5338 100644
--- a/client/src/app/shared/video/video-thumbnail.component.scss
+++ b/client/src/app/shared/video/video-thumbnail.component.scss
@@ -14,6 +14,11 @@
     text-decoration: none !important;
   }
 
+  @include disable-outline;
+  &.focus-visible {
+    box-shadow: 0 0 0 2px var(--mainColor);
+  }
+
   img {
     width: $video-thumbnail-width;
     height: $video-thumbnail-height;
diff --git a/client/src/app/videos/video-list/video-overview.component.scss b/client/src/app/videos/video-list/video-overview.component.scss
index f5508cf61..eca8b230f 100644
--- a/client/src/app/videos/video-list/video-overview.component.scss
+++ b/client/src/app/videos/video-list/video-overview.component.scss
@@ -19,7 +19,10 @@
   margin-bottom: 20px;
 
   a {
-    @include disable-default-a-behaviour;
+    &:hover, &:focus:not(.focus-visible), &:active {
+      text-decoration: none;
+      outline: none;
+    }
 
     color: var(--mainForegroundColor);
   }
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 03cb337c2..d755e7df3 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -8,7 +8,9 @@
 }
 
 @mixin disable-outline {
-  outline: none;
+  &:focus:not(.focus-visible) {
+    outline: none;
+  }
 
   &::-moz-focus-inner {
     border: 0;