From 3f30e4102bcccb6a598e0eebd7ae31c72d6e40dc Mon Sep 17 00:00:00 2001
From: Youssef MAHTAT <youssef.mahtat.as.developer@gmail.com>
Date: Tue, 12 Nov 2024 12:40:59 +0100
Subject: [PATCH] MOSIP-25201 - Fix accessibility and SonarQube reliability
 issues in multiple components

Signed-off-by: Youssef MAHTAT <youssef.mahtat.as.developer@gmail.com>
---
 .../time-selection/time-selection.component.html     |  8 +++++---
 .../dashboard/dashboard/dashboard.component.html     |  6 ++++++
 .../acknowledgement/acknowledgement.component.html   | 12 +++++++++---
 .../feature/summary/preview/preview.component.html   |  6 +++---
 .../src/assets/icons/iconfont/material-icons.css     |  2 +-
 pre-registration-ui/src/styles.css                   |  2 +-
 6 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/pre-registration-ui/src/app/feature/booking/time-selection/time-selection.component.html b/pre-registration-ui/src/app/feature/booking/time-selection/time-selection.component.html
index 79c1d031..131a488c 100644
--- a/pre-registration-ui/src/app/feature/booking/time-selection/time-selection.component.html
+++ b/pre-registration-ui/src/app/feature/booking/time-selection/time-selection.component.html
@@ -190,7 +190,7 @@
             selectedCard !== undefined
           "
         >
-          <table class="time-selection__name-list" aria-describedby="time-selection-name-list">
+          <table class="time-selection__name-list" aria-describedby="time-selection-name-list" role="presentation">
             <tr
               class="time-selection__name-list-item"
               *ngFor="
@@ -202,7 +202,7 @@
             >
               <td>{{ item.fullName }}</td>
               <td>
-                <mat-icon (click)="itemDelete(j)" class="name-delete-button"
+                <mat-icon (click)="itemDelete(j)" role="button" [tabIndex]="j" class="name-delete-button"
                   >close</mat-icon
                 >
               </td>
@@ -216,7 +216,7 @@
           {{ "timeSelection.text_available" | translate }}
         </div>
         <div>
-          <table class="time-selection__name-list" aria-describedby="time-selection-name-list">
+          <table class="time-selection__name-list" aria-describedby="time-selection-name-list" role="presentation">
             <tr
               class="time-selection__name-list-item"
               *ngFor="let item of deletedNames; let k = index"
@@ -225,6 +225,8 @@
               <td>
                 <mat-icon
                   (click)="addItem(k)"
+                  role="button"
+                  [tabindex]="k"
                   [ngClass]="
                     disableAddButton
                       ? 'name-delete-button disable_add'
diff --git a/pre-registration-ui/src/app/feature/dashboard/dashboard/dashboard.component.html b/pre-registration-ui/src/app/feature/dashboard/dashboard/dashboard.component.html
index a7b13755..2cb161cb 100644
--- a/pre-registration-ui/src/app/feature/dashboard/dashboard/dashboard.component.html
+++ b/pre-registration-ui/src/app/feature/dashboard/dashboard/dashboard.component.html
@@ -94,6 +94,12 @@
             <div class="card-content">
               <table>
                 <caption>{{'dashboard.name' | translate}}</caption>
+                <thead>
+                  <tr style="display: none">
+                    <th class="column1">name</th>
+                    <th class="application-value">value</th>
+                  </tr>
+                </thead>
                 <tr>
                   <td class="column1">{{ "dashboard.card.text_name" | translate }}</td>
                   <td
diff --git a/pre-registration-ui/src/app/feature/summary/acknowledgement/acknowledgement.component.html b/pre-registration-ui/src/app/feature/summary/acknowledgement/acknowledgement.component.html
index 5d47affc..b97a1794 100644
--- a/pre-registration-ui/src/app/feature/summary/acknowledgement/acknowledgement.component.html
+++ b/pre-registration-ui/src/app/feature/summary/acknowledgement/acknowledgement.component.html
@@ -16,6 +16,12 @@
         <div class="ack__header-container" [dir]="ackData.appLangCodeDir">
           <table>
             <caption>{{'quick_guide.Acknowledgement.tablename' | translate}}</caption>
