inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* AAE-22119 Fix Datatable checkbox accessibility breaking change

* fix code duplication warning

* fix unit test
This commit is contained in:
Tomasz Gnyp
2024-04-22 17:39:01 +02:00
committed by GitHub
parent 88920f47c3
commit 1173253fe7
3 changed files with 27 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
lib/core/src/lib/datatable/components/datatable/datatable.component.html
View File

@@ -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"

24
lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts
View File

@@ -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);