From 0da19960db2307b68a3b3624d550878df59bcca2 Mon Sep 17 00:00:00 2001
From: mchouliara <mchouliara@cite.gr>
Date: Fri, 20 Sep 2024 15:16:07 +0300
Subject: [PATCH] focusable navbar, translations for alt texts, move all
 dashboard styles to dashboard.scss

---
 ...ate-editor-section-fieldset.component.html | 10 +--
 .../user/listing/user-listing.component.html  |  4 +-
 .../app/ui/dashboard/dashboard.component.html | 14 ++--
 .../description-listing.component.html        |  2 +-
 .../description-filter.component.html         |  4 +-
 .../src/app/ui/navbar/navbar.component.html   | 38 ++++-----
 .../filtering/plan-filter.component.html      |  4 +-
 .../plan-user-field.component.html            |  2 +-
 .../sidebar-footer.component.html             |  6 +-
 .../src/app/ui/sidebar/sidebar.component.css  | 81 ------------------
 .../src/app/ui/sidebar/sidebar.component.scss | 83 +++++++++++++++++++
 .../src/app/ui/sidebar/sidebar.component.ts   |  2 +-
 .../user-profile/user-profile.component.html  |  2 +-
 frontend/src/assets/i18n/baq.json             | 15 +++-
 frontend/src/assets/i18n/de.json              | 15 +++-
 frontend/src/assets/i18n/en.json              | 16 +++-
 frontend/src/assets/i18n/es.json              | 15 +++-
 frontend/src/assets/i18n/gr.json              | 15 +++-
 frontend/src/assets/i18n/hr.json              | 15 +++-
 frontend/src/assets/i18n/pl.json              | 15 +++-
 frontend/src/assets/i18n/pt.json              | 15 +++-
 frontend/src/assets/i18n/sk.json              | 15 +++-
 frontend/src/assets/i18n/sr.json              | 15 +++-
 frontend/src/assets/i18n/tr.json              | 15 +++-
 24 files changed, 281 insertions(+), 137 deletions(-)
 delete mode 100644 frontend/src/app/ui/sidebar/sidebar.component.css

diff --git a/frontend/src/app/ui/admin/description-template/editor/components/section-fieldset/description-template-editor-section-fieldset.component.html b/frontend/src/app/ui/admin/description-template/editor/components/section-fieldset/description-template-editor-section-fieldset.component.html
index 216b7ac6b..ba0555ea1 100644
--- a/frontend/src/app/ui/admin/description-template/editor/components/section-fieldset/description-template-editor-section-fieldset.component.html
+++ b/frontend/src/app/ui/admin/description-template/editor/components/section-fieldset/description-template-editor-section-fieldset.component.html
@@ -14,7 +14,7 @@
 				<div class="row justify-content-center mt-4 mb-2">
 					<div class="col-auto add-question" (click)="addFieldSetAfter(-9999,0)" *ngIf="!viewOnly">
 						<img src="/assets/images/editor/icons/add_input_set.svg" class="question-icon mr-2"
-							alt="Add Question icon">
+							aria-hidden>
 						<span>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}</span>
 					</div>
 				</div>
@@ -30,7 +30,7 @@
 								<div class="action-list-item" (click)="onAddFieldSet()">
 									<!-- <mat-icon class="action-list-icon">folder</mat-icon> -->
 									<img src="/assets/images/editor/icons/add_input_set.svg" class="input_icon"
-										alt="Add Question icon">
+										aria-hidden>
 									<span
 										class="action-list-text">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET'
 										| translate}}</span>
@@ -86,7 +86,7 @@
 								<div class="action-list-item" (click)="onAddFieldSet()">
 									<!-- <mat-icon class="action-list-icon">folder</mat-icon> -->
 									<img src="/assets/images/editor/icons/add_input_set.svg" class="input_icon"
-										alt="Add Question icon">
+										aria-hidden>
 									<span
 										class="action-list-text">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET'
 										| translate}}</span>
@@ -98,7 +98,7 @@
 								<div class="action-list-item" (click)="onCloneFieldSet(fieldset)">
 									<!-- <mat-icon class="action-list-icon">file_copy</mat-icon> -->
 									<img src="/assets/images/editor/icons/clone.svg" class="input_icon"
-										alt="Clone icon">
+										aria-hidden>
 									<span class="action-list-text">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.CLONE' |
 										translate}}</span>
 								</div>
@@ -120,7 +120,7 @@
 					<div class="col-auto add-question" (click)="addFieldSetAfter(fieldset.get('ordinal').value, i)"
 						*ngIf="!viewOnly">
 						<img src="/assets/images/editor/icons/add_input_set.svg" class="question-icon mr-2"
-							alt="Add Question icon">
+							aria-hidden>
 						<span>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}</span>
 					</div>
 				</div>
diff --git a/frontend/src/app/ui/admin/user/listing/user-listing.component.html b/frontend/src/app/ui/admin/user/listing/user-listing.component.html
index 86bf3ae71..18fe72079 100644
--- a/frontend/src/app/ui/admin/user/listing/user-listing.component.html
+++ b/frontend/src/app/ui/admin/user/listing/user-listing.component.html
@@ -68,8 +68,8 @@
 <ng-template #nameCellTemplate let-row="row" let-item>
 	<div class="row align-items-center">
 		<div class="col-auto">
