feat(data-table): allow custom roles (#4988)

* feat(data-table): allow custom roles

* change to treegrid

Author: andrewseguin

src/lib/core/data-table/data-table.spec.ts

@@ -21,7 +21,7 @@ describe('CdkTable', () => {
 
     TestBed.configureTestingModule({
       imports: [CdkDataTableModule],
-      declarations: [SimpleCdkTableApp],
+      declarations: [SimpleCdkTableApp, CustomRoleCdkTableApp],
     }).compileComponents();
 
     fixture = TestBed.createComponent(SimpleCdkTableApp);
@@ -84,6 +84,13 @@ describe('CdkTable', () => {
     });
   });
 
+  it('should not clobber an existing table role', () => {
+    fixture = TestBed.createComponent(CustomRoleCdkTableApp);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('cdk-table')).toBeRole('treegrid');
+  });
+
   it('should re-render the rows when the data changes', () => {
     dataSource.addData();
     fixture.detectChanges();
@@ -255,6 +262,26 @@ class SimpleCdkTableApp {
   @ViewChild(CdkTable) table: CdkTable<TestData>;
 }
 
+@Component({
+  template: `
+    <cdk-table [dataSource]="dataSource" role="treegrid">
+      <ng-container cdkColumnDef="column_a">
+        <cdk-header-cell *cdkHeaderCellDef> Column A</cdk-header-cell>
+        <cdk-cell *cdkCellDef="let row"> {{row.a}}</cdk-cell>
+      </ng-container>
+
+      <cdk-header-row *cdkHeaderRowDef="columnsToRender"></cdk-header-row>
+      <cdk-row *cdkRowDef="let row; columns: columnsToRender"></cdk-row>
+    </cdk-table>
+  `
+})
+class CustomRoleCdkTableApp {
+  dataSource: FakeDataSource = new FakeDataSource();
+  columnsToRender = ['column_a'];
+
+  @ViewChild(CdkTable) table: CdkTable<TestData>;
+}
+
 function getElements(element: Element, query: string): Element[] {
   return [].slice.call(element.querySelectorAll(query));
 }

src/lib/core/data-table/data-table.ts

@@ -1,16 +1,19 @@
 import {
+  Attribute,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   ContentChild,
   ContentChildren,
   Directive,
+  ElementRef,
   Input,
   IterableChangeRecord,
   IterableDiffer,
   IterableDiffers,
   NgIterable,
   QueryList,
+  Renderer2,
   ViewChild,
   ViewContainerRef,
   ViewEncapsulation
@@ -54,7 +57,6 @@ export class HeaderRowPlaceholder {
   `,
   host: {
     'class': 'cdk-table',
-    'role': 'grid' // TODO(andrewseguin): Allow the user to choose either grid or treegrid
   },
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -104,12 +106,19 @@ export class CdkTable<T> implements CollectionViewer {
   @ContentChildren(CdkRowDef) _rowDefinitions: QueryList<CdkRowDef>;
 
   constructor(private readonly _differs: IterableDiffers,
-              private readonly _changeDetectorRef: ChangeDetectorRef) {
+              private readonly _changeDetectorRef: ChangeDetectorRef,
+              elementRef: ElementRef,
+              renderer: Renderer2,
+              @Attribute('role') role: string) {
     // Show the stability warning of the data-table only if it doesn't run inside of jasmine.
     // This is just temporary and should reduce warnings when running the tests.
     if (!(typeof window !== 'undefined' && window['jasmine'])) {
       console.warn('The data table is still in active development ' +
-        'and should be considered unstable.');
+          'and should be considered unstable.');
+    }
+
+    if (!role) {
+      renderer.setAttribute(elementRef.nativeElement, 'role', 'grid');
     }
 
     // TODO(andrewseguin): Add trackby function input.

src/lib/core/testing/jasmine-matchers.ts

@@ -6,11 +6,13 @@ export const customMatchers: jasmine.CustomMatcherFactories = {
     return {
       compare: function (element: Element, expectedRole: string) {
         const result: jasmine.CustomMatcherResult = {pass: false};
-        result.pass = element.getAttribute('role') === expectedRole;
+        const actualRole = element.getAttribute('role');
+
+        result.pass = actualRole === expectedRole;
         result.message = `Expected role for ${element.tagName} to be ${expectedRole}`;
 
         if (!result.pass) {
-          result.message += ` but was ${expectedRole}`;
+          result.message += ` but was ${actualRole}`;
         }
 
         return result;