EXUI-1539/38: Add aria-sort to table headers (#1736)

* Add aria-sort to table headers in search-result.component

* resolve sonar lint issues

* remove aria-label from column header table

* Move aria-sort to TH element

* Fix double table (exui-1538), simplify isSortAscending to fix multiple comlumns showing as sorted

* Change ver name

* Unit test for new function

* Resolve empty header accessibilty issue

* fix unit test

* version updated

---------

Co-authored-by: RiteshHMCTS <[email protected]>
Co-authored-by: Ritesh Dsouza <[email protected]>

Author: Josh-HMCTS

RELEASE-NOTES.md

@@ -1,5 +1,9 @@
 ## RELEASE NOTES
 
+### Version 7.0.49
+**EXUI-1538** MC - (Level-A) : DAC_Tables_01
+**EXUI-1539** MC - (Level-A) : DAC_Sortable_Tables_01
+
 ### Version 7.0.48
 **EXUI-1952** Add time to date display in case file view
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hmcts/ccd-case-ui-toolkit",
-  "version": "7.0.48",
+  "version": "7.0.49",
   "engines": {
     "node": ">=18.19.0"
   },

projects/ccd-case-ui-toolkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hmcts/ccd-case-ui-toolkit",
-  "version": "7.0.48",
+  "version": "7.0.49",
   "engines": {
     "node": ">=18.19.0"
   },

projects/ccd-case-ui-toolkit/src/lib/shared/components/search-result/search-result.component.html

@@ -10,9 +10,9 @@ <h2 class="heading-h2" id="search-result-heading__text" tabindex="-1">{{ (caseSt
       </strong>
     </div>
 
-    <div *ngIf="(hasResults() || hasDrafts())" class="pagination-top"
-        [attr.aria-label]="getTotalResults() + ' results have been found' | rpxTranslate" role="status">
-      <span class="text-16" id="search-result-summary__text">{{'Showing' | rpxTranslate}}
+    <div *ngIf="(hasResults() || hasDrafts())" class="pagination-top">
+      <output [attr.aria-label]="getTotalResults() + ' results have been found' | rpxTranslate"></output>
+          <span class="text-16" id="search-result-summary__text">{{'Showing' | rpxTranslate}}
         <span class="govuk-!-font-weight-bold">{{ getFirstResult() }}</span>
         {{'to' | rpxTranslate}}
         <span class="govuk-!-font-weight-bold">{{ getLastResult() }}</span>
@@ -33,22 +33,18 @@ <h2 class="heading-h2" id="search-result-heading__text" tabindex="-1">{{ (caseSt
           </label>
         </div>
       </th>
-      <th *ngFor="let col of resultView.columns">
-        <table class="search-result-column-header"
-          [attr.aria-label]="('Sort by ' + col.label + ' ' + isSortAscending(col)? 'ascending' : 'descending') | rpxTranslate">
-          <tr>
-            <th>
-              <div class="search-result-column-label" (click)="sort(col)">
-                {{col.label | rpxTranslate}}
-              </div>
-              <div *ngIf="comparator(col)" class="search-result-column-sort">
-                <a (click)="sort(col)" class="sort-widget" [innerHTML]="sortWidget(col)" href="javascript:void(0)"></a>
-              </div>
-            </th>
-          </tr>
-        </table>
+      <th *ngFor="let col of resultView.columns" class="search-result-column-header"
+        [attr.aria-sort]="isSortAscending(col) === null ? null : (isSortAscending(col) ? 'ascending' : 'descending')">
+        <div>
+          <div class="search-result-column-label" (click)="sort(col)" (keyup)="noop()">
+            {{col.label | rpxTranslate}}
+          </div>
+          <div *ngIf="comparator(col)" class="search-result-column-sort">
+            <a (click)="sort(col)" class="sort-widget" [innerHTML]="sortWidget(col)" href="javascript:void(0)"></a>
+          </div>
+        </div>
       </th>
-      <th *ngIf="activityEnabled()" style="width: 110px;"></th>
+      <th *ngIf="activityEnabled()" style="width: 110px;">&ZeroWidthSpace;</th>
     </tr>
   </thead>
 

projects/ccd-case-ui-toolkit/src/lib/shared/components/search-result/search-result.component.spec.ts

@@ -14,7 +14,9 @@ import {
   Jurisdiction,
   PaginationMetadata,
   SearchResultView,
-  SearchResultViewItem
+  SearchResultViewColumn,
+  SearchResultViewItem,
+  SortOrder
 } from '../../domain';
 import { CaseReferencePipe, SortSearchResultPipe } from '../../pipes';
 import { ActivityService, BrowserService, FieldsUtils, SearchResultViewItemComparatorFactory, SessionStorageService } from '../../services';
@@ -350,7 +352,7 @@ describe('SearchResultComponent', () => {
 
     it('should render an case activity column with header', () => {
       const headRow = de.query(By.css('div>table>thead>tr th:nth-child(4)'));
-      expect(headRow.nativeElement.textContent).toBe('');
+      expect(headRow.nativeElement.textContent).not.toBeNull();
     });
 
     it('should not render an case activity column when activity is disabled', () => {
@@ -901,5 +903,26 @@ describe('SearchResultComponent', () => {
       const pagination = de.query(By.css('div.pagination-top'));
       expect(pagination).toBeFalsy();
     });
+
+    it('should return true if the column is sorted in ascending order', () => {
+      const column = { case_field_id: 'PersonFirstName' } as SearchResultViewColumn;
+      component.consumerSortParameters = { column: 'PersonFirstName', order: SortOrder.ASCENDING, type: 'Text' };
+
+      expect(component.isSortAscending(column)).toBe(true);
+    });
+
+    it('should return false if the column is sorted in descending order', () => {
+      const column = { case_field_id: 'PersonFirstName' } as SearchResultViewColumn;
+      component.consumerSortParameters = { column: 'PersonFirstName', order: SortOrder.DESCENDING, type: 'Text' };
+
+      expect(component.isSortAscending(column)).toBe(false);
+    });
+
+    it('should return null if the column is not sorted', () => {
+      const column = { case_field_id: 'PersonFirstName' } as SearchResultViewColumn;
+      component.consumerSortParameters = { column: 'PersonLastName', order: SortOrder.ASCENDING, type: 'Text' };
+
+      expect(component.isSortAscending(column)).toBe(null);
+    });
   });
 });

projects/ccd-case-ui-toolkit/src/lib/shared/components/search-result/search-result.component.ts

@@ -387,28 +387,11 @@ export class SearchResultComponent implements OnChanges, OnInit {
   }
 
   public isSortAscending(column: SearchResultViewColumn): boolean {
-    const currentSortOrder = this.currentSortOrder(column);
-
-    return currentSortOrder === SortOrder.UNSORTED || currentSortOrder === SortOrder.DESCENDING;
-  }
-
-  private currentSortOrder(column: SearchResultViewColumn): SortOrder {
-
-    let isAscending = true;
-    let isDescending = true;
-
-    if (this.comparator(column) === undefined) {
-      return SortOrder.UNSORTED;
-    }
-    for (let i = 0; i < this.resultView.results.length - 1; i++) {
-      const comparison = this.comparator(column).compare(this.resultView.results[i], this.resultView.results[i + 1]);
-      isDescending = isDescending && comparison <= 0;
-      isAscending = isAscending && comparison >= 0;
-      if (!isAscending && !isDescending) {
-        break;
-      }
+    // simple way to determine if the column param is sorted and if its asc/desc
+    if (this.consumerSortParameters.column === column.case_field_id) {
+      return this.consumerSortParameters.order === SortOrder.ASCENDING;
     }
-    return isAscending ? SortOrder.ASCENDING : isDescending ? SortOrder.DESCENDING : SortOrder.UNSORTED;
+    return null;
   }
 
   public getFirstResult(): number {
@@ -457,4 +440,7 @@ export class SearchResultComponent implements OnChanges, OnInit {
       }
     }
   }
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  noop(): void {}
 }