From 114b197c893fc52f5516d5a1d8d56ed57e6443cc Mon Sep 17 00:00:00 2001
From: mchouliara <mchouliara@cite.gr>
Date: Wed, 25 Sep 2024 14:40:19 +0300
Subject: [PATCH] aria-hide icons in navbar

---
 .../src/app/ui/navbar/navbar.component.html   | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/ui/navbar/navbar.component.html b/frontend/src/app/ui/navbar/navbar.component.html
index c0e6d76a7..33277c2f3 100644
--- a/frontend/src/app/ui/navbar/navbar.component.html
+++ b/frontend/src/app/ui/navbar/navbar.component.html
@@ -20,7 +20,7 @@
 			<ul class="horizontal-list justify-content-end" id="navigation">
                 <li class="navbar-item-sm ml-auto">
                     <button mat-icon-button [matMenuTriggerFor]="toggleMenu" [attr.aria-label]="'ALT-TEXT.USER-OPTIONS' | translate">
-                        <mat-icon>more_horiz</mat-icon>
+                        <mat-icon aria-hidden>more_horiz</mat-icon>
                     </button>
                 </li>
 
@@ -33,16 +33,16 @@
                         [matTooltip]="toggleFontSizeTooltip" 
                         [attr.aria-label]="toggleFontSizeTooltip"
                     >
-                        <mat-icon>format_size</mat-icon>
+                        <mat-icon aria-hidden>format_size</mat-icon>
                     </button>
                 </li>
 				<li class="navbar-item-lg" *ngIf="!(isAuthenticated() && onInvalidUrl())">
 					<button mat-button class="faq-title" (click)="openFaqDialog()">{{ 'FAQ.TITLE' | translate }}</button>
 				</li>
                 <li class="navbar-item-lg" *ngIf="!(isAuthenticated() && onInvalidUrl())">
-					<button mat-button [matMenuTriggerFor]="languageMenu" class="lang">
+					<button mat-button [matMenuTriggerFor]="languageMenu" class="lang" [attr.aria-label]="'ALT-TEXT.LANGUAGE-SELECT' | translate">
 						<mat-icon aria-hidden>language</mat-icon><span class="text-uppercase" style="font-weight: 500;">{{selectedLanguage}}</span>
-						<mat-icon iconPositionEnd alt="{{'ALT-TEXT.LANGUAGE-SELECT' | translate}}">arrow_drop_down</mat-icon>
+						<mat-icon iconPositionEnd aria-hidden>arrow_drop_down</mat-icon>
 					</button>
                     <mat-menu #languageMenu="matMenu" class="nav-mat-menu">
 						<app-language (languageChange)="getLanguage($event)" class="d-lg-block d-none"></app-language>
@@ -50,8 +50,8 @@
                 </li>
 				<li class="navbar-item-lg" *ngIf="isAuthenticated()">
 					<button mat-button [matMenuTriggerFor]="tenantMenu" class="p-0 lang" [attr.aria-label]="'ALT-TEXT.TENANT-SELECT' | translate">
-						<mat-icon class="m-0 material-symbols-outlined">tenancy</mat-icon>
-						<mat-icon class="m-0">arrow_drop_down</mat-icon>
+						<mat-icon aria-hidden class="m-0 material-symbols-outlined">tenancy</mat-icon>
+						<mat-icon aria-hidden class="m-0">arrow_drop_down</mat-icon>
 					</button>
 					<mat-menu #tenantMenu="matMenu" class="nav-mat-menu">
 						<app-tenant-switch class="d-lg-block d-none"></app-tenant-switch>
@@ -88,16 +88,16 @@
                     <li class="ml-3 d-flex justify-content-around align-items-center" (click)="$event.stopPropagation()" tabindex="0">
                         <button mat-button class="faq-title" (click)="openFaqDialog()" [attr.aria-label]="'FAQ.TITLE' | translate">{{ 'FAQ.TITLE' | translate }}</button>
                         <button mat-button [matMenuTriggerFor]="languageMenu" class="lang" [attr.aria-label]="'ALT-TEXT.LANGUAGE-SELECT' | translate" (click)="$event.stopPropagation();">
-                            <mat-icon>language</mat-icon><span class="text-uppercase" style="font-weight: 500;">{{selectedLanguage}}</span>
-                            <mat-icon iconPositionEnd>arrow_drop_down</mat-icon>
+                            <mat-icon aria-hidden>language</mat-icon><span class="text-uppercase" style="font-weight: 500;">{{selectedLanguage}}</span>
+                            <mat-icon aria-hidden iconPositionEnd>arrow_drop_down</mat-icon>
                         </button>
                         <mat-menu #languageMenu="matMenu" class="nav-mat-menu">
                             <app-language (languageChange)="getLanguage($event)"></app-language>
                         </mat-menu>
                         <ng-container *ngIf="isAuthenticated()">
                             <button mat-button [matMenuTriggerFor]="tenantMenu" class="p-0" [attr.aria-label]="'ALT-TEXT.TENANT-SELECT' | translate">
-                                <mat-icon class="m-0 material-symbols-outlined">tenancy</mat-icon>
-                                <mat-icon class="m-0">arrow_drop_down</mat-icon>
+                                <mat-icon aria-hidden class="m-0 material-symbols-outlined">tenancy</mat-icon>
+                                <mat-icon aria-hidden class="m-0">arrow_drop_down</mat-icon>
                             </button>
                             <mat-menu #tenantMenu="matMenu" class="nav-mat-menu">
                                 <app-tenant-switch></app-tenant-switch>