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

[3860] - change role to grid and add unit test

Browse Source
This commit is contained in:
Silviu Popa
2019-01-15 18:16:57 +02:00
parent 4c341c9822
commit df56ce179d
2 changed files with 138 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
lib/core/datatable/components/datatable/datatable.component.html
View File

@@ -1,5 +1,5 @@
<div
role="table"
role="grid"
*ngIf="data" class="adf-full-width"
[class.adf-data-table-card]="display === 'gallery'"
[class.adf-data-table]="display === 'list'"
@@ -57,9 +57,8 @@
[ngClass]="getRowStyle(row)"
(keyup)="onRowKeyUp(row, $event)">
<!-- Actions (left) -->
<div *ngIf="actions && actionsPosition === 'left'" class="adf-datatable-table-cell">
<div *ngIf="actions && actionsPosition === 'left'" role="gridcell" class="adf-datatable-table-cell">
<button mat-icon-button [matMenuTriggerFor]="menu"
role="cell"
[title]="'ADF-DATATABLE.CONTENT-ACTIONS.TOOLTIP' | translate"
[attr.id]="'action_menu_left_' + idx"
[attr.data-automation-id]="'action_menu_' + idx">
@@ -83,6 +82,7 @@
</mat-checkbox>
</div>
<div *ngFor="let col of data.getColumns()"
role="gridcell"
class="adf-data-table-cell adf-datatable-table-cell adf-data-table-cell--{{col.type || 'text'}} {{col.cssClass}}"
[attr.title]="col.title | translate"
[attr.filename]="getFilename(row)"
@@ -163,6 +163,7 @@
<!-- Actions (right) -->
<div *ngIf="actions && actionsPosition === 'right'"
role="gridcell"
class="adf-datatable-table-cell adf-datatable__actions-cell">
<button mat-icon-button [matMenuTriggerFor]="menu"
[title]="'ADF-DATATABLE.CONTENT-ACTIONS.TOOLTIP' | translate"
@@ -183,9 +184,10 @@
</div>
<div *ngIf="isEmpty()"
role="row"
[class.adf-datatable-row]="display === 'list'"
[class.adf-data-table-card-empty]="display === 'gallery'">
<div class="adf-no-content-container adf-datatable-table-cell">
<div class="adf-no-content-container adf-datatable-table-cell" role="gridcell">
<ng-template *ngIf="noContentTemplate"
ngFor [ngForOf]="[data]"
[ngForTemplate]="noContentTemplate">
@@ -198,6 +200,7 @@
</div>
</ng-container>
<div *ngIf="!loading && noPermission"
role="row"
[class.adf-datatable-row]="display === 'list'"
[class.adf-data-table-card-permissions]="display === 'gallery'"
class="adf-no-permission__row">

58
lib/core/datatable/components/datatable/datatable.component.spec.ts
View File

@@ -951,3 +951,61 @@ describe('DataTable', () => {
expect(emitted).toBe(2);
});
});
describe('Accesibility', () => {
let fixture: ComponentFixture<DataTableComponent>;
let dataTable: DataTableComponent;
let element: any;
setupTestBed({
imports: [
CoreTestingModule
],
schemas: [NO_ERRORS_SCHEMA]
});
beforeEach(() => {
fixture = TestBed.createComponent(DataTableComponent);
dataTable = fixture.componentInstance;
element = fixture.debugElement.nativeElement;
});
afterEach(() => {
fixture.destroy();
});
it('should have accesibility tags', () => {
const dataRows =
[
{ name: 'test1' },
{ name: 'test2' },
{ name: 'test3' },
{ name: 'test4' }
];
dataTable.data = new ObjectDataTableAdapter([],
[new ObjectDataColumn({ key: 'name' })]
);
dataTable.ngOnChanges({
rows: new SimpleChange(null, dataRows, false)
});
fixture.detectChanges();
const datatableAttributes = element.querySelector('.adf-data-table').attributes;
const datatableHeaderAttributes = element.querySelector('.adf-data-table .adf-datatable-header').attributes;
const datatableHeaderCellAttributes = element.querySelector('.adf-datatable-table-cell-header').attributes;
const datatableBodyAttributes = element.querySelector('.adf-datatable-body').attributes;
const datatableBodyRowAttributes = element.querySelector('.adf-datatable-body .adf-datatable-row').attributes;
const datatableBodyCellAttributes = element.querySelector('.adf-datatable-body .adf-datatable-table-cell').attributes;
expect(datatableAttributes.getNamedItem('role').value).toEqual("grid");
expect(datatableHeaderAttributes.getNamedItem('role').value).toEqual("rowgroup");
expect(datatableHeaderCellAttributes.getNamedItem('role').value).toEqual("columnheader");
expect(datatableBodyAttributes.getNamedItem('role').value).toEqual("rowgroup");
expect(datatableBodyRowAttributes.getNamedItem('role').value).toEqual("row");
expect(datatableBodyCellAttributes.getNamedItem('role').value).toEqual("gridcell");
});
})