From 32ae28546bb0fe6658f080aaa29178fb75ec2bd3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20PAILHAREY?= <rpailharey@grandlyon.com>
Date: Tue, 20 Aug 2024 06:51:48 +0000
Subject: [PATCH] feat: skip to main content link
---
src/app/app-routing.module.ts | 6 +++++-
src/app/app.component.html | 4 +++-
src/app/app.component.scss | 15 +++++++++++++++
3 files changed, 23 insertions(+), 2 deletions(-)
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index b9bc19160..7a14f9f9b 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 fb62f78b6..ed0f494f8 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 3906a6db1..25daa8c99 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 {
--
GitLab