From b7d06d94bdd99adcb8f16ceb9c6e577194956e63 Mon Sep 17 00:00:00 2001
From: RiteshHMCTS <74713687+RiteshHMCTS@users.noreply.github.com>
Date: Tue, 20 Aug 2024 16:35:47 +0100
Subject: [PATCH] Revert "Ex UI 1270 accessibility bug fixes (#1693)" (#1764)

This reverts commit 20adac85ab7e0987f9ff565ad5748410f445aa11.
---
 RELEASE-NOTES.md                              |  4 -
 package.json                                  |  2 +-
 projects/ccd-case-ui-toolkit/package.json     |  2 +-
 .../case-full-access-view.component.html      | 93 +++++++++----------
 .../palette/base-field/field-read.html        |  2 +-
 .../collection/read-collection-field.html     |  2 +-
 .../complex/read-complex-field-table.html     |  6 +-
 .../multi-select-list/multi-select-list.scss  |  5 -
 ...-multi-select-list-field.component.spec.ts | 11 ++-
 .../read-multi-select-list-field.html         |  5 +-
 .../search-result.component.html              |  4 +-
 11 files changed, 63 insertions(+), 73 deletions(-)

diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md
index c68b120b0c..abae9ed77e 100644
--- a/RELEASE-NOTES.md
+++ b/RELEASE-NOTES.md
@@ -1,9 +1,5 @@
 ## RELEASE NOTES
 
-### Version 7.0.59 
-**EXUI-1270** Accessibility Issue
-**EXUI-1504** Accessibility Issue
-
 ### Version 7.0.58
 **EXUI-2235** add event name in task completion log
 
diff --git a/package.json b/package.json
index 99d9746a06..f447a4ce97 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hmcts/ccd-case-ui-toolkit",
-  "version": "7.0.59",
+  "version": "7.0.58",
   "engines": {
     "node": ">=18.19.0"
   },
diff --git a/projects/ccd-case-ui-toolkit/package.json b/projects/ccd-case-ui-toolkit/package.json
index ce97fb6cee..6d3f8c0fa5 100644
--- a/projects/ccd-case-ui-toolkit/package.json
+++ b/projects/ccd-case-ui-toolkit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hmcts/ccd-case-ui-toolkit",
-  "version": "7.0.59",
+  "version": "7.0.58",
   "engines": {
     "node": ">=18.19.0"
   },
diff --git a/projects/ccd-case-ui-toolkit/src/lib/shared/components/case-viewer/case-full-access-view/case-full-access-view.component.html b/projects/ccd-case-ui-toolkit/src/lib/shared/components/case-viewer/case-full-access-view/case-full-access-view.component.html
index c595ef1f55..22d5dcb4e2 100644
--- a/projects/ccd-case-ui-toolkit/src/lib/shared/components/case-viewer/case-full-access-view/case-full-access-view.component.html
+++ b/projects/ccd-case-ui-toolkit/src/lib/shared/components/case-viewer/case-full-access-view/case-full-access-view.component.html
@@ -1,6 +1,6 @@
 <!-- Generic error heading and error message to be displayed only if there are no specific callback errors or warnings, or no error details -->
 <div *ngIf="error && !(error.callbackErrors || error.callbackWarnings || error.details)" class="error-summary"
-  role="group" aria-labelledby="edit-case-event_error-summary-heading" tabindex="-1">
+     role="group" aria-labelledby="edit-case-event_error-summary-heading" tabindex="-1">
   <h1 class="heading-h1 error-summary-heading" id="edit-case-event_error-summary-heading">
     {{'Something went wrong' | rpxTranslate}}
   </h1>
@@ -14,7 +14,7 @@ <h1 class="heading-h1 error-summary-heading" id="edit-case-event_error-summary-h
 </div>
 <!-- Callback error heading and error message to be displayed if there are specific error details -->
 <div *ngIf="error && error.details" class="error-summary" role="group"
-  aria-labelledby="edit-case-event_error-summary-heading" tabindex="-1">
+     aria-labelledby="edit-case-event_error-summary-heading" tabindex="-1">
   <h2 class="heading-h2 error-summary-heading" id="edit-case-event_error-summary-heading">
     {{'The callback data failed validation' | rpxTranslate}}
   </h2>
@@ -25,28 +25,31 @@ <h2 class="heading-h2 error-summary-heading" id="edit-case-event_error-summary-h
     </li>
   </ul>
 </div>
-<ccd-callback-errors [triggerTextContinue]="triggerTextStart" [triggerTextIgnore]="triggerTextIgnoreWarnings"
-  [callbackErrorsSubject]="callbackErrorsSubject" (callbackErrorsContext)="callbackErrorsNotify($event)">
+<ccd-callback-errors
+  [triggerTextContinue]="triggerTextStart"
+  [triggerTextIgnore]="triggerTextIgnoreWarnings"
+  [callbackErrorsSubject]="callbackErrorsSubject"
+  (callbackErrorsContext)="callbackErrorsNotify($event)">
 </ccd-callback-errors>
 <ccd-activity [caseId]="caseDetails.case_id" [displayMode]="BANNER"></ccd-activity>
 <div class="grid-row">
   <div class="column-one-half">
     <ccd-case-header [caseDetails]="caseDetails"></ccd-case-header>
     <div class="case-viewer-controls" *ngIf="hasPrint && !isDraft() && isPrintEnabled()">
-      <a id="case-viewer-control-print" routerLink="print" class="button button-secondary">{{'Print' |
-        rpxTranslate}}</a>
+      <a id="case-viewer-control-print" routerLink="print" class="button button-secondary">{{'Print' | rpxTranslate}}</a>
     </div>
   </div>
   <div *ngIf="hasEventSelector" class="column-one-half">
     <ccd-event-trigger [isDisabled]="isTriggerButtonDisabled()" [triggers]="caseDetails.triggers"
-      [triggerText]="triggerText" [eventId]="eventId" (onTriggerChange)="clearErrorsAndWarnings()"
-      (onTriggerSubmit)="applyTrigger($event)"></ccd-event-trigger>
+                       [triggerText]="triggerText"
+                       [eventId]="eventId"
+                       (onTriggerChange)="clearErrorsAndWarnings()"
+                       (onTriggerSubmit)="applyTrigger($event)"></ccd-event-trigger>
   </div>
 </div>
 <div class="grid-row" *ngIf="activeCaseFlags && !caseFlagsExternalUser">
   <div class="column-full">
-    <ccd-notification-banner [notificationBannerConfig]="notificationBannerConfig"
-      (linkClicked)="onLinkClicked($event)">
+    <ccd-notification-banner [notificationBannerConfig]="notificationBannerConfig" (linkClicked)="onLinkClicked($event)">
     </ccd-notification-banner>
   </div>
 </div>
@@ -59,41 +62,38 @@ <h2 class="heading-h2 error-summary-heading" id="edit-case-event_error-summary-h
         </mat-tab>
         <mat-tab *ngFor="let tab of sortedTabs; let curIdx=index" [id]="tab.id" [label]="tab.label | rpxTranslate">
           <ng-template matTabContent>
-            <div class="hide-table-capion" id="table_caption">{{tab.label | rpxTranslate}}</div>
-            <table [class]="tab.id" aria-labelledby="table_caption">
+            <table [class]="tab.id" [attr.aria-label]="'case viewer table' | rpxTranslate">
               <tbody>
-
-                <ng-container
-                  *ngFor="let field of tab | ccdTabFields | ccdReadFieldsFilter:false :undefined :true : formGroup.controls['data']">
-                  <div ccdLabelSubstitutor [caseField]="field" [contextFields]="caseFields" [hidden]="field.hidden">
-                    <ng-container [ngSwitch]="!(field | ccdIsCompound)">
-                      <tr *ngSwitchCase="true">
-                        <th id="case-viewer-field-label" *ngIf="!isFieldToHaveNoLabel(field)">
-                          <div class="case-viewer-label text-16">
-                            {{field.label | rpxTranslate}}&ZeroWidthSpace;</div>
-                        </th>
-                        <td [id]="'case-viewer-field-read--' + field.id" scope="col">
-                          <span class="text-16">
-                            <ccd-field-read [topLevelFormGroup]="formGroup?.controls['data']" [caseField]="field"
-                              [caseReference]="caseDetails.case_id"
-                              [markdownUseHrefAsRouterLink]="markdownUseHrefAsRouterLink">
-                            </ccd-field-read>
-                          </span>
-                        </td>
-                      </tr>
-                      <tr *ngSwitchCase="false" class="compound-field">
-                        <th [id]="'case-viewer-field-read--' + field.id" scope="col">
-                          <span class="text-16">
-                            <ccd-field-read [topLevelFormGroup]="formGroup.controls['data']" [caseField]="field"
-                              [caseReference]="caseDetails.case_id"
-                              [markdownUseHrefAsRouterLink]="markdownUseHrefAsRouterLink">
-                            </ccd-field-read>
-                          </span>&ZeroWidthSpace;
-                        </th>
-                      </tr>
-                    </ng-container>
-                  </div>
-                </ng-container>
+              <ng-container *ngFor="let field of tab | ccdTabFields | ccdReadFieldsFilter:false :undefined :true : formGroup?.controls['data']">
+                <div ccdLabelSubstitutor [caseField]="field" [contextFields]="caseFields" [hidden]="field.hidden">
+                  <ng-container [ngSwitch]="!(field | ccdIsCompound)">
+                    <tr *ngSwitchCase="true">
+                      <th id="case-viewer-field-label" *ngIf="!isFieldToHaveNoLabel(field)">
+                        <div class="case-viewer-label text-16">
+                          {{field.label | rpxTranslate}}</div>
+                      </th>
+                      <td [id]="'case-viewer-field-read--' + field.id" scope="col">
+                        <span class="text-16">
+                          <ccd-field-read [topLevelFormGroup]="formGroup?.controls['data']"
+                                          [caseField]="field" [caseReference]="caseDetails.case_id"
+                                          [markdownUseHrefAsRouterLink]="markdownUseHrefAsRouterLink">
+                          </ccd-field-read>
+                        </span>
+                      </td>
+                    </tr>
+                    <tr *ngSwitchCase="false" class="compound-field">
+                      <th [id]="'case-viewer-field-read--' + field.id" scope="col">
+                        <span class="text-16">
+                          <ccd-field-read [topLevelFormGroup]="formGroup.controls['data']"
+                                          [caseField]="field" [caseReference]="caseDetails.case_id"
+                                          [markdownUseHrefAsRouterLink]="markdownUseHrefAsRouterLink">
+                          </ccd-field-read>
+                        </span>
+                      </th>
+                    </tr>
+                  </ng-container>
+                </div>
+              </ng-container>
               </tbody>
             </table>
           </ng-template>
@@ -101,8 +101,7 @@ <h2 class="heading-h2 error-summary-heading" id="edit-case-event_error-summary-h
         <mat-tab *ngFor="let tab of appendedTabs" [id]="tab.id" [label]="tab.label | rpxTranslate">
         </mat-tab>
       </mat-tab-group>
-      <router-outlet
-        *ngIf="(prependedTabs && prependedTabs.length) || (appendedTabs && appendedTabs.length)"></router-outlet>
+      <router-outlet *ngIf="(prependedTabs && prependedTabs.length) || (appendedTabs && appendedTabs.length)"></router-outlet>
     </ng-container>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/base-field/field-read.html b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/base-field/field-read.html
index e17eb96789..68e463d347 100644
--- a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/base-field/field-read.html
+++ b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/base-field/field-read.html
@@ -1,4 +1,4 @@
-<div  id="{{caseField.id}}" [hidden]="caseField.hidden">
+<div [hidden]="caseField.hidden">
   <ccd-field-read-label [formGroup]="formGroup" [topLevelFormGroup]="topLevelFormGroup" [caseField]="caseField" [withLabel]="withLabel" [markdownUseHrefAsRouterLink]="markdownUseHrefAsRouterLink">
     <ng-container #fieldContainer></ng-container>
   </ccd-field-read-label>
diff --git a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/collection/read-collection-field.html b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/collection/read-collection-field.html
index 3ec9934054..cb45548ec5 100644
--- a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/collection/read-collection-field.html
+++ b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/collection/read-collection-field.html
@@ -1,4 +1,4 @@
-<table *ngIf="caseField.value && caseField.value.length " class="collection-field-table"  id="{{caseField.id}}" [attr.aria-describedby]="caseField.id">
+<table *ngIf="caseField.value && caseField.value.length " class="collection-field-table" aria-describedby="collection table">
   <ng-container [ngSwitch]="isDisplayContextParameterAvailable">
     <tbody *ngSwitchCase="true">
     <tr>
diff --git a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/complex/read-complex-field-table.html b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/complex/read-complex-field-table.html
index dd0086497d..1132d28b7d 100644
--- a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/complex/read-complex-field-table.html
+++ b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/complex/read-complex-field-table.html
@@ -1,6 +1,6 @@
 <div class="complex-panel">
-  <dl class="complex-panel-title"><dt><span id="{{caseField.id}}" class="text-16">{{caseField.label | rpxTranslate}}</span></dt><dd></dd></dl>
-  <table class="complex-panel-table" [attr.aria-describedby]="caseField.id">
+  <dl class="complex-panel-title"><dt><span class="text-16">{{caseField.label | rpxTranslate}}</span></dt><dd></dd></dl>
+  <table class="complex-panel-table" aria-describedby="complex field table">
     <tbody>
       <ng-container *ngFor="let field of caseField | ccdReadFieldsFilter:false :undefined :true :topLevelFormGroup: undefined :idPrefix">
         <ng-container *ngIf="(field | ccdIsCompound); else SimpleRow">
@@ -15,7 +15,7 @@
         </ng-container>
         <ng-template #SimpleRow>
           <tr class="complex-panel-simple-field" [hidden]="field.hidden">
-            <th id="complex-panel-simple-field-label"><span class="text-16">{{field.label | rpxTranslate}}</span>&ZeroWidthSpace;</th>
+            <th id="complex-panel-simple-field-label"><span class="text-16">{{field.label | rpxTranslate}}</span></th>
             <td>
                 <span class="text-16">
                   <ccd-field-read [topLevelFormGroup]="topLevelFormGroup"
diff --git a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/multi-select-list/multi-select-list.scss b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/multi-select-list/multi-select-list.scss
index f004c216a5..069310a7eb 100644
--- a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/multi-select-list/multi-select-list.scss
+++ b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/multi-select-list/multi-select-list.scss
@@ -13,8 +13,3 @@
     white-space: nowrap;
   }
 }
