From d6eb99edb228de7edb3525336a1e8c32b19852d6 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Mon, 25 Nov 2024 11:29:18 +0100
Subject: [PATCH] Fix icon only button accessibility

---
 client/src/app/header/header.component.html               | 5 ++++-
 .../app/shared/shared-main/buttons/button.component.html  | 4 ++--
 .../app/shared/shared-main/buttons/button.component.ts    | 1 +
 .../shared/shared-main/users/login-link.component.html    | 8 +++++++-
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/client/src/app/header/header.component.html b/client/src/app/header/header.component.html
index 770ee8fb193..50e50b559f9 100644
--- a/client/src/app/header/header.component.html
+++ b/client/src/app/header/header.component.html
@@ -20,7 +20,10 @@
     } @else {
       <my-notification-dropdown class="margin-button"></my-notification-dropdown>
 
-      <my-button theme="tertiary" rounded="true" class="margin-button" icon="cog" ptRouterLink="/my-account"></my-button>
+      <my-button
+        i18n-title title="Go to the manage your account page"
+        theme="tertiary" rounded="true" class="margin-button" icon="cog" ptRouterLink="/my-account"
+      ></my-button>
 
       <div
         class="logged-in-container" ngbDropdown #dropdown="ngbDropdown" placement="bottom-left auto"
diff --git a/client/src/app/shared/shared-main/buttons/button.component.html b/client/src/app/shared/shared-main/buttons/button.component.html
index 07c261eedb7..00c4cd4df55 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.html
+++ b/client/src/app/shared/shared-main/buttons/button.component.html
@@ -1,13 +1,13 @@
 @if (ptRouterLink || ptQueryParams) {
   <a
     class="action-button"
-    [ngClass]="classes" [ngbTooltip]="title"
+    [ngClass]="classes" [ngbTooltip]="tooltip" [title]="title"
     [routerLink]="ptRouterLink" [queryParams]="ptQueryParams" [queryParamsHandling]="ptQueryParamsHandling" [routerLinkActive]="ptRouterLinkActive"
   >
     <ng-container *ngTemplateOutlet="content"></ng-container>
   </a>
 } @else {
-  <button type="button" class="action-button" [ngClass]="classes" [disabled]="disabled" [ngbTooltip]="title">
+  <button type="button" class="action-button" [ngClass]="classes" [disabled]="disabled" [ngbTooltip]="tooltip" [title]="title">
     <ng-container *ngTemplateOutlet="content"></ng-container>
   </button>
 }
diff --git a/client/src/app/shared/shared-main/buttons/button.component.ts b/client/src/app/shared/shared-main/buttons/button.component.ts
index 505d1efeb3f..0dc09d003c4 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/button.component.ts
@@ -50,6 +50,7 @@ export class ButtonComponent implements OnChanges, AfterViewInit {
   @Input() ptRouterLinkActive = ''
 
   @Input() title: string
+  @Input() tooltip: string
   @Input({ transform: booleanAttribute }) active = false
 
   @Input({ transform: booleanAttribute }) loading = false
diff --git a/client/src/app/shared/shared-main/users/login-link.component.html b/client/src/app/shared/shared-main/users/login-link.component.html
index 77a4dea31d5..a8dc2f6614a 100644
--- a/client/src/app/shared/shared-main/users/login-link.component.html
+++ b/client/src/app/shared/shared-main/users/login-link.component.html
@@ -1,3 +1,9 @@
-<my-link class="d-flex" internalLink="/login" [href]="getExternalLoginHref()" [className]="className" [icon]="icon ? 'sign-in' : undefined">
+<my-link
+  i18n-title title="Go to the login page"
+  class="d-flex"
+  internalLink="/login" [href]="getExternalLoginHref()"
+  [className]="className"
+  [icon]="icon ? 'sign-in' : undefined"
+>
   {{ label }}
 </my-link>