+            <thead>
+              <tr style="display: none">
+                <th>label</th>
+                <th>value</th>
+              </tr>
+            </thead>
             <tr>
               <td>{{ ackData.preRegIdLabels}} : </td>
               <td><strong>{{ ackData.preRegId}}</strong></td>
@@ -58,7 +64,7 @@
         </div>
         <div [dir]="ackData.appLangCodeDir">
           <div id="body-container" *ngIf="ackData.regCntrNames" class="ack__body-container">
-            <table id="table-container" aria-describedby="acknowledgement-data">
+            <table id="table-container" aria-describedby="acknowledgement-data" role="presentation">
               <tr *ngIf="ackData.nameValues.trim() != ''">
                 <td>{{ ackData.labelNames }} : </td>
                 <td><strong>{{ ackData.nameValues }}</strong></td>
@@ -73,7 +79,7 @@
         <div id="guidelines-container" class="ack__guidelines-container" [dir]="ackData.appLangCodeDir">
           <span *ngFor="let langCode of ackData.appLangCode">
             <div class="spacer"></div>
-            <table *ngIf="guidelines.length !== 0" class="ack__guidelines" aria-describedby="acknowledgement-guideline">
+            <table *ngIf="guidelines.length !== 0" class="ack__guidelines" aria-describedby="acknowledgement-guideline" role="presentation">
               <tr *ngFor="let guideline of ackData[langCode]">
                 <td class="inner-guideline-content">{{ guideline }}</td>
               </tr>
@@ -112,4 +118,4 @@
       {{ 'acknowledgement.action_print' | translate }}
     </button>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/pre-registration-ui/src/app/feature/summary/preview/preview.component.html b/pre-registration-ui/src/app/feature/summary/preview/preview.component.html
index e84e906a..4fe23951 100644
--- a/pre-registration-ui/src/app/feature/summary/preview/preview.component.html
+++ b/pre-registration-ui/src/app/feature/summary/preview/preview.component.html
@@ -31,7 +31,7 @@
     <mat-card-content [dir]="dataCaptureLangsDir[0]">
       <div class="preview__body-content-container">
         <div class="preview__body-content-div">
-          <table width="100%" aria-describedby="preview-data">
+          <table width="100%" aria-describedby="preview-data" role="presentation">
             <tr *ngFor="let controlId of controlIds" class="row">
               <td width="30%">
                 <span *ngFor="let dataCaptureLanguage of dataCaptureLanguages; let i = index; let first = first; let last = last;">
@@ -75,7 +75,7 @@
     <mat-card-footer class="preview__footer-container">
       <div class="preview__footer">
         <div class="preview__file-container">
-          <table style="width:100%" *ngIf="documentMapObject" aria-describedby="preview-data">
+          <table style="width:100%" *ngIf="documentMapObject" aria-describedby="preview-data" role="presentation">
             <tr class="preview__file__table__header">
               <td *ngFor="let object of documentMapObject">{{ object.name }}</td>
             </tr>
@@ -101,4 +101,4 @@
   <button (click)="navigateNext()" class="user__btn" *ngIf="!appPrefetched">
     {{ previewLabels.action_continue }}
   </button>
-</mat-card>
\ No newline at end of file
+</mat-card>
diff --git a/pre-registration-ui/src/assets/icons/iconfont/material-icons.css b/pre-registration-ui/src/assets/icons/iconfont/material-icons.css
index 2270c09d..c1957631 100644
--- a/pre-registration-ui/src/assets/icons/iconfont/material-icons.css
+++ b/pre-registration-ui/src/assets/icons/iconfont/material-icons.css
@@ -11,7 +11,7 @@
 }
 
 .material-icons {
-  font-family: 'Material Icons';
+  font-family: 'Material Icons', sans-serif;
   font-weight: normal;
   font-style: normal;
   font-size: 24px;  /* Preferred icon size */
diff --git a/pre-registration-ui/src/styles.css b/pre-registration-ui/src/styles.css
index 792a960e..be4d5490 100644
--- a/pre-registration-ui/src/styles.css
+++ b/pre-registration-ui/src/styles.css
@@ -30,7 +30,7 @@ button {
 }
 
 .material-icons {
-  font-family: 'Material Icons';
+  font-family: 'Material Icons', sans-serif;
   font-weight: normal;
   font-style: normal;
   font-size: 24px; /* Preferred icon size */