feat(admin-usagers): add skip links to admin and usagers

Author: hbalty

packages/portail-admins/src/app/app.component.html

@@ -1,45 +1,5 @@
 <app-custom-toastr></app-custom-toastr>
-<nav id="skip-links" role="navigation" aria-label="Accès rapide">
-  <ul>
-    <li>
-      <a
-        ariaCurrentWhenActive="page"
-        routerLinkActive="router-link-active"
-        [routerLink]="currentUrl"
-        fragment="navigation"
-        >Aller à la navigation</a
-      >
-    </li>
-    <li>
-      <a
-        ariaCurrentWhenActive="page"
-        routerLinkActive="router-link-active"
-        [routerLink]="currentUrl"
-        fragment="page"
-        >Aller au contenu</a
-      >
-    </li>
-    <li *ngIf="currentUrl === '/manage'">
-      <a
-        ariaCurrentWhenActive="page"
-        routerLinkActive="router-link-active"
-        [routerLink]="currentUrl"
-        fragment="search-bar"
-        >Aller à la recherche</a
-      >
-    </li>
-    <li>
-      <a
-        ariaCurrentWhenActive="page"
-        routerLinkActive="router-link-active"
-        [routerLink]="currentUrl"
-        fragment="footer"
-        >Aller au pied de page</a
-      >
-    </li>
-  </ul>
-</nav>
-
+<dsfr-skiplinks [links]="skipLinks"></dsfr-skiplinks>
 <header id="page-header" role="banner">
   <nav
     class="navbar bg-white"

packages/portail-admins/src/app/app.component.ts

@@ -8,6 +8,7 @@ import { LIENS_PARTENAIRES } from "./modules/general/components/static-pages/pla
 import { PortailAdminUser } from "@domifa/common";
 import { faChartBar } from "@fortawesome/free-regular-svg-icons";
 import { faList, faUsers } from "@fortawesome/free-solid-svg-icons";
