[ng] add ARIA attributes to datagrid (#2431)

Signed-off-by: Jeeyun Lim <[email protected]>
vmware-archive · Jul 30, 2018 · 42daf7e · 42daf7e
1 parent 33f649b
commit 42daf7e
Show file tree

Hide file tree

Showing 12 changed files with 151 additions and 132 deletions.
diff --git a/golden/clr-angular.d.ts b/golden/clr-angular.d.ts
@@ -290,6 +290,7 @@ export declare class ClrDatagridCell {
 }
 
 export declare class ClrDatagridColumn extends DatagridFilterRegistrar<DatagridStringFilterImpl> {
+    readonly ariaSort: string;
     readonly asc: boolean;
     columnId: string;
     customFilter: boolean;
@@ -416,18 +417,16 @@ export declare class ClrDatagridRow implements AfterContentInit {
     hideableColumnService: HideableColumnService;
     id: string;
     item: any;
-    role: string;
+    radioId: string;
     rowActionService: RowActionService;
     selected: boolean;
     selectedChanged: EventEmitter<boolean>;
     selection: Selection;
     constructor(selection: Selection, rowActionService: RowActionService, globalExpandable: ExpandableRowsCount, expand: Expand, hideableColumnService: HideableColumnService);
-    keypress(event: KeyboardEvent): void;
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
     toggle(selected?: boolean): void;
     toggleExpand(): void;
-    toggleSelection(): void;
     updateCellsForColumns(columnList: DatagridHideableColumnModel[]): void;
 }
 

diff --git a/src/clr-angular/data/datagrid/_datagrid.clarity.scss b/src/clr-angular/data/datagrid/_datagrid.clarity.scss
@@ -89,6 +89,9 @@
     display: flex;
     flex-flow: row nowrap;
   }
+  .datagrid-row-clickable {
+    cursor: pointer;
+  }
   .datagrid-column {
     display: flex;
     flex: 1 1 auto;

diff --git a/src/clr-angular/data/datagrid/datagrid-cell.spec.ts b/src/clr-angular/data/datagrid/datagrid-cell.spec.ts
@@ -43,6 +43,10 @@ export default function(): void {
       context.detectChanges();
       expect(context.clarityElement.classList.contains('datagrid-signpost-trigger')).toBeTruthy();
     });
+
+    it('adds a11y roles to the cell', function() {
+      expect(context.clarityElement.attributes.role.value).toBe('cell');
+    });
   });
 }
 

diff --git a/src/clr-angular/data/datagrid/datagrid-cell.ts b/src/clr-angular/data/datagrid/datagrid-cell.ts
@@ -13,7 +13,11 @@ import { HideableColumnService } from './providers/hideable-column.service';
   template: `
         <ng-content></ng-content>
     `,
