Merge branch 'dev' into 'master'

V3.1.0 (fix)

See merge request !853

src/app/header/header.component.html

 <header class="hide-on-print">
   <div class="containerIconMenu">
     <app-svg-icon
-      aria-label="Ouvrir le menu"
       [asButton]="true"
+      [ariaLabel]="'Ouvrir le menu'"
       [folder]="'ico'"
       [icon]="'menu'"
       [iconClass]="'icon-32'"
-      (action)="openMenu()"
+      (action)="toggleMenu()"
     />
   </div>
   <div
@@ -29,11 +29,11 @@
   <div class="containerIconMenu profile">
     <app-svg-icon
       [asButton]="true"
-      [attr.aria-label]="isLoggedIn ? 'Ouvrir le menu Mon compte' : 'Se connecter'"
+      [ariaLabel]="isLoggedIn ? 'Ouvrir le menu Mon compte' : 'Se connecter'"
       [folder]="'ico'"
       [icon]="'profile'"
       [iconClass]="'icon-32'"
-      (action)="isLoggedIn ? openProfileMenu() : goToLoginPage()"
+      (action)="clickProfileButton()"
     />
   </div>
   <div class="rightHeader">
@@ -96,7 +96,7 @@
       [variant]="'primary'"
       [label]="displayName"
       [size]="'small'"
-      (action)="openProfileMenu()"
+      (action)="clickProfileButton()"
     />
     <app-button
       *ngIf="!isLoggedIn"
@@ -104,7 +104,7 @@
       [variant]="'primaryBlack'"
       [label]="'Se connecter'"
       [size]="'small'"
-      (action)="goToLoginPage()"
+      (action)="clickProfileButton()"
     />
   </div>
 </header>

src/app/header/header.component.ts

@@ -55,6 +55,7 @@ export class HeaderComponent {
     return this.router.url === route ? 'page' : '';
   }
   public goToHome(): void {
+    this.closeMenu();
     this.router.navigateByUrl('/home');
   }
   public goToProfile(): void {
@@ -62,8 +63,8 @@ export class HeaderComponent {
     this.router.navigateByUrl('/profil');
   }
 
-  public openMenu(): void {
-    this.showMenu = true;
+  public toggleMenu(): void {
+    this.showMenu = !this.showMenu;
   }
   public closeMenu(): void {
     this.showMenu = false;
@@ -75,6 +76,14 @@ export class HeaderComponent {
   public closeProfileMenu(): void {
     this.showProfileMenu = false;
   }
+  public clickProfileButton(): void {
+    this.closeMenu();
+    if (this.isLoggedIn) {
+      this.openProfileMenu();
+    } else {
+      this.goToLoginPage();
+    }
+  }
 
   public get isLoggedIn(): boolean {
     return this.authService.isLoggedIn();

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

@@ -3,8 +3,8 @@
     <div class="headerModal">
       <h3>{{ title }}</h3>
       <app-svg-icon
-        aria-label="Fermer la fenêtre"
         [asButton]="true"
+        [ariaLabel]="'Fermer la fenêtre'"
         [folder]="'ico'"
         [icon]="'cross'"
         [iconClass]="'icon-24'"

src/app/shared/components/svg-icon/svg-icon.component.html

-<button *ngIf="asButton; else svgIcon" type="button" class="asButton" (click)="action.emit()">
+<button
+  *ngIf="asButton; else svgIcon"
+  type="button"
+  class="asButton"
+  [attr.aria-label]="ariaLabel"
+  (click)="action.emit()"
+>
   <ng-container *ngTemplateOutlet="svgIcon" />
 </button>
 

src/app/shared/components/svg-icon/svg-icon.component.ts

@@ -18,5 +18,6 @@ export class SvgIconComponent {
 
   /** If should be interactive */
   @Input() asButton = false;
+  @Input() ariaLabel?: string = null;
   @Output() action = new EventEmitter<void>();
 }

src/app/structure-list/components/more-filters/more-filters.component.html

@@ -4,8 +4,8 @@
     <div *ngIf="getModalType() === 'moreFilters'" class="moreFiltersHeader">
       <h3>Plus de filtres</h3>
       <app-svg-icon
-        aria-label="Fermer la fenêtre"
         [asButton]="true"
+        [ariaLabel]="'Fermer la fenêtre'"
         [iconClass]="'icon-24'"
         [iconColor]="'grey-1'"
         [icon]="'cross'"

src/app/structure-list/components/structure-details/structure-details.component.html

@@ -30,8 +30,8 @@
       <app-svg-icon
         #closeButton
         cdkFocusInitial
-        aria-label="Fermer"
         [asButton]="true"
+        [ariaLabel]="'Fermer'"
         [folder]="'ico'"
         [icon]="'cross'"
         [iconColor]="'grey-1'"