diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index 256280bcce90ca15d199c0e7000f38c8a8229609..9595402006d9d7d0858f58bab23637345a751152 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -1,12 +1,12 @@ <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> diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts index 44e3e333d331dcdcc1a6d64595bd6c59d831d83f..324ca2e285f33cb6799601f64e6aac8fe1ca7912 100644 --- a/src/app/header/header.component.ts +++ b/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(); diff --git a/src/app/shared/components/modal/modal.component.html b/src/app/shared/components/modal/modal.component.html index 4dc00f956b0f72627852bfef613878cb83edf596..9c8d15368229e20a5a4f55e966931442fddd7c80 100644 --- a/src/app/shared/components/modal/modal.component.html +++ b/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'" diff --git a/src/app/shared/components/svg-icon/svg-icon.component.html b/src/app/shared/components/svg-icon/svg-icon.component.html index 367937390205a97e7da2f35bca7eac89a7a8ec37..42d1e92cecb162e3df1241e9d7c5f747b5564156 100644 --- a/src/app/shared/components/svg-icon/svg-icon.component.html +++ b/src/app/shared/components/svg-icon/svg-icon.component.html @@ -1,4 +1,10 @@ -<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> diff --git a/src/app/shared/components/svg-icon/svg-icon.component.ts b/src/app/shared/components/svg-icon/svg-icon.component.ts index ea27199f52fb448bf6492c329bfa452f859fbd7d..1654a120ea775eed9867c27d4884729587f4199d 100644 --- a/src/app/shared/components/svg-icon/svg-icon.component.ts +++ b/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>(); } diff --git a/src/app/structure-list/components/more-filters/more-filters.component.html b/src/app/structure-list/components/more-filters/more-filters.component.html index 1b55f7e458e4deacd4a1e1fa9033281d2ff3a546..4581cdb77b374393546b22b9f12401d92800c6ea 100644 --- a/src/app/structure-list/components/more-filters/more-filters.component.html +++ b/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'" diff --git a/src/app/structure-list/components/structure-details/structure-details.component.html b/src/app/structure-list/components/structure-details/structure-details.component.html index 0b3a9b03b15dd6337af1403846bab55c7130f03a..0d967edc1d227885b4e844c950b78e184b3dcb74 100644 --- a/src/app/structure-list/components/structure-details/structure-details.component.html +++ b/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'"