fix: accessibility set fr as document lang (#323)

* fix: accessibility set fr as document lang * fix: improve pages structure
anct-cartographie-nationale · Jul 24, 2023 · f1522c3 · f1522c3
1 parent 09b2685
commit f1522c3
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 14 deletions.
diff --git a/src/features/cartographie/layouts/cartographie/cartographie.layout.html b/src/features/cartographie/layouts/cartographie/cartographie.layout.html
@@ -28,7 +28,9 @@ <h3 class="card-title text-primary">
   </div>
 </div>
 <div class="d-flex h-100 flex-column">
-  <nav class="navbar navbar-expand-lg bg-light shadow-sm z-index-over-base sticky-top py-0 d-print-none">
+  <nav
+    class="navbar navbar-expand-lg bg-light shadow-sm z-index-over-base sticky-top py-0 d-print-none"
+    aria-label="cartographie">
     <div class="container-fluid mx-3">
       <div class="navbar-collapse">
         <app-user-location
@@ -53,9 +55,9 @@ <h3 class="card-title text-primary">
     </div>
   </nav>
   <div class="d-flex flex-grow-1 overflow-auto">
-    <div class="border-end col-12" [ngClass]="router.url.includes('/details') ? 'map-details' : 'map-list'">
+    <main class="border-end col-12" [ngClass]="router.url.includes('/details') ? 'map-details' : 'map-list'">
       <router-outlet></router-outlet>
-    </div>
+    </main>
     <div class="col position-relative d-flex">
       <mgl-map
         [movingMethod]="'flyTo'"

diff --git a/src/features/orientation/layouts/orientation/orientation.layout.html b/src/features/orientation/layouts/orientation/orientation.layout.html
@@ -1,16 +1,20 @@
 <div class="bg-light h-100 py-lg-5 p-3">
   <div class="container-lg p-0 h-100 shadow bg-white">
     <div class="row gx-0 h-100 overflow-auto flex-lg-row flex-column flex-nowrap">
-      <div
+      <main
         tabindex="-1"
         class="col-lg col-12 d-flex flex-column flex-grow-1 overflow-auto"
         appScroll
         (reachEnd)="hideArrow = $event">
         <ng-container *ngIf="this.router.url !== '/orientation'">
-          <div *ngIf="(filterPresentation$ | async) as filter" style="height: 0" class="sticky-lg-top">
+          <nav
+            aria-label="Étapes de l'orientation"
+            *ngIf="(filterPresentation$ | async) as filter"
+            style="height: 0"
+            class="sticky-lg-top">
             <app-nav class="d-lg-block d-none pt-3 bg-white" [filter]="filter"></app-nav>
             <app-nav class="d-lg-none pt-3 d-block" [filter]="filter" size="sm"></app-nav>
-          </div>
+          </nav>
         </ng-container>
         <div class="px-3 flex-grow-1" [@routeAnimations]="getRouteAnimationData()">
           <router-outlet></router-outlet>
@@ -20,8 +24,8 @@
           [class.invisible]="hideArrow">
           <i class="ri-arrow-right-s-line ri-xl pt-2 pb-3 text-primary" style="transform: rotate(90deg)"></i>
         </div>
-      </div>
-      <div class="col-lg-4 col-12 bg-primary text-white text-center d-lg-block">
+      </main>
+      <aside class="col-lg-4 col-12 bg-primary text-white text-center d-lg-block">
         <div class="d-flex flex-column px-4 h-100 overflow-auto">
           <div *ngIf="router.url !== '/orientation' && (filterPresentation$ | async) as filter">
             <div *ngIf="hasActiveFilter(filter)">
@@ -73,7 +77,7 @@ <h5 class="text-center text-secondary fw-bold mt-2">
             </app-display-on-map-link>
           </div>
         </div>
-      </div>
+      </aside>
     </div>
   </div>
 </div>
diff --git a/src/index.html b/src/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="fr">
   <head>
     <meta charset="utf-8" />
     <title>Cartographie Nationale des lieux médiation numérique</title>

diff --git a/src/root/components/conteneur/conteneur.component.html b/src/root/components/conteneur/conteneur.component.html
@@ -1,5 +1,5 @@
 <div class="vh-100 d-flex flex-column flex-grow-1">
-  <nav class="navbar navbar-expand-lg bg-white d-print-none border-bottom z-index-over-all">
+  <header class="navbar navbar-expand-lg bg-white d-print-none border-bottom z-index-over-all">
     <div class="container-fluid mx-3">
       <a [routerLink]="['/']" class="navbar-brand">
         <img
@@ -26,7 +26,7 @@
         (click)="toggle()">
         <span class="navbar-toggler-icon"></span>
       </button>
-      <div
+      <nav
         class="offcanvas offcanvas-end"
         [class.showing]="showing$ | async"
         [class.show]="((expanded$ | async) || (hiding$ | async)) && (showing$ | async) === false"
@@ -66,9 +66,9 @@ <h5 class="visually-hidden" id="offcanvasNavbarLabel">Menu</h5>
             </li>
           </ul>
         </div>
-      </div>
+      </nav>
     </div>
-  </nav>
+  </header>
   <div class="d-flex flex-row flex-grow-1 overflow-hidden h-100">
     <div class="col overflow-auto" #container tabindex="-1">
       <ng-content></ng-content>