Merge branch '617-accessibilite-retours-asqatasun' into 'dev'

Resolve "[Accessibilité] - Retours asqatasun"

See merge request !906

src/app/form/orientation-form-view/global-components/needs-selection/needs-selection.component.html

 <div class="orientationForm">
   <div class="title">
-    <h2>Quels est le besoin de la personne&nbsp;?</h2>
+    <h2>Quel est le besoin de la personne&nbsp;?</h2>
     <p>Un seul choix possible</p>
   </div>
   <div class="formGroup">

src/app/header/header.component.html

 <header class="hide-on-print">
-  <div class="containerIconMenu">
-    <app-svg-icon
-      [asButton]="true"
-      [ariaLabel]="'Ouvrir le menu'"
-      [folder]="'ico'"
-      [icon]="'menu'"
-      [iconClass]="'icon-32'"
-      (action)="toggleMenu()"
-    />
-  </div>
-  <div
-    #clickableLogo
-    class="logo clickable"
-    aria-label="Retour accueil"
-    role="button"
-    tabindex="0"
-    (click)="goToHome()"
-    (keyup.enter)="goToHome()"
-  >
-    <img
-      *ngIf="displayLogo(); else customTitle"
-      class="logo-grand-lyon"
-      width="108"
-      height="37"
-      src="/assets/logos/resin.svg"
-      alt
-    />
-  </div>
-  <div class="containerIconMenu profile">
-    <app-svg-icon
-      [asButton]="true"
-      [ariaLabel]="isLoggedIn ? 'Ouvrir le menu Mon compte' : 'Se connecter'"
-      [folder]="'ico'"
-      [icon]="'profile'"
-      [iconClass]="'icon-32'"
-      (action)="clickProfileButton()"
-    />
-  </div>
-  <div class="rightHeader">
-    <div class="menuItems" role="menu">
-      <a
-        routerLink="/actualites"
-        role="menuitem"
-        title="Actualités"
-        [routerLinkActive]="'active'"
-        i18n
-        [attr.aria-current]="isActive('/actualites')"
-      >
-        Actualités
-      </a>
-      <a
-        routerLink="/acteurs"
-        role="menuitem"
-        title="Cartographie"
-        [routerLinkActive]="'active'"
-        i18n
-        [attr.aria-current]="isActive('/acteurs')"
-      >
-        Cartographie
-      </a>
-      <a
-        routerLink="/orientation"
-        role="menuitem"
-        title="Orienter des bénéficiaires"
-        [routerLinkActive]="'active'"
-        i18n
-        [attr.aria-current]="isActive('/orientation')"
-      >
-        Orienter des bénéficiaires
-      </a>
-      <a
-        routerLink="/annuaire"
-        role="menuitem"
-        title="Annuaire"
-        [routerLinkActive]="'active'"
-        i18n
-        [attr.aria-current]="isActive('/annuaire')"
-      >
-        Annuaire
-      </a>
-      <a
-        *ngIf="isAdmin"
-        routerLink="/admin"
-        role="menuitem"
-        title="Administration"
-        [routerLinkActive]="'active'"
-        [attr.aria-current]="isActive('/admin')"
-      >
-        Administration
-      </a>
+  <nav aria-label="Site">
+    <div class="containerIconMenu">
+      <app-svg-icon
+        [asButton]="true"
+        [ariaLabel]="'Ouvrir le menu'"
+        [folder]="'ico'"
+        [icon]="'menu'"
+        [iconClass]="'icon-32'"
+        (action)="toggleMenu()"
+      />
     </div>
