From 1173253fe7cc7dd271658ba10606d1eb2059d802 Mon Sep 17 00:00:00 2001
From: Tomasz Gnyp <49343696+tomgny@users.noreply.github.com>
Date: Mon, 22 Apr 2024 17:39:01 +0200
Subject: [PATCH] AAE-22119 Fix Datatable checkbox accessibility breaking
 change (#9596)

* AAE-22119 Fix Datatable checkbox accessibility breaking change

* fix code duplication warning

* fix unit test
---
 .../datatable/datatable.component.html        |  4 ++--
 .../datatable/datatable.component.spec.ts     | 24 +++++++++++++++++++
 .../components/task-list.component.spec.ts    |  2 +-
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.html b/lib/core/src/lib/datatable/components/datatable/datatable.component.html
index dfb263730a..b958ebacd1 100644
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.html
+++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.html
@@ -182,9 +182,9 @@
                     </mat-menu>
                 </div>
 
-                <label *ngIf="multiselect" for="select-file" class="adf-datatable-cell adf-datatable-checkbox">
+                <label *ngIf="multiselect" [for]="'select-file-' + idx" class="adf-datatable-cell adf-datatable-checkbox">
                     <mat-checkbox
-                        id="select-file"
+                        [id]="'select-file-' + idx"
                         [checked]="row.isSelected"
                         [attr.aria-checked]="row.isSelected"
                         role="checkbox"
diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts b/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts
index de0bcf3db4..e19cb713ee 100644
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts
+++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts
@@ -33,6 +33,8 @@ import { CdkDrag, CdkDragDrop, CdkDropList } from '@angular/cdk/drag-drop';
 import { take } from 'rxjs/operators';
 import { By } from '@angular/platform-browser';
 import { mockCarsData, mockCarsSchemaDefinition } from '../mocks/datatable.mock';
+import { MatCheckboxHarness } from '@angular/material/checkbox/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 
 @Component({ selector: 'adf-custom-column-template-component', template: ` <ng-template #tmplRef></ng-template> ` })
 class CustomColumnTemplateComponent {
@@ -1215,6 +1217,28 @@ describe('DataTable', () => {
         expect(rows3[1].isSelected).toBeTruthy();
     });
 
+    it('should select the corresponding row when a checkbox is checked', async () => {
+        const petRows = [{ pet: 'dog' }, { pet: 'cat' }];
+        dataTable.multiselect = true;
+        dataTable.data = new ObjectDataTableAdapter(petRows, [new ObjectDataColumn({ key: 'pet' })]);
+        dataTable.ngOnChanges({ rows: new SimpleChange(null, petRows, false) });
+        fixture.detectChanges();
+
+        const loader = TestbedHarnessEnvironment.loader(fixture);
+        const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness);
+
+        await checkboxes[2].check();
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        expect(await checkboxes[1].isChecked()).toBe(false);
+        expect(await checkboxes[2].isChecked()).toBe(true);
+
+        const rows = dataTable.data.getRows();
+        expect(rows[0].isSelected).toBeFalse();
+        expect(rows[1].isSelected).toBeTrue();
+    });
+
     it('should be able to display column of type boolean', () => {
         dataTable.data = new ObjectDataTableAdapter(mockCarsData, mockCarsSchemaDefinition);
 
diff --git a/lib/process-services/src/lib/task-list/components/task-list.component.spec.ts b/lib/process-services/src/lib/task-list/components/task-list.component.spec.ts
index 14db1b32c0..ad6ff1895b 100644
--- a/lib/process-services/src/lib/task-list/components/task-list.component.spec.ts
+++ b/lib/process-services/src/lib/task-list/components/task-list.component.spec.ts
@@ -599,7 +599,7 @@ describe('TaskListComponent', () => {
         await selectTask1.toggle();
         await selectTask2.toggle();
 
-        expect(component.selectedInstances.length).toBe(0);
+        expect(component.selectedInstances.length).toBe(2);
     });
 
     it('should change selected row after clicking on different row', async () => {