-			<img *ngIf="row?.additionalInfo?.avatarUrl" class="user-avatar" [src]="row?.additionalInfo?.avatarUrl" (error)="this.setDefaultAvatar($event)" alt="user avatar">
-			<img *ngIf="!row?.additionalInfo?.avatarUrl" class="user-avatar" [src]="'assets/images/profile-placeholder.png'" alt="user avatar">
+			<img *ngIf="row?.additionalInfo?.avatarUrl" class="user-avatar" [src]="row?.additionalInfo?.avatarUrl" (error)="this.setDefaultAvatar($event)" aria-hidden>
+			<img *ngIf="!row?.additionalInfo?.avatarUrl" class="user-avatar" [src]="'assets/images/profile-placeholder.png'" aria-hidden>
 		</div>
 		<div class="col">{{row.name}}</div>
 
diff --git a/frontend/src/app/ui/dashboard/dashboard.component.html b/frontend/src/app/ui/dashboard/dashboard.component.html
index 8bfc0daf7..48da01968 100644
--- a/frontend/src/app/ui/dashboard/dashboard.component.html
+++ b/frontend/src/app/ui/dashboard/dashboard.component.html
@@ -22,7 +22,7 @@
 										</a>
 									</div>
 									<span class="new-releases-logo">
-										<img src="../../../assets/images/new-releases-logo.png" alt="new releases icon">
+										<img src="../../../assets/images/new-releases-logo.png" alt="{{'ALT-TEXT.NEW-RELEASES' | translate}}">
 									</span>
 								</div>
 							</div>
@@ -54,7 +54,7 @@
 										</div>
 									</div>
 									<span class="col-auto ml-auto">
-										<img class="laptop-img\6" alt="colorful art of a person working on an oversized computer" src="../../../assets/images/dashboard-popup.png">
+										<img class="laptop-img\6" alt="{{'ALT-TEXT.DASHBOARD-POPUP-IMAGE' | translate }}" src="../../../assets/images/dashboard-popup.png">
 									</span>
 								</div>
 							</div>
@@ -62,25 +62,25 @@
 						<div *ngIf="this.hasPlans()" class="col">
 							<div class="latest-activity-title">{{'DASHBOARD.LATEST-ACTIVITY' | translate}}</div>
 							<mat-tab-group dynamicHeight color="#00000" mat-stretch-tabs="false" mat-align-tabs="start" class="my-mat-tab remove-border-bottom" [selectedIndex]="indexFromCurrentType" (selectedTabChange)="currentType = $event.tab.ariaLabel">
-								<mat-tab aria-label="recent" label="{{'DASHBOARD.ALL' | translate}}">
+								<mat-tab aria-label="{{'DASHBOARD.ALL' | translate}}" label="{{'DASHBOARD.ALL' | translate}}">
 									<app-recent-edited-activity 
                                         [currentType]="currentType" 
                                         [type]="ActivityListingType.Recent"
                                     ></app-recent-edited-activity>
 								</mat-tab>
-								<mat-tab aria-label="drafts" label="{{'DASHBOARD.DRAFTS' | translate}}">
+								<mat-tab aria-label="{{'DASHBOARD.DRAFTS' | translate}}" label="{{'DASHBOARD.DRAFTS' | translate}}">
 									<app-recent-edited-activity 
                                         [currentType]="currentType" 
                                         [type]="ActivityListingType.Drafts" 
                                     ></app-recent-edited-activity>
 								</mat-tab>
-								<mat-tab aria-label="plans" label="{{'DASHBOARD.PLANS' | translate}}">
+								<mat-tab aria-label="{{'DASHBOARD.PLANS' | translate}}" label="{{'DASHBOARD.PLANS' | translate}}">
 									<app-recent-edited-activity 
                                         [currentType]="currentType" 
                                         [type]="ActivityListingType.Plans" 
                                     ></app-recent-edited-activity>
 								</mat-tab>
-								<mat-tab aria-label="descriptions" label="{{'DASHBOARD.DESCRIPTIONS' | translate}}">
+								<mat-tab aria-label="{{'DASHBOARD.DESCRIPTIONS' | translate}}" label="{{'DASHBOARD.DESCRIPTIONS' | translate}}">
 									<app-recent-edited-activity 
                                         [currentType]="currentType" 
                                         [type]="ActivityListingType.Descriptions" 
@@ -176,7 +176,7 @@
 									<p class="col-auto app-info">{{'DASHBOARD.INFO-TEXT' | translate}}</p>
 								</div>
 								<div class="d-flex">
-									<img class="col-auto ml-auto laptop-img" alt="colorful art of a person working on an oversized computer" src="../../../assets/images/dashboard-popup.png">
+									<img class="col-auto ml-auto laptop-img" alt="{{'ALT-TEXT.DASHBOARD-POPUP-IMAGE' | translate }}" src="../../../assets/images/dashboard-popup.png">
 								</div>
 							</div>
 						</div>
diff --git a/frontend/src/app/ui/description/listing/description-listing.component.html b/frontend/src/app/ui/description/listing/description-listing.component.html
index 1c8cef090..254617f33 100644
--- a/frontend/src/app/ui/description/listing/description-listing.component.html
+++ b/frontend/src/app/ui/description/listing/description-listing.component.html
@@ -9,7 +9,7 @@
 						<button mat-button class="rounded-btn secondary align-self-center" (click)="addNewDescription()">
 							{{'DESCRIPTION-LISTING.ACTIONS.ADD-DESCRIPTION' | translate}}
 						</button>
-						<img class="col-auto ml-auto laptop-img" alt="colorful art of a person working on an oversized computer" src="../../../assets/images/dashboard-popup.png">
+						<img class="col-auto ml-auto laptop-img" alt="{{'ALT-TEXT.DASHBOARD-POPUP-IMAGE' | translate }}" src="../../../assets/images/dashboard-popup.png">
 					</div>
 				</div>
 			</div>
diff --git a/frontend/src/app/ui/description/listing/filtering/description-filter.component.html b/frontend/src/app/ui/description/listing/filtering/description-filter.component.html
index e493dbcca..502097919 100644
--- a/frontend/src/app/ui/description/listing/filtering/description-filter.component.html
+++ b/frontend/src/app/ui/description/listing/filtering/description-filter.component.html
@@ -11,7 +11,7 @@
 			<!-- Status Filter-->
 			<div class="col-10" *ngIf="!isPublic">
 				<h6 class="category-title">{{ 'DESCRIPTION-LISTING.FILTERS.STATUS.NAME' | translate}}</h6>
-				<mat-radio-group aria-label="Select an option" [formControl]="formGroup.get('status')" class="row">
+				<mat-radio-group aria-label="{{'ALT-TEXT.SELECT-OPTION' | translate}}" [formControl]="formGroup.get('status')" class="row">
 					<mat-radio-button [value]="null" [checked]="formGroup.get('status')?.value == null" class="col-12">{{ 'DESCRIPTION-LISTING.FILTERS.STATUS.TYPES.ANY' | translate }}</mat-radio-button>
 					<mat-radio-button [value]="statuses.Draft" class="col-12">{{ 'DESCRIPTION-LISTING.FILTERS.STATUS.TYPES.DRAFT' | translate }}</mat-radio-button>
 					<mat-radio-button [value]="statuses.Finalized" class="col-12">{{ 'DESCRIPTION-LISTING.FILTERS.STATUS.TYPES.FINALIZED' | translate }}</mat-radio-button>
@@ -63,7 +63,7 @@
 			<!-- Role Filter -->
 			<div class="col-10" *ngIf="isAuthenticated()">
 				<h6 class="category-title">{{'DESCRIPTION-LISTING.FILTERS.ROLE.NAME' | translate }}</h6>
-				<mat-radio-group aria-label="Select an option" [formControl]="formGroup.get('role')" class="row">
+				<mat-radio-group aria-label="{{'ALT-TEXT.SELECT-OPTION' | translate}}" [formControl]="formGroup.get('role')" class="row">
 					<mat-radio-button [value]="null" [checked]="formGroup.get('role').value == null" class="col-12">{{ 'DESCRIPTION-LISTING.FILTERS.ROLE.TYPES.ANY' | translate }}</mat-radio-button>
 					<mat-radio-button [value]="planRole.Owner" class="col-12">{{ 'DESCRIPTION-LISTING.FILTERS.ROLE.TYPES.OWNER' | translate }}</mat-radio-button>
 					<mat-radio-button [value]="planRole.Viewer" class="col-12">{{ 'DESCRIPTION-LISTING.FILTERS.ROLE.TYPES.VIEWER' | translate }}</mat-radio-button>
diff --git a/frontend/src/app/ui/navbar/navbar.component.html b/frontend/src/app/ui/navbar/navbar.component.html
index 90707c0c0..b97c4cac0 100644
--- a/frontend/src/app/ui/navbar/navbar.component.html
+++ b/frontend/src/app/ui/navbar/navbar.component.html
@@ -1,25 +1,25 @@
 <ng-container>
 	<nav class="navbar navbar-expand-lg fixed-navbar">
 		<div class="container-fluid h-100">
-            <button class="hamburger change" id="hamburger" (click)="toggleMyNav($event)" aria-label="hide or show navigation sidebar">
+            <button class="hamburger change" id="hamburger" (click)="toggleMyNav($event)" [attr.aria-label]="'ALT-TEXT.HAMBURGER' | translate">
                 <div class="icon-bar1"></div>
                 <div class="icon-bar2"></div>
                 <div class="icon-bar3"></div>
             </button>
             <h1 class="logo mr-auto" >
                 <a [routerLink]="routerUtils.generateUrl(['home'])">
-                    <img class="logo-image" alt="go to homepage" [src]="'../../../assets/images/nav-logo' + configurationService.navLogoExtension">
+                    <img class="logo-image" alt="{{'ALT-TEXT.GO-TO-MAIN' | translate}}" [src]="'../../../assets/images/nav-logo' + configurationService.navLogoExtension">
                 </a>
             </h1>
             @if(extraImageURL){
-                <a class="extra-logo" [routerLink]="routerUtils.generateUrl(['home'])" aria-label="home">
-                    <img alt="logo image" class="extra-logo-image" [src]="extraImageURL">
+                <a class="extra-logo" [routerLink]="routerUtils.generateUrl(['home'])">
+                    <img aria-hidden class="extra-logo-image" [src]="extraImageURL" alt="{{'ALT-TEXT.GO-TO-MAIN' | translate}}" >
                 </a>
             }
 
 			<ul class="horizontal-list justify-content-end" id="navigation">
                 <li class="navbar-item-sm ml-auto">
-                    <button mat-icon-button [matMenuTriggerFor]="toggleMenu" aria-label="user options dropwdown">
+                    <button mat-icon-button [matMenuTriggerFor]="toggleMenu" [attr.aria-label]="'ALT-TEXT.USER-OPTIONS' | translate">
                         <mat-icon>more_horiz</mat-icon>
                     </button>
                 </li>
@@ -31,16 +31,16 @@
 					<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" aria-label="language select">
-						<mat-icon>language</mat-icon><span class="text-uppercase" style="font-weight: 500;">{{selectedLanguage}}</span>
-						<mat-icon iconPositionEnd aria-hidden>arrow_drop_down</mat-icon>
+					<button mat-button [matMenuTriggerFor]="languageMenu" class="lang">
+						<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>
 					</button>
                     <mat-menu #languageMenu="matMenu" class="nav-mat-menu">
 						<app-language (languageChange)="getLanguage($event)" class="d-lg-block d-none"></app-language>
 					</mat-menu>
                 </li>
 				<li class="navbar-item-lg" *ngIf="isAuthenticated()">
-					<button mat-button [matMenuTriggerFor]="tenantMenu" class="p-0 lang" aria-label="tenants">
+					<button mat-button [matMenuTriggerFor]="tenantMenu" class="p-0 lang" aria-label="{{'ALT-TEXT.TENANT-SELECT' | translate}}">
 						<mat-icon class="m-0 material-symbols-outlined">tenancy</mat-icon>
 						<mat-icon class="m-0" aria-hidden>arrow_drop_down</mat-icon>
 					</button>
@@ -52,16 +52,16 @@
 					<mat-menu #languageMenu="matMenu" class="nav-mat-menu">
 						<app-language (languageChange)="getLanguage($event)"></app-language>
 					</mat-menu>
-					<button mat-icon-button matTooltip="{{'NAV-BAR.INAPP-NOTIFICATIONS' | translate}}" (click)="toggleInAppNotifications()" aria-label="notifications">
-						<mat-icon aria-hidden [matBadge]="inAppNotificationCount" [matBadgeHidden]="inAppNotificationCount <= 0" matBadgeColor="warn">mail</mat-icon>
+					<button mat-icon-button matTooltip="{{'NAV-BAR.INAPP-NOTIFICATIONS' | translate}}" (click)="toggleInAppNotifications()" [attr.aria-label]="'ALT-TEXT.NOTIFICATIONS' | translate">
+						<mat-icon aria-hidden [matBadge]="inAppNotificationCount" [matBadgeHidden]="inAppNotificationCount <= 0" matBadgeColor="warn" aria-hidden>mail</mat-icon>
 					</button>
 				</li>
 
                 <!-- Login -->
 				<li class="pl-2">
                     @if(this.isAuthenticated()) {
-                        <button (click)="openProfile()" [matTooltip]="userName" style="border: none; background-color: transparent;" aria-label="user profile">
-                            <img alt="user avatar image" mat-card-avatar class="my-mat-card-avatar" [src]="getPrincipalAvatar() ?? getDefaultAvatar()" (error)="this.applyFallbackAvatar($event)">
+                        <button (click)="openProfile()" [matTooltip]="userName" style="border: none; background-color: transparent;">
+                            <img alt="{{'ALT-TEXT.USER-OPTIONS' | translate}}" mat-card-avatar class="my-mat-card-avatar" [src]="getPrincipalAvatar() ?? getDefaultAvatar()" (error)="this.applyFallbackAvatar($event)">
                         </button>
                     }@else {
                         <ng-container *ngTemplateOutlet="loginOptionTemplate"/>
@@ -78,17 +78,17 @@
                 <ul class="list m-2">       
                     <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()" aria-label="faq">{{ 'FAQ.TITLE' | translate }}</button>
-                        <button mat-button [matMenuTriggerFor]="languageMenu" class="lang" aria-label="language select" (click)="$event.stopPropagation();">
-                            <mat-icon>language</mat-icon><span class="text-uppercase" style="font-weight: 500;">{{selectedLanguage}}</span>
-                            <mat-icon iconPositionEnd aria-hidden>arrow_drop_down</mat-icon>
+                        <button mat-button [matMenuTriggerFor]="languageMenu" class="lang" [attr.aria-label]="'ALT-TEXT.LANGUAGE-SELECT' | translate" (click)="$event.stopPropagation();">
+                            <mat-icon aria-hidden>language</mat-icon><span class="text-uppercase" style="font-weight: 500;">{{selectedLanguage}}</span>
+                            <mat-icon iconPositionEnd aria-hidden aria-hidden>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" aria-label="tenants">
-                                <mat-icon class="m-0 material-symbols-outlined">tenancy</mat-icon>
-                                <mat-icon class="m-0">arrow_drop_down</mat-icon>
+                            <button mat-button [matMenuTriggerFor]="tenantMenu" class="p-0" [attr.aria-label]="'ALT-TEXT.TENANT-SELECT' | translate">
+                                <mat-icon class="m-0 material-symbols-outlined" aria-hidden>tenancy</mat-icon>
+                                <mat-icon class="m-0" aria-hidden>arrow_drop_down</mat-icon>
                             </button>
                             <mat-menu #tenantMenu="matMenu" class="nav-mat-menu">
                                 <app-tenant-switch></app-tenant-switch>
diff --git a/frontend/src/app/ui/plan/listing/filtering/plan-filter.component.html b/frontend/src/app/ui/plan/listing/filtering/plan-filter.component.html
index aba249b0a..27e1fcbfa 100644
--- a/frontend/src/app/ui/plan/listing/filtering/plan-filter.component.html
+++ b/frontend/src/app/ui/plan/listing/filtering/plan-filter.component.html
@@ -9,7 +9,7 @@
 			<!-- Visibility Filter-->
 			<div *ngIf="!isPublic" class="col-10">
 				<h6 class="category-title">{{ 'PLAN-LISTING.FILTERS.STATUS.NAME' | translate }}</h6>
-				<mat-radio-group aria-label="Select an option" [formControl]="formGroup.get('status')" class="row">
+				<mat-radio-group aria-label="{{'ALT-TEXT.SELECT-OPTION' | translate}}" [formControl]="formGroup.get('status')" class="row">
 					<mat-radio-button [value]="null" [checked]="formGroup.get('status')?.value == null" class="col-12">{{ 'PLAN-LISTING.FILTERS.STATUS.TYPE.ANY' | translate }}</mat-radio-button>
 					<mat-radio-button [value]="status.Draft" class="col-12">{{ 'PLAN-LISTING.FILTERS.STATUS.TYPE.DRAFT' | translate }}</mat-radio-button>
 					<mat-radio-button [value]="status.Finalized" class="col-12">{{ 'PLAN-LISTING.FILTERS.STATUS.TYPE.FINALIZED' | translate }}</mat-radio-button>
@@ -51,7 +51,7 @@
 			<!-- Role Filter -->
 			<div *ngIf="isAuthenticated()" class="col-10">
 				<h6 class="category-title">{{ 'PLAN-LISTING.FILTERS.ROLE.NAME' | translate }}</h6>
-				<mat-radio-group aria-label="Select an option" [formControl]="formGroup.get('role')" class="row">
+				<mat-radio-group aria-label="{{'ALT-TEXT.SELECT-OPTION' | translate}}" [formControl]="formGroup.get('role')" class="row">
 					<mat-radio-button [value]="null" [checked]="formGroup.get('role')?.value == null" class="col-12">{{ 'PLAN-LISTING.FILTERS.ROLE.TYPE.ANY' | translate }}</mat-radio-button>
 					<mat-radio-button [value]="role.Owner" class="col-12">{{ 'PLAN-LISTING.FILTERS.ROLE.TYPE.OWNER' | translate }}</mat-radio-button>
 					<mat-radio-button [value]="role.Viewer" class="col-12">{{ 'PLAN-LISTING.FILTERS.ROLE.TYPE.VIEWER' | translate }}</mat-radio-button>
diff --git a/frontend/src/app/ui/plan/plan-user-field/plan-user-field.component.html b/frontend/src/app/ui/plan/plan-user-field/plan-user-field.component.html
index 19312ffb6..d77b9c90b 100644
--- a/frontend/src/app/ui/plan/plan-user-field/plan-user-field.component.html
+++ b/frontend/src/app/ui/plan/plan-user-field/plan-user-field.component.html
@@ -35,7 +35,7 @@
 		<mat-icon *ngIf="isUserSelected(userIndex)" [ngClass]="{'drag-handle-disabled': viewOnly}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
 	</div>
 	<div class="col-12 col-xl-auto">
-		<mat-button-toggle-group name="fontStyle" aria-label="Font Style" [formControl]="user.get('userType')" (change)="userTypeChange($event, userIndex)" class="w-100">
+		<mat-button-toggle-group name="fontStyle" aria-label="{{'ALT-TEXT.INTERNAL-EXTERNAL-USER' | translate}}" [formControl]="user.get('userType')" (change)="userTypeChange($event, userIndex)" class="w-100">
 			<div *ngFor="let userType of planUserTypeEnumValues" class="col p-0">
 				<mat-button-toggle class="lang-button w-100" [value]="userType">{{enumUtils.toPlanUserTypeString(userType)}}</mat-button-toggle>
 			</div>
diff --git a/frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html b/frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html
index b53951edd..196d4a984 100644
--- a/frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html
+++ b/frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html
@@ -2,10 +2,8 @@
     @for(footerItems of nestedFooterItems; track footerItems){
         <ul class="row horizontal-list">
             @for(item of footerItems; track item; let index=$index){
-                <li class="col-auto option" [ngClass]="{'option-active': this.router.url === item.routerPath, 'ml-3': index%2==1}" tabindex="0">
-                    <span  [routerLink]="routerUtils.generateUrl(item.routerPath)">
-                        {{ item.title | translate}}
-                    </span>
+                <li class="col-auto option" [routerLink]="routerUtils.generateUrl(item.routerPath)" [ngClass]="{'option-active': this.router.url === item.routerPath, 'ml-3': index%2==1}" tabindex="0">
+                    {{ item.title | translate}}
                 </li>
             }
         </ul>
diff --git a/frontend/src/app/ui/sidebar/sidebar.component.css b/frontend/src/app/ui/sidebar/sidebar.component.css
deleted file mode 100644
index 9ad3cb83e..000000000
--- a/frontend/src/app/ui/sidebar/sidebar.component.css
+++ /dev/null
@@ -1,81 +0,0 @@
-.logo-img {
-	width: 60px;
-	display: block;
-	max-height: none;
-	margin-left: 50px;
-}
-
-.logo-img img {
-	width: 155px;
-	top: 0px;
-	position: inherit;
-}
-
-.sidebarSubtitle p {
-	margin-left: 20px;
-	color: rgb(166, 166, 166);
-}
-
-.nav hr {
-	border-top: 1px solid #fff;
-    border-bottom: 1px solid #E1E1E1;
-}
-
-.sidebar-footer {
-	margin-top: auto;
-}
-
-.sidebar-nav {
-	background: white;
-    height: 70px;
-}
-
-.nav-row {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	width: 100%;
-	padding: 0.5rem 0.8rem 0.5rem 1.2rem;
-	text-align: left;
-    letter-spacing: 0px;
-    color: #000000;
-    opacity: 1;
-	font-size: 0.93rem;
-}
-
-.nav-subrow {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	width: 100%;
-	text-align: left;
-	letter-spacing: 0px;
-	color: #000000;
-	opacity: 1;
-	font-size: 0.93rem;
-}
-
-.nav-row:hover {
-	background-color: #ececec;
-	border-radius: 6px;
-}
-
-.icon {
-	width: 24px;
-	height: 24px;
-	vertical-align: middle;
-	color: #6B6B6B;
-}
-
-.nav-row span {
-	padding-left: 1.5rem;
-}
-
-.mat-list {
-	padding-top: 0px !important;
-	display: flex !important;
-}
-
-.mat-list div {
-	width: 100%;
-}
diff --git a/frontend/src/app/ui/sidebar/sidebar.component.scss b/frontend/src/app/ui/sidebar/sidebar.component.scss
index 1ec8cb760..587fe77f7 100644
--- a/frontend/src/app/ui/sidebar/sidebar.component.scss
+++ b/frontend/src/app/ui/sidebar/sidebar.component.scss
@@ -1,5 +1,88 @@
 $mat-card-header-size: 30px !default;
 
+.logo-img {
+	width: 60px;
+	display: block;
+	max-height: none;
+	margin-left: 50px;
+}
+
+.logo-img img {
+	width: 155px;
+	top: 0px;
+	position: inherit;
+}
+
+.sidebarSubtitle p {
+	margin-left: 20px;
+	color: rgb(166, 166, 166);
+}
+
+.nav hr {
+	border-top: 1px solid #fff;
+    border-bottom: 1px solid #E1E1E1;
+}
+
+.sidebar-footer {
+	margin-top: auto;
+}
+
+.sidebar-nav {
+	background: white;
+    height: 70px;
+}
+
+.nav-row {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	width: 100%;
+	padding: 0.5rem 0.8rem 0.5rem 1.2rem;
+	text-align: left;
+    letter-spacing: 0px;
+    color: #000000;
+    opacity: 1;
+	font-size: 0.93rem;
+}
+
+.nav-subrow {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	width: 100%;
+	text-align: left;
+	letter-spacing: 0px;
+	color: #000000;
+	opacity: 1;
+	font-size: 0.93rem;
+}
+
+.nav-row:hover, .nav-row:focus {
+	background-color: #ececec;
+	border-radius: 6px;
+}
+
+.icon {
+	width: 24px;
+	height: 24px;
+	vertical-align: middle;
+	color: #6B6B6B;
+}
+
+.nav-row span {
+	padding-left: 1.5rem;
+}
+
+.mat-list {
+	padding-top: 0px !important;
+	display: flex !important;
+}
+
+.mat-list div {
+	width: 100%;
+}
+
+
 .my-mat-card-avatar {
   height: $mat-card-header-size;
   width: $mat-card-header-size;
diff --git a/frontend/src/app/ui/sidebar/sidebar.component.ts b/frontend/src/app/ui/sidebar/sidebar.component.ts
index 00ce2f854..090f9905e 100644
--- a/frontend/src/app/ui/sidebar/sidebar.component.ts
+++ b/frontend/src/app/ui/sidebar/sidebar.component.ts
@@ -32,7 +32,7 @@ class GroupMenuItem {
 @Component({
 	selector: 'app-sidebar',
 	templateUrl: './sidebar.component.html',
-	styleUrls: ['./sidebar.component.css', './sidebar.component.scss']
+	styleUrls: ['./sidebar.component.scss']
 })
 export class SidebarComponent implements OnInit {
 	generalItems: GroupMenuItem;
diff --git a/frontend/src/app/ui/user-profile/user-profile.component.html b/frontend/src/app/ui/user-profile/user-profile.component.html
index 568cac394..f33ce7d00 100644
--- a/frontend/src/app/ui/user-profile/user-profile.component.html
+++ b/frontend/src/app/ui/user-profile/user-profile.component.html
@@ -30,7 +30,7 @@
 				<div class="col">
 					<div class="row mb-4">
 						<div class="col-auto">
-							<img mat-card-avatar class="avatar" [src]="userProfile.avatarUrl" (error)="applyFallbackAvatar($event)" alt="user avatar">
+							<img mat-card-avatar class="avatar" [src]="userProfile.avatarUrl" (error)="applyFallbackAvatar($event)" alt="{{''ALT-TEXT.USER-AVATAR' | translate}}">
 						</div>
 						<div class="col-auto d-flex flex-column justify-content-center main-info">
 							<div class="name">{{formGroup.get('name').value}}</div>
diff --git a/frontend/src/assets/i18n/baq.json b/frontend/src/assets/i18n/baq.json
index f40a50b6f..2255c4d03 100644
--- a/frontend/src/assets/i18n/baq.json
+++ b/frontend/src/assets/i18n/baq.json
@@ -2575,5 +2575,18 @@
     },
 	"copy": "Copy",
 	"clone": "Clone",
-	"new-version": "New Version"
+	"new-version": "New Version",
+    "ALT-TEXT": {
+        "HAMBURGER": "hide or show navigation sidebar",
+        "GO-TO-MAIN": "Go to home page",
+        "DASHBOARD-POPUP-IMAGE": "colorful art of a person working on an oversized computer",
+        "USER-OPTIONS": "Open user options",
+        "NEW-RELEASES": "New releases",
+        "LANGUAGE-SELECT": "Select Language",
+        "TENANT-SELECT": "Select Tenant",
+        "NOTIFICATIONS": "Notifications",
+        "USER-AVATAR": "User avatar",
+        "SELECT-OPTION": "Select an option",
+        "INTERNAL-EXTERNAL-USER": "Select internal or external user"
+    }
 }
diff --git a/frontend/src/assets/i18n/de.json b/frontend/src/assets/i18n/de.json
index 8f1cf72b8..a5b536dd9 100644
--- a/frontend/src/assets/i18n/de.json
+++ b/frontend/src/assets/i18n/de.json
@@ -2575,5 +2575,18 @@
     },
 	"copy": "Copy",
 	"clone": "Clone",
-	"new-version": "New Version"
+	"new-version": "New Version",
+    "ALT-TEXT": {
+        "HAMBURGER": "hide or show navigation sidebar",
+        "GO-TO-MAIN": "Go to home page",
+        "DASHBOARD-POPUP-IMAGE": "colorful art of a person working on an oversized computer",
+        "USER-OPTIONS": "Open user options",
+        "NEW-RELEASES": "New releases",
+        "LANGUAGE-SELECT": "Select Language",
+        "TENANT-SELECT": "Select Tenant",
+        "NOTIFICATIONS": "Notifications",
+        "USER-AVATAR": "User avatar",
+        "SELECT-OPTION": "Select an option",
+        "INTERNAL-EXTERNAL-USER": "Select internal or external user"
+    }
 }
diff --git a/frontend/src/assets/i18n/en.json b/frontend/src/assets/i18n/en.json
index dd608557e..e360956fe 100644
--- a/frontend/src/assets/i18n/en.json
+++ b/frontend/src/assets/i18n/en.json
@@ -2575,5 +2575,19 @@
     },
 	"copy": "Copy",
 	"clone": "Clone",
-	"new-version": "New Version"
+	"new-version": "New Version",
+
+    "ALT-TEXT": {
+        "HAMBURGER": "hide or show navigation sidebar",
+        "GO-TO-MAIN": "Go to home page",
+        "DASHBOARD-POPUP-IMAGE": "colorful art of a person working on an oversized computer",
+        "USER-OPTIONS": "Open user options",
+        "NEW-RELEASES": "New releases",
+        "LANGUAGE-SELECT": "Select Language",
+        "TENANT-SELECT": "Select Tenant",
+        "NOTIFICATIONS": "Notifications",
+        "USER-AVATAR": "User avatar",
+        "SELECT-OPTION": "Select an option",
+        "INTERNAL-EXTERNAL-USER": "Select internal or external user"
+    }
 }
diff --git a/frontend/src/assets/i18n/es.json b/frontend/src/assets/i18n/es.json
index 8978fa0ff..811e1f612 100644
--- a/frontend/src/assets/i18n/es.json
+++ b/frontend/src/assets/i18n/es.json
@@ -2575,5 +2575,18 @@
     },
 	"copy": "Copy",
 	"clone": "Clone",
-	"new-version": "New Version"
+	"new-version": "New Version",
+    "ALT-TEXT": {
+        "HAMBURGER": "hide or show navigation sidebar",
+        "GO-TO-MAIN": "Go to home page",
+        "DASHBOARD-POPUP-IMAGE": "colorful art of a person working on an oversized computer",
+        "USER-OPTIONS": "Open user options",
+        "NEW-RELEASES": "New releases",
+        "LANGUAGE-SELECT": "Select Language",
+        "TENANT-SELECT": "Select Tenant",
+        "NOTIFICATIONS": "Notifications",
+        "USER-AVATAR": "User avatar",
+        "SELECT-OPTION": "Select an option",
+        "INTERNAL-EXTERNAL-USER": "Select internal or external user"
+    }
 }