-
-.hide-table-caption {
-  position: absolute;
-  visibility: hidden;
-}
diff --git a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/multi-select-list/read-multi-select-list-field.component.spec.ts b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/multi-select-list/read-multi-select-list-field.component.spec.ts
index 9a4b5be042..3433aa184f 100644
--- a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/multi-select-list/read-multi-select-list-field.component.spec.ts
+++ b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/multi-select-list/read-multi-select-list-field.component.spec.ts
@@ -91,23 +91,24 @@ describe('ReadMultiSelectListFieldComponent', () => {
     });
 
     it('should NOT render anything when value is undefined', () => {
-      component.caseField.value = [];
+      component.caseField.value = undefined;
       fixture.detectChanges();
-      expect(de?.children?.length).toBe(1); // &ZeroWidthSpace; has been added to every <th> for accessibilty reasons. At least 1 item always present
+
+      expect(de.children.length).toBe(0);
     });
 
     it('should NOT render anything when value is null', () => {
-      component.caseField.value = [];
+      component.caseField.value = null;
       fixture.detectChanges();
 
-      expect(de?.children?.length).toBe(1); // &ZeroWidthSpace; has been added to every <th> for accessibilty reasons. At least 1 item always present
+      expect(de.children.length).toBe(0);
     });
 
     it('should NOT render anything when value is empty array', () => {
       component.caseField.value = [];
       fixture.detectChanges();
 
-      expect(de.children.length).toBe(1); // &ZeroWidthSpace; has been added to every <th> for accessibilty reasons. At least 1 item always present
+      expect(de.children.length).toBe(0);
     });
   });
 
