feat(frontend): lien d'evitement

Author: hbalty

packages/frontend/src/app/app.component.html

@@ -1,39 +1,7 @@
 <app-custom-toastr></app-custom-toastr>
 <app-loading></app-loading>
 <app-idle-manager></app-idle-manager>
-<nav id="skip-links" role="navigation" aria-label="Accès rapide">
-  <ul>
-    <li>
-      <a
-        ariaCurrentWhenActive="page"
-        [routerLink]="currentUrl"
-        fragment="navigation"
-        >Aller à la navigation</a
-      >
-    </li>
-    <li>
-      <a ariaCurrentWhenActive="page" [routerLink]="currentUrl" fragment="page"
-        >Aller au contenu</a
-      >
-    </li>
-    <li *ngIf="currentUrl === '/manage'">
-      <a
-        ariaCurrentWhenActive="page"
-        [routerLink]="currentUrl"
-        fragment="search-bar"
-        >Aller à la recherche</a
-      >
-    </li>
-    <li>
-      <a
-        ariaCurrentWhenActive="page"
-        [routerLink]="currentUrl"
-        fragment="footer"
-        >Aller au pied de page</a
-      >
-    </li>
-  </ul>
-</nav>
+<dsfr-skiplinks [links]="skipLinks"></dsfr-skiplinks>
 <app-help-modal></app-help-modal>
 
 <app-navbar [pendingNews]="pendingNews" [me]="me"></app-navbar>

packages/frontend/src/app/app.component.ts

@@ -25,6 +25,7 @@ import { fadeInOut } from "./shared";
 import DOMIFA_NEWS from "../assets/files/news.json";
 import { LIENS_PARTENAIRES } from "./modules/general/components/plan-site/LIENS_PARTENAIRES.const";
 import { UserStructure } from "@domifa/common";
+import { DsfrLink } from "@edugouvfr/ngx-dsfr";
 
 @Component({
   animations: [fadeInOut],
@@ -48,7 +49,7 @@ export class AppComponent implements OnInit, OnDestroy {
   public loading: boolean;
   public submitted: boolean;
   public pendingNews: boolean;
-
+  public skipLinks: DsfrLink[] = [];
   private readonly subscription = new Subscription();
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -158,6 +159,25 @@ export class AppComponent implements OnInit, OnDestroy {
         const event = ev as NavigationEnd;
         const splitUrl = event?.url.split("#");
         this.currentUrl = splitUrl[0];
+        this.skipLinks = [
+          {
+            label: "Aller à la navigation",
+            link: `${this.currentUrl}#navigation`,
+          },
+          ...(this.currentUrl === "/manage" // pour avoir le bon ordre des liens
+            ? [
+                {
+                  label: "Aller à la recherche",
+                  link: `${this.currentUrl}#search-bar`,
+                },
+              ]
+            : []),
+          { label: "Aller au contenu", link: `${this.currentUrl}#page` },
+          {
+            label: "Aller au pied de page",
+            link: `${this.currentUrl}#footer`,
+          },
+        ];
 
         if (typeof splitUrl[1] !== "undefined") {
           const fragment = splitUrl[1];

packages/frontend/src/app/modules/shared/shared.module.ts

@@ -15,7 +15,7 @@ import { InputReferrerComponent } from "./components/input-referrer/input-referr
 import { FormsModule } from "@angular/forms";
 import { FonctionSelectionComponent } from "./components/fonction-selection/fonction-selection.component";
 import { FonctionFormatPipe } from "./pipes/fonction-format.pipe";
-
+import { DsfrSkiplinksModule } from "@edugouvfr/ngx-dsfr";
 @NgModule({
   imports: [
     CommonModule,
@@ -43,6 +43,7 @@ import { FonctionFormatPipe } from "./pipes/fonction-format.pipe";
     FontAwesomeModule,
     ButtonComponent,
     FonctionFormatPipe,
+    DsfrSkiplinksModule,
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })