feat: skip to main content link

src/app/app-routing.module.ts

@@ -277,7 +277,11 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [
+    RouterModule.forRoot(routes, {
+      anchorScrolling: 'enabled',
+    }),
+  ],
   exports: [RouterModule],
 })
 export class AppRoutingModule {}

src/app/app.component.html

+<a class="skip-link" [routerLink]="[]" [fragment]="'app-body'">Aller au contenu</a>
+
 <div class="visually-hidden">
   <p>Utilisez <strong>h</strong> (header) pour revenir au logo Res'in à tout moment.</p>
 </div>
 <app-header />
 <main class="app-container">
-  <div class="app-body" id="app-body" (scroll)="onScroll($event)">
+  <div class="app-body" id="app-body" tabindex="-1" (scroll)="onScroll($event)">
     <div *ngIf="loading" class="loader" aria-busy="true">
       <img class="loader-gif" src="/assets/gif/loader_circle.gif" alt />
     </div>

src/app/app.component.scss

 @import 'breakpoint';
 @import 'color';
 @import 'layout';
+@import 'z-index';
 
 @media not print {
   .app-container {
@@ -17,6 +18,19 @@
     height: 100% !important;
   }
 }
+
+.skip-link {
+  position: absolute;
+  top: -40px;
+  background: #000;
+  color: #fff;
+  padding: 8px 16px;
+  z-index: $modal-z-index;
+  &:focus {
+    top: 0;
+  }
+}
+
 .app-body {
   display: flex;
   flex-direction: column;
@@ -27,6 +41,7 @@
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: auto;
+  outline: none;
 }
 
 .loader {