client: skip to main content (a11y) (#681)

client/angular.json

@@ -30,7 +30,7 @@
             "outputPath": "dist/client",
             "index": "src/index.html",
             "browser": "src/main.ts",
-            "polyfills": ["zone.js"],
+            "polyfills": ["zone.js", "@angular/localize/init"],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [

client/src/app/layout/layout.component.html

@@ -1,10 +1,12 @@
+<app-skip-to-main-content />
+
 <header class="app-layout__header">
   <div class="app-layout__container">
     <ng-content select="[appLayoutHeader]" />
   </div>
 </header>
 
-<main class="app-layout__main app-layout__container">
+<main class="app-layout__main app-layout__container" appSkipToMainContent>
   <ng-content select="[appLayoutMain]" />
 
   <app-loading />

client/src/app/layout/layout.component.ts

@@ -1,11 +1,12 @@
 import { Component, ViewEncapsulation } from '@angular/core';
 import { LoadingComponent } from '../shared/loading';
+import { SkipToMainContentComponent, SkipToMainContentDirective } from './skip-to-main-content';
 
 @Component({
   selector: 'app-layout',
   host: { class: 'app-layout' },
   standalone: true,
-  imports: [LoadingComponent],
+  imports: [LoadingComponent, SkipToMainContentComponent, SkipToMainContentDirective],
   templateUrl: './layout.component.html',
   styleUrl: './layout.component.scss',
   encapsulation: ViewEncapsulation.None,

client/src/app/layout/skip-to-main-content/index.ts

@@ -0,0 +1,3 @@
+export * from './skip-to-main-content.component';
+export * from './skip-to-main-content.constants';
+export * from './skip-to-main-content.directive';

client/src/app/layout/skip-to-main-content/skip-to-main-content.component.html

@@ -0,0 +1,4 @@
+<a (click)="focusMainContent()" (keydown.enter)="focusMainContent()" tabindex="0" class="app-skip-to-main-content">
+  <ng-container i18n="@@Component.SkipToMainContent.Title">Accéder au contenu principal</ng-container>
+  <mat-icon class="app-skip-to-main-content__icon">step_over</mat-icon>
+</a>

client/src/app/layout/skip-to-main-content/skip-to-main-content.component.scss

@@ -0,0 +1,27 @@
+.app-skip-to-main-content {
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 9999;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  background-color: var(--sys-secondary);
+  color: var(--sys-on-secondary);
+  text-decoration: none;
+  font-size: 1.125rem;
+  cursor: pointer;
+
+  top: -9999px;
+  opacity: 0;
+  transition: ease 300ms opacity;
+
+  &:focus-visible {
+    top: 4rem;
+    opacity: 1;
+  }
+
+  &__icon {
+    margin-left: 0.5rem;
+    vertical-align: bottom;
+  }
+}

client/src/app/layout/skip-to-main-content/skip-to-main-content.component.ts

@@ -0,0 +1,20 @@
+import { DOCUMENT } from '@angular/common';
+import { Component, inject, ViewEncapsulation } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { SKIP_TO_MAIN_CONTENT_ID } from './skip-to-main-content.constants';
+
+@Component({
+  selector: 'app-skip-to-main-content',
+  standalone: true,
+  imports: [MatIconModule],
+  templateUrl: './skip-to-main-content.component.html',
+  styleUrls: ['./skip-to-main-content.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class SkipToMainContentComponent {
+  #document = inject(DOCUMENT);
+
+  focusMainContent() {
+    this.#document.getElementById(SKIP_TO_MAIN_CONTENT_ID)!.focus({ preventScroll: true });
+  }
+}

client/src/app/layout/skip-to-main-content/skip-to-main-content.constants.ts

@@ -0,0 +1 @@
+export const SKIP_TO_MAIN_CONTENT_ID = 'skip-to-main-content-target';

client/src/app/layout/skip-to-main-content/skip-to-main-content.directive.ts

@@ -0,0 +1,13 @@
+import { Directive } from '@angular/core';
+import { SKIP_TO_MAIN_CONTENT_ID } from './skip-to-main-content.constants';
+
+@Directive({
+  selector: '[appSkipToMainContent]',
+  host: {
+    id: SKIP_TO_MAIN_CONTENT_ID,
+    tabindex: '0',
+    '[style.outline]': '"none"',
+  },
+  standalone: true,
+})
+export class SkipToMainContentDirective {}

client/src/locales/messages.en.json

@@ -95,6 +95,7 @@
     "Component.RequestFeedbackSuccess.RequestAnother": "Request another feedZback",
     "Component.RequestFeedbackSuccess.Title": "FeedZback requested from:",
     "Component.Settings.UpdateSuccess": "Your settings have been updated.",
+    "Component.SkipToMainContent.Title": "Skip to main content",
     "Demo.LoremIpsum": "{$INTERPOLATION} dolor sit amet",
     "Feedback.Comment": "Comment",
     "Feedback.Give": "Give",

client/src/locales/messages.fr.json

@@ -95,6 +95,7 @@
     "Component.RequestFeedbackSuccess.RequestAnother": "Demander un autre feedZback",
     "Component.RequestFeedbackSuccess.Title": "FeedZback demandé à :",
     "Component.Settings.UpdateSuccess": "Vos paramètres ont bien été mis à jour.",
+    "Component.SkipToMainContent.Title": "Accéder au contenu principal",
     "Demo.LoremIpsum": "{$INTERPOLATION} dolor sit amet",
     "Feedback.Comment": "Commentaire",
     "Feedback.Give": " Donner ",