Fix icon only button accessibility

Chocobozzz · Nov 25, 2024 · d6eb99e · d6eb99e
1 parent 6922bcc
commit d6eb99e
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>