From ea25ba708eae25a510823527cb2450327d80d6c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Pailharey?= <rpailharey@grandlyon.com>
Date: Tue, 13 Aug 2024 13:41:00 +0200
Subject: [PATCH 1/2] feat: skip to main content link
---
src/app/app.component.html | 5 ++++-
src/app/app.component.scss | 15 +++++++++++++++
src/app/app.component.ts | 9 +++++++++
3 files changed, 28 insertions(+), 1 deletion(-)
diff --git a/src/app/app.component.html b/src/app/app.component.html
index fb62f78b6..6e3e00423 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,9 +1,12 @@
+<a class="skip-link" tabindex="0" (click)="skipToContent($event)" (keyup.enter)="skipToContent($event)"
+ >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 {
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 3d629e84e..50cfc827b 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -128,4 +128,13 @@ export class AppComponent implements OnInit {
this.windowScrollService.scrolledToBottom = true;
}
}
+
+ public skipToContent(event: Event): void {
+ event.preventDefault();
+ const mainContent = document.getElementById('app-body');
+ if (mainContent) {
+ console.log(mainContent);
+ mainContent.focus();
+ }
+ }
}
--
GitLab
From 01a357b3808aecd3cf9dda18ae6474bb149eb25c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Pailharey?= <rpailharey@grandlyon.com>
Date: Tue, 13 Aug 2024 15:14:50 +0200
Subject: [PATCH 2/2] feat: use native anchorScrolling
---
src/app/app-routing.module.ts | 6 +++++-
src/app/app.component.html | 5 ++---
src/app/app.component.ts | 9 ---------
3 files changed, 7 insertions(+), 13 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 6e3e00423..ed0f494f8 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,6 +1,5 @@
-<a class="skip-link" tabindex="0" (click)="skipToContent($event)" (keyup.enter)="skipToContent($event)"
- >Aller au contenu</a
->
+<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>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 50cfc827b..3d629e84e 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -128,13 +128,4 @@ export class AppComponent implements OnInit {
this.windowScrollService.scrolledToBottom = true;
}
}
-
- public skipToContent(event: Event): void {
- event.preventDefault();
- const mainContent = document.getElementById('app-body');
- if (mainContent) {
- console.log(mainContent);
- mainContent.focus();
- }
- }
}
--
GitLab