Ex UI 1270 accessibility bug fixes (#1693)

* arial bug fixes * version change * PR comment fix * aria description added * version number change * version number change * accessibilty issues fix * unit test * version number change * restore removed html segment * unneeded console log removed * console log removed * changes from PR review * page properly indented * unneeded css class removed * released notes updated * version updated * version updated --------- Co-authored-by: RiteshHMCTS <[email protected]> Co-authored-by: Ritesh Dsouza <[email protected]>
hmcts · Aug 19, 2024 · 20adac8 · 20adac8
1 parent 2766f0b
commit 20adac8
Show file tree

Hide file tree

Showing 11 changed files with 73 additions and 63 deletions.
diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md
@@ -1,5 +1,9 @@
 ## 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
@@ -1,6 +1,6 @@
 {
   "name": "@hmcts/ccd-case-ui-toolkit",
-  "version": "7.0.58",
+  "version": "7.0.59",
   "engines": {
     "node": ">=18.19.0"
   },

diff --git 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.58",
+  "version": "7.0.59",
   "engines": {
     "node": ">=18.19.0"
   },

diff --git a/.../shared/components/case-viewer/case-full-access-view/case-full-access-view.component.html b/.../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,31 +25,28 @@ <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>
@@ -62,46 +59,50 @@ <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>
-            <table [class]="tab.id" [attr.aria-label]="'case viewer table' | rpxTranslate">
+            <div class="hide-table-capion" id="table_caption">{{tab.label | rpxTranslate}}</div>
+            <table [class]="tab.id" aria-labelledby="table_caption">
               <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}}</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>
+
+                <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>
               </tbody>
             </table>
           </ng-template>
         </mat-tab>
         <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>
+</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
@@ -1,4 +1,4 @@
-<div [hidden]="caseField.hidden">
+<div  id="{{caseField.id}}" [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/...d-case-ui-toolkit/src/lib/shared/components/palette/collection/read-collection-field.html b/...d-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" aria-describedby="collection table">
+<table *ngIf="caseField.value && caseField.value.length " class="collection-field-table"  id="{{caseField.id}}" [attr.aria-describedby]="caseField.id">
   <ng-container [ngSwitch]="isDisplayContextParameterAvailable">
     <tbody *ngSwitchCase="true">
     <tr>

diff --git a/...d-case-ui-toolkit/src/lib/shared/components/palette/complex/read-complex-field-table.html b/...d-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 class="text-16">{{caseField.label | rpxTranslate}}</span></dt><dd></dd></dl>
-  <table class="complex-panel-table" aria-describedby="complex field table">
+  <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">
     <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></th>
+            <th id="complex-panel-simple-field-label"><span class="text-16">{{field.label | rpxTranslate}}</span>&ZeroWidthSpace;</th>
             <td>
                 <span class="text-16">
                   <ccd-field-read [topLevelFormGroup]="topLevelFormGroup"

diff --git a/...ase-ui-toolkit/src/lib/shared/components/palette/multi-select-list/multi-select-list.scss b/...ase-ui-toolkit/src/lib/shared/components/palette/multi-select-list/multi-select-list.scss
@@ -13,3 +13,8 @@
     white-space: nowrap;
   }
 }
+
+.hide-table-caption {
+  position: absolute;
+  visibility: hidden;
+}
diff --git a/...hared/components/palette/multi-select-list/read-multi-select-list-field.component.spec.ts b/...hared/components/palette/multi-select-list/read-multi-select-list-field.component.spec.ts
@@ -91,24 +91,23 @@ describe('ReadMultiSelectListFieldComponent', () => {
     });
 
     it('should NOT render anything when value is undefined', () => {
-      component.caseField.value = undefined;
+      component.caseField.value = [];
       fixture.detectChanges();
-
-      expect(de.children.length).toBe(0);
+      expect(de?.children?.length).toBe(1); // &ZeroWidthSpace; has been added to every <th> for accessibilty reasons. At least 1 item always present
     });
 
     it('should NOT render anything when value is null', () => {
-      component.caseField.value = null;
+      component.caseField.value = [];
       fixture.detectChanges();
 
-      expect(de.children.length).toBe(0);
+      expect(de?.children?.length).toBe(1); // &ZeroWidthSpace; has been added to every <th> for accessibilty reasons. At least 1 item always present
     });
 
     it('should NOT render anything when value is empty array', () => {
       component.caseField.value = [];
       fixture.detectChanges();
 
-      expect(de.children.length).toBe(0);
+      expect(de.children.length).toBe(1); // &ZeroWidthSpace; has been added to every <th> for accessibilty reasons. At least 1 item always present
     });
   });
 

diff --git a/...kit/src/lib/shared/components/palette/multi-select-list/read-multi-select-list-field.html b/...kit/src/lib/shared/components/palette/multi-select-list/read-multi-select-list-field.html
@@ -1,8 +1,9 @@
+<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 selection table' | rpxTranslate">
+       [attr.aria-describedby]="'multi-select-list' | rpxTranslate">
   <tbody>
     <tr *ngFor="let value of caseField.value">
-      <th style="display: none;"></th>
+      <th style="display: none;">&ZeroWidthSpace;</th>
       <td><span class="text-16">{{ value | ccdFixedList:caseField.field_type.fixed_list_items | rpxTranslate}}</span></td>
     </tr>
   </tbody>

diff --git a/.../ccd-case-ui-toolkit/src/lib/shared/components/search-result/search-result.component.html b/.../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 *ngIf="!(hasResults() || hasDrafts())" class="notification"
-[attr.aria-describedby]="'No cases found. Try using different filters.' | rpxTranslate">
+<div id="no_case_found" *ngIf="!(hasResults() || hasDrafts())" class="notification">
 {{'No cases found. Try using different filters.' | rpxTranslate}}
 </div>
+<span *ngIf="!(hasResults() || hasDrafts())" aria-describedby="no_case_found">&ZeroWidthSpace;</span>