diff --git a/frontend/src/assets/i18n/gr.json b/frontend/src/assets/i18n/gr.json
index d23200987..511e483b5 100644
--- a/frontend/src/assets/i18n/gr.json
+++ b/frontend/src/assets/i18n/gr.json
@@ -2575,5 +2575,18 @@
     },
 	"copy": "Copy",
 	"clone": "Clone",
-	"new-version": "New Version"
+	"new-version": "New Version",
+    "ALT-TEXT": {
+        "HAMBURGER": "hide or show navigation sidebar",
+        "GO-TO-MAIN": "Go to home page",
+        "DASHBOARD-POPUP-IMAGE": "colorful art of a person working on an oversized computer",
+        "USER-OPTIONS": "Open user options",
+        "NEW-RELEASES": "New releases",
+        "LANGUAGE-SELECT": "Select Language",
+        "TENANT-SELECT": "Select Tenant",
+        "NOTIFICATIONS": "Notifications",
+        "USER-AVATAR": "User avatar",
+        "SELECT-OPTION": "Select an option",
+        "INTERNAL-EXTERNAL-USER": "Select internal or external user"
+    }
 }
diff --git a/frontend/src/assets/i18n/hr.json b/frontend/src/assets/i18n/hr.json
index ac015ac4b..13cbb402c 100644
--- a/frontend/src/assets/i18n/hr.json
+++ b/frontend/src/assets/i18n/hr.json
@@ -2575,5 +2575,18 @@
     },
 	"copy": "Copy",
 	"clone": "Clone",
-	"new-version": "New Version"
+	"new-version": "New Version",
+    "ALT-TEXT": {
+        "HAMBURGER": "hide or show navigation sidebar",
+        "GO-TO-MAIN": "Go to home page",
+        "DASHBOARD-POPUP-IMAGE": "colorful art of a person working on an oversized computer",
+        "USER-OPTIONS": "Open user options",
+        "NEW-RELEASES": "New releases",
+        "LANGUAGE-SELECT": "Select Language",
+        "TENANT-SELECT": "Select Tenant",
+        "NOTIFICATIONS": "Notifications",
+        "USER-AVATAR": "User avatar",
+        "SELECT-OPTION": "Select an option",
+        "INTERNAL-EXTERNAL-USER": "Select internal or external user"
+    }
 }
diff --git a/frontend/src/assets/i18n/pl.json b/frontend/src/assets/i18n/pl.json
index a88aab1be..b7f1efdd9 100644
--- a/frontend/src/assets/i18n/pl.json
+++ b/frontend/src/assets/i18n/pl.json
@@ -2575,5 +2575,18 @@
     },
 	"copy": "Copy",
 	"clone": "Clone",