-    <app-button
-      *ngIf="isLoggedIn"
-      class="connected"
-      ariaLabel="Ouvrir le menu Mon compte - {{ displayName }}"
-      [variant]="'primary'"
-      [label]="displayName"
-      [size]="'small'"
-      (action)="clickProfileButton()"
-    />
-    <app-button
-      *ngIf="!isLoggedIn"
-      ariaLabel="Se connecter"
-      [variant]="'primaryBlack'"
-      [label]="'Se connecter'"
-      [size]="'small'"
-      (action)="clickProfileButton()"
-    />
-  </div>
+    <div
+      #clickableLogo
+      class="logo clickable"
+      aria-label="Retour accueil"
+      role="button"
+      tabindex="0"
+      (click)="goToHome()"
+      (keyup.enter)="goToHome()"
+    >
+      <img
+        *ngIf="displayLogo(); else customTitle"
+        class="logo-grand-lyon"
+        width="108"
+        height="37"
+        src="/assets/logos/resin.svg"
+        alt
+      />
+    </div>
+    <div class="containerIconMenu profile">
+      <app-svg-icon
+        [asButton]="true"
+        [ariaLabel]="isLoggedIn ? 'Ouvrir le menu Mon compte' : 'Se connecter'"
+        [folder]="'ico'"
+        [icon]="'profile'"
+        [iconClass]="'icon-32'"
+        (action)="clickProfileButton()"
+      />
+    </div>
+    <div class="rightHeader">
+      <div class="menuItems" role="menu">
+        <a
+          routerLink="/actualites"
+          role="menuitem"
+          title="Actualités"
+          [routerLinkActive]="'active'"
+          i18n
+          [attr.aria-current]="isActive('/actualites')"
+        >
+          Actualités
+        </a>
+        <a
+          routerLink="/acteurs"
+          role="menuitem"
+          title="Cartographie"
+          [routerLinkActive]="'active'"
+          i18n
+          [attr.aria-current]="isActive('/acteurs')"
+        >
+          Cartographie
+        </a>
+        <a
+          routerLink="/orientation"
+          role="menuitem"
+          title="Orienter des bénéficiaires"
+          [routerLinkActive]="'active'"
+          i18n
+          [attr.aria-current]="isActive('/orientation')"
+        >
+          Orienter des bénéficiaires
+        </a>
+        <a
+          routerLink="/annuaire"
+          role="menuitem"
+          title="Annuaire"
+          [routerLinkActive]="'active'"
+          i18n
+          [attr.aria-current]="isActive('/annuaire')"
+        >
+          Annuaire
+        </a>
+        <a
+          *ngIf="isAdmin"
+          routerLink="/admin"
+          role="menuitem"
+          title="Administration"
+          [routerLinkActive]="'active'"
+          [attr.aria-current]="isActive('/admin')"
+        >
+          Administration
+        </a>
+      </div>
+      <app-button
+        *ngIf="isLoggedIn"
+        class="connected"
+        ariaLabel="Ouvrir le menu Mon compte - {{ displayName }}"
+        [variant]="'primary'"
+        [label]="displayName"
+        [size]="'small'"
+        (action)="clickProfileButton()"
+      />
+      <app-button
+        *ngIf="!isLoggedIn"
+        ariaLabel="Se connecter"
+        [variant]="'primaryBlack'"
+        [label]="'Se connecter'"
+        [size]="'small'"
+        (action)="clickProfileButton()"
+      />
+    </div>
+  </nav>
 </header>
 
 <div *ngIf="showMenu" role="menu" class="mobileMenu" [@slideInOut]>

src/app/header/header.component.scss

@@ -4,7 +4,7 @@
 @import 'breakpoint';
 @import 'z-index';
 
-header {
+header > nav {
   height: $header-height;
   display: flex;
   align-items: center;

src/app/shared/components/modal/modal.component.html

@@ -11,7 +11,7 @@
         (action)="closeModal(false)"
       />
     </div>
-    <p><ng-content /></p>
+    <div class="content"><ng-content /></div>
     <div class="footerModal">
       <app-button
         *ngIf="!singleButton"

src/app/shared/components/modal/modal.component.scss

@@ -42,7 +42,7 @@
         text-align: center;
       }
     }
-    p {
+    .content {
       text-align: center;
       margin: 0;
     }

src/app/shared/components/nav-bar/nav-bar.component.html

-<nav>
+<nav aria-label="Page">
   <div role="tablist" class="navigation" [attr.aria-label]="ariaLabel" [ngClass]="{ expand: shouldExpand }">
     <div
       *ngFor="let tab of tabs; let i = index"