Merge pull request #4155 from Alfresco/dev-spopa-ADF-3860

lib/core/datatable/components/datatable/datatable.component.html

@@ -1,10 +1,11 @@
 <div
+    role="grid"
     *ngIf="data" class="adf-full-width"
     [class.adf-data-table-card]="display === 'gallery'"
     [class.adf-data-table]="display === 'list'"
     [class.adf-data-table--empty]="isEmpty()">
-    <div *ngIf="isHeaderVisible()" class="adf-datatable-header">
+    <div *ngIf="isHeaderVisible()" class="adf-datatable-header" role="rowgroup">
-        <div class="adf-datatable-row" *ngIf="display === 'list'">
+        <div class="adf-datatable-row" *ngIf="display === 'list'" role="row">
             <!-- Actions (left) -->
             <div *ngIf="actions && actionsPosition === 'left'" class="adf-actions-column adf-datatable-table-cell-header">
                 <span class="adf-sr-only">Actions</span>
@@ -21,7 +22,7 @@
                  [class.adf-data-table__header--sorted-desc]="isColumnSorted(col, 'desc')"
                  (click)="onColumnHeaderClick(col)"
                  (keyup.enter)="onColumnHeaderClick(col)"
-                 role="button"
+                 role="columnheader"
                  tabindex="0"
                  title="{{ col.title | translate }}">
                 <span *ngIf="col.srTitle" class="adf-sr-only">{{ col.srTitle | translate }}</span>
@@ -45,18 +46,18 @@
         </mat-form-field>
     </div>
 
-    <div class="adf-datatable-body">
+    <div class="adf-datatable-body" role="rowgroup">
         <ng-container *ngIf="!loading && !noPermission">
             <div *ngFor="let row of data.getRows(); let idx = index"
                  class="adf-datatable-row"
-                 role="button"
+                 role="row"
                  [class.adf-is-selected]="row.isSelected"
                  [adf-upload]="allowDropFiles && rowAllowsDrop(row)" [adf-upload-data]="row"
                  [ngStyle]="rowStyle"
                  [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"
                             [title]="'ADF-DATATABLE.CONTENT-ACTIONS.TOOLTIP' | translate"
                             [attr.id]="'action_menu_left_' + idx"
@@ -81,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)"
@@ -161,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"
@@ -181,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">
@@ -196,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">

lib/core/datatable/components/datatable/datatable.component.spec.ts

@@ -32,12 +32,15 @@ import { DataColumnComponent } from '../../../data-column/data-column.component'
 class FakeDataRow implements DataRow {
     isDropTarget = false;
     isSelected = true;
+
     hasValue(key: any) {
         return true;
     }
+
     getValue() {
         return '1';
     }
+
     imageErrorResolver() {
         return './assets/images/ft_ic_miscellaneous.svg';
     }
@@ -467,7 +470,10 @@ describe('DataTable', () => {
             done();
         });
 
-        dataTable.onRowClick(rows[0], <any> { metaKey: true, preventDefault() { } });
+        dataTable.onRowClick(rows[0], <any> {
+            metaKey: true, preventDefault() {
+            }
+        });
     });
 
     it('should select multiple rows with [multiple] selection mode and modifier key', (done) => {
@@ -939,10 +945,16 @@ describe('DataTable', () => {
 
     it('should reset the menu cache after rows change', () => {
         let emitted = 0;
-        dataTable.showRowActionsMenu.subscribe(() => { emitted++; });
+        dataTable.showRowActionsMenu.subscribe(() => {
+            emitted++;
+        });
 
         const column = <DataColumn> {};
-        const row = <DataRow>  { getValue: function (key: string) { return 'id'; } };
+        const row = <DataRow> {
+            getValue: function (key: string) {
+                return 'id';
+            }
+        };
 
         dataTable.getRowActions(row, column);
         dataTable.ngOnChanges({ 'data': new SimpleChange('123', {}, true) });
@@ -951,3 +963,60 @@ 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 accessibility 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');
+    });
+});