diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index b9bc19160a6d9ed49ce7edc07e362756ed91dd14..7a14f9f9b08d21e2abc0adb89e3822081da9cb94 100644 --- a/src/app/app-routing.module.ts +++ b/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 {} diff --git a/src/app/app.component.html b/src/app/app.component.html index fb62f78b6969c04af428010b8ee4ca20801476f0..ed0f494f8983baeba0065b2a1b4152410de89940 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,9 +1,11 @@ +<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> diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 3906a6db1ce100d4003b23d9a09bf9f0592ff33f..25daa8c99e7efcf15d4a915d27d9740c620d6dce 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,6 +1,7 @@ @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 {