From 23e8d64ace4f75e51b7f45a1e4b46d8df821b937 Mon Sep 17 00:00:00 2001
From: mchouliara <mchouliara@cite.gr>
Date: Tue, 24 Sep 2024 12:14:47 +0300
Subject: [PATCH] description overview refactor for accessibility, remove
 unused style

---
 .../app/ui/dashboard/dashboard.component.scss | 13 ----------
 .../description-listing-item.component.scss   |  2 +-
 .../description-overview.component.html       | 24 +++++++++----------
 .../description-overview.component.scss       | 10 ++++----
 .../overview/plan-overview.component.scss     |  2 +-
 .../plan-authors/plan-authors.component.html  |  2 +-
 6 files changed, 20 insertions(+), 33 deletions(-)

diff --git a/frontend/src/app/ui/dashboard/dashboard.component.scss b/frontend/src/app/ui/dashboard/dashboard.component.scss
index bdd964c05..5d4d719d1 100644
--- a/frontend/src/app/ui/dashboard/dashboard.component.scss
+++ b/frontend/src/app/ui/dashboard/dashboard.component.scss
@@ -183,19 +183,6 @@ input[type="text"] {
 	line-height: 2.4;
 }
 
-.description-label {
-	width: auto;
-	height: 37px;
-	background: var(--secondary-color) 0% 0% no-repeat padding-box;
-	border-radius: 4px 0px;
-	text-align: left;
-	line-height: 2.8;
-	font-size: 0.875rem;
-	letter-spacing: 0px;
-	color: var(--dark-gray);
-	font-weight: 400;
-}
-
 .icon-align {
 	display: inline-flex;
 	vertical-align: middle;
diff --git a/frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.scss b/frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.scss
index 4b08087eb..050b9f4d0 100644
--- a/frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.scss
+++ b/frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.scss
@@ -130,7 +130,7 @@ input[type="text"] {
 	font-size: 0.875rem;
 	font-weight: 400;
 	letter-spacing: 0px;
-	color: var(--dark-gray);
+	color: var(--secondary-text);
 }
 
 .plan-title,
diff --git a/frontend/src/app/ui/description/overview/description-overview.component.html b/frontend/src/app/ui/description/overview/description-overview.component.html
index 211c6e34f..c98d6308b 100644
--- a/frontend/src/app/ui/description/overview/description-overview.component.html
+++ b/frontend/src/app/ui/description/overview/description-overview.component.html
@@ -47,24 +47,24 @@
 					<div class="row mb-4 pb-3">
                         <div class="col-auto pr-0">
                             @if(isActive && (canEdit || canAnnotate) && isDraftDescription(description) && !isLocked){
-                                <button (click)="editClicked(description)" mat-mini-fab class="mr-3 actions-btn" matTooltip="{{'DESCRIPTION-OVERVIEW.ACTIONS.EDIT' | translate}}" matTooltipPosition="above">
+                                <button (click)="editClicked(description)" mat-mini-fab class="mr-3 actions-btn" matTooltip="{{'DESCRIPTION-OVERVIEW.ACTIONS.EDIT' | translate}}" matTooltipPosition="above" [attr.aria-label]="'DESCRIPTION-OVERVIEW.ACTIONS.EDIT' | translate">
                                     <mat-icon class="mat-mini-fab-icon">create</mat-icon>
                                 </button>
                             }@else {
                                 @if(!isPublicView){
-                                    <button (click)="editClicked(description)" mat-mini-fab class="mr-3 actions-btn" matTooltip="{{'DESCRIPTION-OVERVIEW.ACTIONS.PREVIEW' | translate}}" matTooltipPosition="above">
+                                    <button (click)="editClicked(description)" mat-mini-fab class="mr-3 actions-btn" matTooltip="{{'DESCRIPTION-OVERVIEW.ACTIONS.PREVIEW' | translate}}" matTooltipPosition="above" [attr.aria-label]="'DESCRIPTION-OVERVIEW.ACTIONS.PREVIEW' | translate">
                                         <mat-icon class="mat-mini-fab-icon">visibility</mat-icon>
                                     </button>
                                 }
                             }
                         </div>
 						<div *ngIf="canCopy" class="col-auto pr-0">
-							<button (click)="openCopyToPlanDialog()" mat-mini-fab class="mr-3 actions-btn" matTooltip="{{'DESCRIPTION-OVERVIEW.ACTIONS.CLONE' | translate}}" matTooltipPosition="above">
+							<button (click)="openCopyToPlanDialog()" mat-mini-fab class="mr-3 actions-btn" matTooltip="{{'DESCRIPTION-OVERVIEW.ACTIONS.CLONE' | translate}}" matTooltipPosition="above" [attr.aria-label]="'DESCRIPTION-OVERVIEW.ACTIONS.CLONE' | translate">
 								<mat-icon class="mat-mini-fab-icon">content_copy</mat-icon>
 							</button>
 						</div>
 						<div *ngIf="canDelete && !isLocked" class="col-auto pr-0">
-							<button (click)="deleteClicked()" mat-mini-fab class="mr-3 actions-btn" matTooltip="{{'DESCRIPTION-OVERVIEW.ACTIONS.DELETE' | translate}}" matTooltipPosition="above">
+							<button (click)="deleteClicked()" mat-mini-fab class="mr-3 actions-btn" matTooltip="{{'DESCRIPTION-OVERVIEW.ACTIONS.DELETE' | translate}}" matTooltipPosition="above" [attr.aria-label]="'DESCRIPTION-OVERVIEW.ACTIONS.DELETE' | translate">
 								<mat-icon class="mat-mini-fab-icon">delete</mat-icon>
 							</button>
 						</div>
@@ -78,7 +78,7 @@
 								<div class="plan-btn-label">
 									{{ this.description.plan.label }}
 								</div>
-								<div class="w-auto">
+								<div class="w-auto" aria-hidden>
 									<mat-icon>launch</mat-icon>
 								</div>
 							</button>
@@ -137,7 +137,7 @@
 									<ng-container *ngIf="canFinalize && isDraftDescription(description) && !isLocked">
 										<div class="row align-items-center" (click)="finalize(description)">
 											<div class="col-auto pr-0">
-												<button mat-mini-fab class="finalize-btn">
+												<button mat-mini-fab class="finalize-btn" [attr.aria-label]="'DESCRIPTION-OVERVIEW.ACTIONS.FINALIZE' | translate">
 													<mat-icon class="mat-mini-fab-icon check-icon">check</mat-icon>
 												</button>
 											</div>
@@ -154,7 +154,7 @@
 									<ng-container *ngIf="hasReversableStatus(description)">
 										<div class="row mb-3 align-items-center" (click)="reverseFinalization(description)">
 											<div class="col-auto pr-0">
-												<button mat-mini-fab class="frame-btn">
+												<button mat-mini-fab class="frame-btn" [attr.aria-label]="'DESCRIPTION-OVERVIEW.ACTIONS.REVERSE' | translate">
 													<mat-icon class="mat-mini-fab-icon">unarchive</mat-icon>
 												</button>
 											</div>
@@ -166,18 +166,18 @@
 									<ng-container *ngIf="fileTransformerService.availableFormatsFor(fileTransformerEntityTypeEnum.Description).length > 0">
 										<div class="row mb-3 align-items-center">
 											<div class="col-auto pr-0">
-												<button mat-mini-fab class="frame-btn" [matMenuTriggerFor]="exportMenu">
+												<button mat-mini-fab class="frame-btn" [matMenuTriggerFor]="exportMenu" [attr.aria-label]="'DESCRIPTION-OVERVIEW.ACTIONS.EXPORT' | translate">
 													<mat-icon class="mat-mini-fab-icon">open_in_new</mat-icon>
 												</button>
 											</div>
-											<div class="col-auto pl-0">
-												<p class="mb-0 mr-0 pl-2 frame-txt" [matMenuTriggerFor]="exportMenu">{{ 'DESCRIPTION-OVERVIEW.ACTIONS.EXPORT' | translate }}</p>
+											<div role="button" class="col-auto pl-0" [matMenuTriggerFor]="exportMenu">
+												<p class="mb-0 mr-0 pl-2 frame-txt">{{ 'DESCRIPTION-OVERVIEW.ACTIONS.EXPORT' | translate }}</p>
 											</div>
 										</div>
 									</ng-container>
 									<mat-menu #exportMenu="matMenu" xPosition="before">
 											<button mat-menu-item *ngFor='let fileTransformer of fileTransformerService.availableFormatsFor(fileTransformerEntityTypeEnum.Description)' (click)="fileTransformerService.exportDescription(description.id, fileTransformer.repositoryId, fileTransformer.format, isPublicView)">
-													<i class="fa pr-2" [ngClass]="fileTransformer.icon ? fileTransformer.icon : 'fa-file-o'"></i>
+													<i class="fa pr-2" [ngClass]="fileTransformer.icon ? fileTransformer.icon : 'fa-file-o'" aria-hidden></i>
 													<span>{{'GENERAL.FILE-TRANSFORMER.' + fileTransformer.format.toUpperCase() | translate}}</span>
 											</button>
 									</mat-menu>
@@ -199,7 +199,7 @@
                                 />
 								<div *ngIf="canInvitePlanUsers" class="col-12 d-flex justify-content-center mt-2">
 									<button mat-raised-button class="invite-btn" (click)="openShareDialog()">
-										<mat-icon>group_add</mat-icon>
+										<mat-icon aria-hidden>group_add</mat-icon>
 										{{'DESCRIPTION-OVERVIEW.ACTIONS.INVITE-SHORT' | translate}}
 									</button>
 								</div>
diff --git a/frontend/src/app/ui/description/overview/description-overview.component.scss b/frontend/src/app/ui/description/overview/description-overview.component.scss
index 7d95aa895..088d61cd7 100644
--- a/frontend/src/app/ui/description/overview/description-overview.component.scss
+++ b/frontend/src/app/ui/description/overview/description-overview.component.scss
@@ -6,7 +6,7 @@
 // ********ICONS********
 
 .back-icon {
-  opacity: 0.4;
+  opacity: 0.6;
 }
 
 .mat-mini-fab {
@@ -28,7 +28,7 @@
 }
 
 .status-icon {
-  color: #a7a7a7;
+  color: var(--gray);
 }
 
 .check-icon {
@@ -139,7 +139,7 @@
 
 .label-txt,
 .label2-txt {
-  color: var(--gray);
+  color: #4b4a4a;
   font-weight: 400;
 }
 
@@ -167,13 +167,13 @@
 .description-label,
 .header {
   font-size: 1.25em;
-  color: var(--dark-gray);
+  color: #000000;
 }
 
 .desc-txt {
   width: 48.25em;
   font-size: 1em;
-  color: var(--dark-gray);
+  color: #4b4a4a;
   margin-bottom: 1.875em;
 }
 
diff --git a/frontend/src/app/ui/plan/overview/plan-overview.component.scss b/frontend/src/app/ui/plan/overview/plan-overview.component.scss
index 90357088b..3153badbf 100644
--- a/frontend/src/app/ui/plan/overview/plan-overview.component.scss
+++ b/frontend/src/app/ui/plan/overview/plan-overview.component.scss
@@ -8,7 +8,7 @@
 // ********ICONS********
 
 .back-icon {
-	opacity: 0.4;
+	opacity: 0.6;
 }
 
 .mat-mdc-mini-fab {
diff --git a/frontend/src/app/ui/plan/plan-authors/plan-authors.component.html b/frontend/src/app/ui/plan/plan-authors/plan-authors.component.html
index fa1ef6b0b..b0a9d7533 100644
--- a/frontend/src/app/ui/plan/plan-authors/plan-authors.component.html
+++ b/frontend/src/app/ui/plan/plan-authors/plan-authors.component.html
@@ -19,7 +19,7 @@
             </div>
         </div>
         @if(removeUser() && planUser.role != planUserRoleEnum.Owner){
-            <button (click)="removeUserFromPlan(planUser)" mat-mini-fab class="secondary ml-auto" matTooltip="{{ 'PLAN-OVERVIEW.ACTIONS.REMOVE-AUTHOR' | translate}}" matTooltipPosition="above">
+            <button (click)="removeUserFromPlan(planUser)" mat-mini-fab class="secondary ml-auto" matTooltip="{{ 'PLAN-OVERVIEW.ACTIONS.REMOVE-AUTHOR' | translate}}" matTooltipPosition="above" [attr.aria-label]="'PLAN-OVERVIEW.ACTIONS.REMOVE-AUTHOR' | translate">
                 <mat-icon>delete</mat-icon>
             </button>
         }