AAE-22119 Fix Datatable checkbox accessibility breaking change (#9596)

* AAE-22119 Fix Datatable checkbox accessibility breaking change * fix code duplication warning * fix unit test
Alfresco · Apr 22, 2024 · 1173253 · 1173253
1 parent 88920f4
commit 1173253
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 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
@@ -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
@@ -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
@@ -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 () => {