diff --git a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/multi-select-list/read-multi-select-list-field.html b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/multi-select-list/read-multi-select-list-field.html
index ca96627655..18cb74a6a5 100644
--- a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/multi-select-list/read-multi-select-list-field.html
+++ b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/multi-select-list/read-multi-select-list-field.html
@@ -1,9 +1,8 @@
-<div class="hide-table-caption" id="multi-select-list">{{caseField.value[0]}}</div>
 <table *ngIf="caseField.value && caseField.value.length" class="multi-select-list-field-table"
-       [attr.aria-describedby]="'multi-select-list' | rpxTranslate">
+       [attr.aria-describedby]="'multi selection table' | rpxTranslate">
   <tbody>
     <tr *ngFor="let value of caseField.value">
-      <th style="display: none;">&ZeroWidthSpace;</th>
+      <th style="display: none;"></th>
       <td><span class="text-16">{{ value | ccdFixedList:caseField.field_type.fixed_list_items | rpxTranslate}}</span></td>
     </tr>
   </tbody>
diff --git a/projects/ccd-case-ui-toolkit/src/lib/shared/components/search-result/search-result.component.html b/projects/ccd-case-ui-toolkit/src/lib/shared/components/search-result/search-result.component.html
index d72442bf5d..66f7986a48 100644
--- a/projects/ccd-case-ui-toolkit/src/lib/shared/components/search-result/search-result.component.html
+++ b/projects/ccd-case-ui-toolkit/src/lib/shared/components/search-result/search-result.component.html
@@ -136,7 +136,7 @@ <h2 class="heading-h2" id="search-result-heading__text" tabindex="-1">{{ (caseSt
   [screenReaderPageLabel]="page"
   [screenReaderCurrentLabel]="'You\'re on page'"></ccd-pagination>
 
-<div id="no_case_found" *ngIf="!(hasResults() || hasDrafts())" class="notification">
+<div *ngIf="!(hasResults() || hasDrafts())" class="notification"
+[attr.aria-describedby]="'No cases found. Try using different filters.' | rpxTranslate">
 {{'No cases found. Try using different filters.' | rpxTranslate}}
 </div>
-<span *ngIf="!(hasResults() || hasDrafts())" aria-describedby="no_case_found">&ZeroWidthSpace;</span>