-	"new-version": "New Version"
+	"new-version": "New Version",
+    "ALT-TEXT": {
+        "HAMBURGER": "hide or show navigation sidebar",
+        "GO-TO-MAIN": "Go to home page",
+        "DASHBOARD-POPUP-IMAGE": "colorful art of a person working on an oversized computer",
+        "USER-OPTIONS": "Open user options",
+        "NEW-RELEASES": "New releases",
+        "LANGUAGE-SELECT": "Select Language",
+        "TENANT-SELECT": "Select Tenant",
+        "NOTIFICATIONS": "Notifications",
+        "USER-AVATAR": "User avatar",
+        "SELECT-OPTION": "Select an option",
+        "INTERNAL-EXTERNAL-USER": "Select internal or external user"
+    }
 }
diff --git a/frontend/src/assets/i18n/pt.json b/frontend/src/assets/i18n/pt.json
index ef7d8eaf7..3bad6e3c0 100644
--- a/frontend/src/assets/i18n/pt.json
+++ b/frontend/src/assets/i18n/pt.json
@@ -2575,5 +2575,18 @@
     },
 	"copy": "Copy",
 	"clone": "Clone",
-	"new-version": "New Version"
+	"new-version": "New Version",
+    "ALT-TEXT": {
+        "HAMBURGER": "hide or show navigation sidebar",
+        "GO-TO-MAIN": "Go to home page",
+        "DASHBOARD-POPUP-IMAGE": "colorful art of a person working on an oversized computer",
+        "USER-OPTIONS": "Open user options",
+        "NEW-RELEASES": "New releases",
+        "LANGUAGE-SELECT": "Select Language",
+        "TENANT-SELECT": "Select Tenant",
+        "NOTIFICATIONS": "Notifications",
+        "USER-AVATAR": "User avatar",
+        "SELECT-OPTION": "Select an option",
+        "INTERNAL-EXTERNAL-USER": "Select internal or external user"
+    }
 }
diff --git a/frontend/src/assets/i18n/sk.json b/frontend/src/assets/i18n/sk.json
index e454ece8a..80bc5ef54 100644
--- a/frontend/src/assets/i18n/sk.json
+++ b/frontend/src/assets/i18n/sk.json
@@ -2575,5 +2575,18 @@
     },
 	"copy": "Copy",
 	"clone": "Clone",
-	"new-version": "New Version"
+	"new-version": "New Version",
+    "ALT-TEXT": {
+        "HAMBURGER": "hide or show navigation sidebar",
+        "GO-TO-MAIN": "Go to home page",
+        "DASHBOARD-POPUP-IMAGE": "colorful art of a person working on an oversized computer",
+        "USER-OPTIONS": "Open user options",
+        "NEW-RELEASES": "New releases",
+        "LANGUAGE-SELECT": "Select Language",
+        "TENANT-SELECT": "Select Tenant",
+        "NOTIFICATIONS": "Notifications",
+        "USER-AVATAR": "User avatar",
+        "SELECT-OPTION": "Select an option",
+        "INTERNAL-EXTERNAL-USER": "Select internal or external user"
+    }
 }
diff --git a/frontend/src/assets/i18n/sr.json b/frontend/src/assets/i18n/sr.json
index d55dcf2e2..a3839e627 100644
--- a/frontend/src/assets/i18n/sr.json
+++ b/frontend/src/assets/i18n/sr.json
@@ -2575,5 +2575,18 @@
     },
 	"copy": "Copy",
 	"clone": "Clone",
-	"new-version": "New Version"
+	"new-version": "New Version",
+    "ALT-TEXT": {
+        "HAMBURGER": "hide or show navigation sidebar",
+        "GO-TO-MAIN": "Go to home page",
+        "DASHBOARD-POPUP-IMAGE": "colorful art of a person working on an oversized computer",
+        "USER-OPTIONS": "Open user options",
+        "NEW-RELEASES": "New releases",
+        "LANGUAGE-SELECT": "Select Language",
+        "TENANT-SELECT": "Select Tenant",
+        "NOTIFICATIONS": "Notifications",
+        "USER-AVATAR": "User avatar",
+        "SELECT-OPTION": "Select an option",
+        "INTERNAL-EXTERNAL-USER": "Select internal or external user"
+    }
 }
diff --git a/frontend/src/assets/i18n/tr.json b/frontend/src/assets/i18n/tr.json
index 5a4a75dd4..89c54f67e 100644
--- a/frontend/src/assets/i18n/tr.json
+++ b/frontend/src/assets/i18n/tr.json
@@ -2575,5 +2575,18 @@
     },
 	"copy": "Copy",
 	"clone": "Clone",
-	"new-version": "New Version"
+	"new-version": "New Version",
+    "ALT-TEXT": {
+        "HAMBURGER": "hide or show navigation sidebar",
+        "GO-TO-MAIN": "Go to home page",
+        "DASHBOARD-POPUP-IMAGE": "colorful art of a person working on an oversized computer",
+        "USER-OPTIONS": "Open user options",
+        "NEW-RELEASES": "New releases",
+        "LANGUAGE-SELECT": "Select Language",
+        "TENANT-SELECT": "Select Tenant",
+        "NOTIFICATIONS": "Notifications",
+        "USER-AVATAR": "User avatar",
+        "SELECT-OPTION": "Select an option",
+        "INTERNAL-EXTERNAL-USER": "Select internal or external user"
+    }
 }