From 55610d8a47c994e07d719745c4843ddfeab82661 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Thu, 19 Sep 2024 15:53:41 +0200
Subject: [PATCH] Fix markdown textarea maximize icon accessibility

---
 .../shared-forms/markdown-textarea.component.html      | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.html b/client/src/app/shared/shared-forms/markdown-textarea.component.html
index dea5693f7..8a4877bd8 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.html
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.html
@@ -26,9 +26,13 @@
     </ng-container>
 
     <button type="button" (click)="onMaximizeClick()" class="maximize-button border-0 m-3" [disabled]="disabled">
-      <my-global-icon *ngIf="!isMaximized" [ngbTooltip]="maximizeInText" iconName="fullscreen"></my-global-icon>
-
-      <my-global-icon *ngIf="isMaximized" [ngbTooltip]="maximizeOutText" iconName="exit-fullscreen"></my-global-icon>
+      @if (isMaximized) {
+        <my-global-icon [ngbTooltip]="maximizeOutText" iconName="exit-fullscreen"></my-global-icon>
+        <span class="visually-hidden">{{ maximizeOutText }}</span>
+      } @else {
+        <my-global-icon [ngbTooltip]="maximizeInText" iconName="fullscreen"></my-global-icon>
+        <span class="visually-hidden">{{ maximizeInText }}</span>
+      }
     </button>
   </div>