fix(table): add missing rowgroup roles

The native cdk-table adds thead, tbody, and tfoot elements but was
omitting the "rowgroup" role from these. This is necessary since we also
specifically add roles to all of the other table elements.

Author: jelbourn

src/cdk/table/table.spec.ts

@@ -505,6 +505,19 @@ describe('CdkTable', () => {
     ]);
   });
 
+  it('should apply correct roles for native table elements', () => {
+    const thisFixture = createComponent(NativeHtmlTableApp);
+    const thisTableElement: HTMLTableElement = thisFixture.nativeElement.querySelector('table');
+    thisFixture.detectChanges();
+
+    const rowGroups = Array.from(thisTableElement.querySelectorAll('thead, tbody, tfoot'));
+    expect(rowGroups.length).toBe(3, 'Expected table to have a thead, tbody, and tfoot');
+    for (const group of rowGroups) {
+      expect(group.getAttribute('role'))
+          .toBe('rowgroup', 'Expected thead, tbody, and tfoot to have role="rowgroup"');
+    }
+  });
+
   it('should render cells even if row data is falsy', () => {
     setupTableTestApp(BooleanRowCdkTableApp);
     expectTableToMatchContent(tableElement, [
@@ -1591,27 +1604,27 @@ class MultipleHeaderFooterRowsCdkTableApp {
 
       <ng-container cdkColumnDef="index1Column">
         <cdk-header-cell *cdkHeaderCellDef> Column C</cdk-header-cell>
-        <cdk-cell *cdkCellDef="let row"> index_1_special_row</cdk-cell>
+        <cdk-cell *cdkCellDef> index_1_special_row</cdk-cell>
       </ng-container>
 
       <ng-container cdkColumnDef="c3Column">
         <cdk-header-cell *cdkHeaderCellDef> Column C</cdk-header-cell>
-        <cdk-cell *cdkCellDef="let row"> c3_special_row</cdk-cell>
+        <cdk-cell *cdkCellDef> c3_special_row</cdk-cell>
       </ng-container>
 
       <ng-container cdkColumnDef="index">
         <cdk-header-cell *cdkHeaderCellDef> Index</cdk-header-cell>
-        <cdk-cell *cdkCellDef="let row; let index = index"> {{index}}</cdk-cell>
+        <cdk-cell *cdkCellDef="let index = index"> {{index}}</cdk-cell>
       </ng-container>
 
       <ng-container cdkColumnDef="dataIndex">
         <cdk-header-cell *cdkHeaderCellDef> Data Index</cdk-header-cell>
-        <cdk-cell *cdkCellDef="let row; let dataIndex = dataIndex"> {{dataIndex}}</cdk-cell>
+        <cdk-cell *cdkCellDef="let dataIndex = dataIndex"> {{dataIndex}}</cdk-cell>
       </ng-container>
 
       <ng-container cdkColumnDef="renderIndex">
         <cdk-header-cell *cdkHeaderCellDef> Render Index</cdk-header-cell>
-        <cdk-cell *cdkCellDef="let row; let renderIndex = renderIndex"> {{renderIndex}}</cdk-cell>
+        <cdk-cell *cdkCellDef="let renderIndex = renderIndex"> {{renderIndex}}</cdk-cell>
       </ng-container>
 
       <cdk-header-row *cdkHeaderRowDef="columnsToRender"></cdk-header-row>
@@ -1662,12 +1675,12 @@ class WhenRowCdkTableApp {
 
       <ng-container cdkColumnDef="index1Column">
         <cdk-header-cell *cdkHeaderCellDef> Column C</cdk-header-cell>
-        <cdk-cell *cdkCellDef="let row"> index_1_special_row </cdk-cell>
+        <cdk-cell *cdkCellDef> index_1_special_row </cdk-cell>
       </ng-container>
 
       <ng-container cdkColumnDef="c3Column">
         <cdk-header-cell *cdkHeaderCellDef> Column C</cdk-header-cell>
-        <cdk-cell *cdkCellDef="let row"> c3_special_row </cdk-cell>
+        <cdk-cell *cdkCellDef> c3_special_row </cdk-cell>
       </ng-container>
 
       <cdk-header-row *cdkHeaderRowDef="columnsToRender"></cdk-header-row>
@@ -1705,12 +1718,12 @@ class WhenRowWithoutDefaultCdkTableApp {
 
       <ng-container cdkColumnDef="index1Column">
         <cdk-header-cell *cdkHeaderCellDef> Column C</cdk-header-cell>
-        <cdk-cell *cdkCellDef="let row"> index_1_special_row </cdk-cell>
+        <cdk-cell *cdkCellDef> index_1_special_row </cdk-cell>
       </ng-container>
 
       <ng-container cdkColumnDef="c3Column">
         <cdk-header-cell *cdkHeaderCellDef> Column C</cdk-header-cell>
-        <cdk-cell *cdkCellDef="let row"> c3_special_row </cdk-cell>
+        <cdk-cell *cdkCellDef> c3_special_row </cdk-cell>
       </ng-container>
 
       <cdk-header-row *cdkHeaderRowDef="columnsToRender"></cdk-header-row>
@@ -1790,7 +1803,7 @@ class TrackByCdkTableApp {
                     [sticky]="isStuck(stickyStartColumns, column)"
                     [stickyEnd]="isStuck(stickyEndColumns, column)">
         <cdk-header-cell *cdkHeaderCellDef> Header {{column}} </cdk-header-cell>
-        <cdk-cell *cdkCellDef="let row"> {{column}} </cdk-cell>
+        <cdk-cell *cdkCellDef>{{column}}</cdk-cell>
         <cdk-footer-cell *cdkFooterCellDef> Footer {{column}} </cdk-footer-cell>
       </ng-container>
 

src/cdk/table/table.ts

@@ -983,6 +983,7 @@ export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDes
 
     for (const section of sections) {
       const element = documentRef.createElement(section.tag);
+      element.setAttribute('role', 'rowgroup');
       element.appendChild(section.outlet.elementRef.nativeElement);
       documentFragment.appendChild(element);
     }