+import { DsfrLink } from "@edugouvfr/ngx-dsfr";
 
 @Component({
   selector: "app-root",
@@ -21,7 +22,7 @@ export class AppComponent implements OnInit {
   public faUsers = faUsers;
   public faList = faList;
   public currentUrl = "";
-
+  public skipLinks: DsfrLink[] = [];
   constructor(
     private readonly router: Router,
     private readonly titleService: Title,
@@ -32,7 +33,6 @@ export class AppComponent implements OnInit {
 
   public ngOnInit(): void {
     this.currentUrl = this.router.url;
-
     this.titleService.setTitle("Bienvenue sur le portail admin de DomiFa");
 
     this.adminAuthService.currentAdminSubject.subscribe(
@@ -47,6 +47,21 @@ export class AppComponent implements OnInit {
         const event = ev as unknown as NavigationEnd;
         const splitUrl = event?.url.split("#");
         this.currentUrl = splitUrl[0];
+        this.skipLinks = [
+          {
+            label: "Aller à la navigation",
+            link: `${this.currentUrl}#navigation`,
+          },
+          { label: "Aller au contenu", link: `${this.currentUrl}#page` },
+          {
+            label: "Aller à la recherche",
+            link: `${this.currentUrl}#search-bar`,
+          },
+          {
+            label: "Aller au pied de page",
+            link: `${this.currentUrl}#footer`,
+          },
+        ];
 
         if (typeof splitUrl[1] !== "undefined") {
           const fragment = splitUrl[1];

packages/portail-admins/src/app/modules/shared/shared.module.ts

@@ -17,7 +17,7 @@ import {
 import { FonctionSelectionComponent } from "./components/fonction-selection/fonction-selection.component";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { FonctionFormatPipe } from "./pipes/fonction-format.pipe";
-import { DsfrAlertModule } from "@edugouvfr/ngx-dsfr";
+import { DsfrAlertModule, DsfrSkiplinksModule } from "@edugouvfr/ngx-dsfr";
 
 @NgModule({
   declarations: [
@@ -37,6 +37,7 @@ import { DsfrAlertModule } from "@edugouvfr/ngx-dsfr";
     CustomToastrComponent,
     FonctionSelectionComponent,
     FonctionFormatPipe,
+    DsfrSkiplinksModule,
   ],
   imports: [
     CommonModule,
@@ -45,6 +46,7 @@ import { DsfrAlertModule } from "@edugouvfr/ngx-dsfr";
     ReactiveFormsModule,
     FonctionFormatPipe,
     DsfrAlertModule,
+    DsfrSkiplinksModule,
   ],
   providers: [AdminStructuresApiClient],
 })

packages/portail-usagers/package.json

@@ -86,4 +86,4 @@
       "ng-lint-staged lint --fix --"
     ]
   }
-}
+}

packages/portail-usagers/src/app/app.component.html

@@ -1,27 +1,6 @@
 <app-custom-toastr></app-custom-toastr>
 <app-idle-manager></app-idle-manager>
-<nav class="fr-container" aria-label="Accès rapide">
-  <ul id="skip-links">
-    <li>
-      <a
-        ariaCurrentWhenActive="page"
-        routerLinkActive="router-link-active"
-        [routerLink]="currentUrl"
-        fragment="page"
-        >Aller au contenu</a
-      >
-    </li>
-    <li>
-      <a
-        ariaCurrentWhenActive="page"
-        routerLinkActive="router-link-active"
-        [routerLink]="currentUrl"
-        fragment="footer"
-        >Aller au pied de page</a
-      >
-    </li>
-  </ul>
-</nav>
+<dsfr-skiplinks [links]="skipLinks"></dsfr-skiplinks>
 <header id="page-header" role="banner">
   <div id="matomo-info" *ngIf="!matomoInfo">
     <div

packages/portail-usagers/src/app/app.component.scss

@@ -30,30 +30,6 @@ footer {
   }
 }
 
-#skip-links {
-  width: 100%;
-  padding: 0.25rem 0;
-  background-color: white;
-  position: absolute;
-  top: 0;
-  transform: translateY(-100%);
-
-  li {
-    display: inline-block;
-    list-style-type: none;
-  }
-
-  a {
-    display: block;
-    padding: 1rem 2rem;
-  }
-}
-
-#skip-links:focus-within {
-  position: relative;
-  transform: translateY(0%);
-}
-
 #matomo-info a {
   color: #292929;
   text-decoration: underline;

packages/portail-usagers/src/app/app.component.ts

@@ -9,6 +9,7 @@ import { MatomoTracker } from "ngx-matomo-client";
 import DOMIFA_NEWS from "../assets/files/news.json";
 import { NgbModal, NgbModalRef } from "@ng-bootstrap/ng-bootstrap";
 import { faRightFromBracket } from "@fortawesome/free-solid-svg-icons";
+import { DsfrLink } from "@edugouvfr/ngx-dsfr";
 
 @Component({
   selector: "app-root",
@@ -23,6 +24,7 @@ export class AppComponent implements OnInit {
   public readonly partnerLinks = LIENS_PARTENAIRES;
   public readonly faRightFromBracket = faRightFromBracket;
   public pendingNews = false;
+  public skipLinks: DsfrLink[] = [];
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   public news: any;
 
@@ -34,7 +36,7 @@ export class AppComponent implements OnInit {
     private readonly router: Router,
     private readonly usagerAuthService: UsagerAuthService,
     private readonly matomo: MatomoTracker,
-    private readonly modalService: NgbModal,
+    private readonly modalService: NgbModal
   ) {
     this.apiVersion = null;
     this.usagerProfile = null;
@@ -92,14 +94,18 @@ export class AppComponent implements OnInit {
     this.modalService.dismissAll();
     localStorage.setItem(
       "NEWS_MON_DOMIFA",
-      new Date(DOMIFA_NEWS[0].date).toISOString(),
+      new Date(DOMIFA_NEWS[0].date).toISOString()
     );
     this.pendingNews = false;
   }
 
+  public onSkiplinkSelect(event: string): void {
+    console.log("skiplink select", event);
+  }
+
   public ngOnInit(): void {
     this.titleService.setTitle(
-      "Mon DomiFa, l'outil qui facilite la gestion des structures domiciliatirices",
+      "Mon DomiFa, l'outil qui facilite la gestion des structures domiciliatirices"
     );
 
     this.usagerAuthService.currentUsagerSubject.subscribe(
@@ -109,7 +115,7 @@ export class AppComponent implements OnInit {
         if (usager) {
           this.checkNews();
         }
-      },
+      }
     );
 
     this.router.events
@@ -119,7 +125,10 @@ export class AppComponent implements OnInit {
         const event = ev as unknown as NavigationEnd;
         const splitUrl = event?.url.split("#");
         this.currentUrl = splitUrl[0];
-
+        this.skipLinks = [
+          { 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];
           const element = document.getElementById(fragment);

packages/portail-usagers/src/app/modules/shared/shared.module.ts

@@ -9,10 +9,11 @@ import { FA_ICONS } from "./constants/FA_ICONS.const";
 import { CustomToastrComponent } from "./components/custom-toastr/custom-toastr.component";
 import { SeoService } from "./services/seo.service";
 import { ReplaceLineBreaks } from "./pipes/nl2br.pipe";
+import { DsfrSkiplinksModule } from "@edugouvfr/ngx-dsfr";
 
 @NgModule({
   declarations: [CustomToastrComponent, ReplaceLineBreaks],
-  exports: [CustomToastrComponent, ReplaceLineBreaks],
+  exports: [CustomToastrComponent, ReplaceLineBreaks, DsfrSkiplinksModule],
   providers: [SeoService],
   imports: [CommonModule, FontAwesomeModule],
 })