-  host: { '[class.datagrid-cell]': 'true', '[class.datagrid-signpost-trigger]': 'signpost.length > 0' },
+  host: {
+    '[class.datagrid-cell]': 'true',
+    '[class.datagrid-signpost-trigger]': 'signpost.length > 0',
+    role: 'cell',
+  },
 })
 export class ClrDatagridCell {
   /*********

diff --git a/src/clr-angular/data/datagrid/datagrid-column.spec.ts b/src/clr-angular/data/datagrid/datagrid-column.spec.ts
@@ -346,6 +346,20 @@ export default function(): void {
         expect(context.clarityElement.classList.contains('desc')).toBeTruthy();
       });
 
+      it('adds a11y roles to the column', function() {
+        expect(context.clarityElement.attributes.role.value).toEqual('columnheader');
+        expect(context.clarityElement.attributes['aria-sort'].value).toBe('none');
+
+        context.clarityDirective.sortBy = new TestComparator();
+        context.clarityDirective.sort();
+        context.detectChanges();
+        expect(context.clarityElement.attributes['aria-sort'].value).toBe('ascending');
+
+        context.clarityDirective.sort();
+        context.detectChanges();
+        expect(context.clarityElement.attributes['aria-sort'].value).toBe('descending');
+      });
+
       it('adds the .datagrid-column--hidden when not visible', function() {
         context.clarityDirective.hideable = new DatagridHideableColumnModel(null, 'dg-col-0', true);
         context.detectChanges();

diff --git a/src/clr-angular/data/datagrid/datagrid-column.ts b/src/clr-angular/data/datagrid/datagrid-column.ts
@@ -57,7 +57,12 @@ let nbCount: number = 0;
             </div>
         </div>
     `,
-  host: { '[class.datagrid-column]': 'true', '[class.datagrid-column--hidden]': 'hidden' },
+  host: {
+    '[class.datagrid-column]': 'true',
+    '[class.datagrid-column--hidden]': 'hidden',
+    '[attr.aria-sort]': 'ariaSort',
+    role: 'columnheader',
+  },
 })
 export class ClrDatagridColumn extends DatagridFilterRegistrar<DatagridStringFilterImpl> {
   constructor(private _sort: Sort, filters: FiltersProvider, private _dragDispatcher: DragDispatcher) {
@@ -246,6 +251,18 @@ export class ClrDatagridColumn extends DatagridFilterRegistrar<DatagridStringFil
     }
   }
 
+  public get ariaSort() {
+    switch (this._sortOrder) {
+      default:
+      case ClrDatagridSortOrder.UNSORTED:
+        return 'none';
+      case ClrDatagridSortOrder.ASC:
+        return 'ascending';
+      case ClrDatagridSortOrder.DESC:
+        return 'descending';
+    }
+  }
+
   @Output('clrDgSortOrderChange') public sortOrderChange = new EventEmitter<ClrDatagridSortOrder>();
 
   /**

diff --git a/src/clr-angular/data/datagrid/datagrid-row.spec.ts b/src/clr-angular/data/datagrid/datagrid-row.spec.ts
@@ -7,7 +7,6 @@
 import { Component } from '@angular/core';
 import { fakeAsync, TestBed, tick } from '@angular/core/testing';
 
-import { itIgnore } from '../../../../tests/tests.helpers';
 import { Expand } from '../../utils/expand/providers/expand';
 import { LoadingListener } from '../../utils/loading/loading-listener';
 
@@ -72,6 +71,15 @@ export default function(): void {
         context.detectChanges();
         expect(context.clarityElement.querySelector('.datagrid-fixed-column')).not.toBeNull();
       });
+
+      it('adds a11y roles to the row', function() {
+        expect(context.clarityElement.attributes.role.value).toEqual('rowgroup');
+
+        const rowId = context.clarityDirective.id;
+        expect(context.clarityElement.attributes['aria-owns'].value).toEqual(rowId);
+        const rowContent = context.clarityElement.querySelector('.datagrid-row-master');
+        expect(rowContent.attributes.id.value).toEqual(rowId);
+      });
     });
 
     describe('Selection', function() {
@@ -174,14 +182,18 @@ export default function(): void {
         context.testComponent.item = { id: 1 };
         context.detectChanges();
         const row = context.clarityElement;
-        row.click();
+        expect(row.children).toBeDefined();
+
+        expect(row.children[0] instanceof HTMLLabelElement).toBeFalsy();
+        row.children[0].click();
         context.detectChanges();
         expect(selectionProvider.currentSingle).toBeUndefined();
 
         // Enabling the rowSelectionMode
         selectionProvider.rowSelectionMode = true;
         context.detectChanges();
-        row.click();
+        expect(row.children[0] instanceof HTMLLabelElement).toBeTruthy();
+        row.children[0].click();
         context.detectChanges();
         expect(selectionProvider.currentSingle).toEqual(context.testComponent.item);
       });
@@ -191,40 +203,22 @@ export default function(): void {
         context.testComponent.item = { id: 1 };
         context.detectChanges();
         const row = context.clarityElement;
+        expect(row.children).toBeDefined();
         expect(selectionProvider.current).toEqual([]);
-        row.click();
+        expect(row.children[0] instanceof HTMLLabelElement).toBeFalsy();
+        row.children[0].click();
         context.detectChanges();
         expect(selectionProvider.current).toEqual([]);
 
         // Enabling the rowSelectionMode
         selectionProvider.rowSelectionMode = true;
         context.detectChanges();
-        row.click();
-        context.detectChanges();
-        expect(selectionProvider.current).toEqual([context.testComponent.item]);
-
-        row.click();
-        context.detectChanges();
-        expect(selectionProvider.current).toEqual([]);
-      });
-
-      // IE doesn't support Event constructor
-      // @TODO Consider if we care to fix this test for IE support
-      itIgnore(['ie'], 'select the model on space or enter when `rowSelectionMode` is enabled', function() {
-        selectionProvider.selectionType = SelectionType.Multi;
-        selectionProvider.rowSelectionMode = true;
-        context.testComponent.item = { id: 1 };
-        const row = context.clarityElement;
-        context.detectChanges();
-
-        const event: any = new Event('keypress');
-        event.keyCode = 13; // Enter
-        row.dispatchEvent(event);
+        expect(row.children[0] instanceof HTMLLabelElement).toBeTruthy();
+        row.children[0].click();
         context.detectChanges();
         expect(selectionProvider.current).toEqual([context.testComponent.item]);
 
-        event.keyCode = 32; // Space
-        row.dispatchEvent(event);
+        row.children[0].click();
         context.detectChanges();
         expect(selectionProvider.current).toEqual([]);
       });