mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
AAE-22119 Fix Datatable checkbox accessibility breaking change (#9596)
* AAE-22119 Fix Datatable checkbox accessibility breaking change * fix code duplication warning * fix unit test
This commit is contained in:
@@ -182,9 +182,9 @@
|
|||||||
</mat-menu>
|
</mat-menu>
|
||||||
</div>
|
</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
|
<mat-checkbox
|
||||||
id="select-file"
|
[id]="'select-file-' + idx"
|
||||||
[checked]="row.isSelected"
|
[checked]="row.isSelected"
|
||||||
[attr.aria-checked]="row.isSelected"
|
[attr.aria-checked]="row.isSelected"
|
||||||
role="checkbox"
|
role="checkbox"
|
||||||
|
@@ -33,6 +33,8 @@ import { CdkDrag, CdkDragDrop, CdkDropList } from '@angular/cdk/drag-drop';
|
|||||||
import { take } from 'rxjs/operators';
|
import { take } from 'rxjs/operators';
|
||||||
import { By } from '@angular/platform-browser';
|
import { By } from '@angular/platform-browser';
|
||||||
import { mockCarsData, mockCarsSchemaDefinition } from '../mocks/datatable.mock';
|
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> ` })
|
@Component({ selector: 'adf-custom-column-template-component', template: ` <ng-template #tmplRef></ng-template> ` })
|
||||||
class CustomColumnTemplateComponent {
|
class CustomColumnTemplateComponent {
|
||||||
@@ -1215,6 +1217,28 @@ describe('DataTable', () => {
|
|||||||
expect(rows3[1].isSelected).toBeTruthy();
|
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', () => {
|
it('should be able to display column of type boolean', () => {
|
||||||
dataTable.data = new ObjectDataTableAdapter(mockCarsData, mockCarsSchemaDefinition);
|
dataTable.data = new ObjectDataTableAdapter(mockCarsData, mockCarsSchemaDefinition);
|
||||||
|
|
||||||
|
@@ -599,7 +599,7 @@ describe('TaskListComponent', () => {
|
|||||||
await selectTask1.toggle();
|
await selectTask1.toggle();
|
||||||
await selectTask2.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 () => {
|
it('should change selected row after clicking on different row', async () => {
|
||||||
|
Reference in New Issue
Block a user