diff --git a/src/cdk/table/cell.ts b/src/cdk/table/cell.ts index 540858827a1d..ebf085e58654 100644 --- a/src/cdk/table/cell.ts +++ b/src/cdk/table/cell.ts @@ -11,10 +11,10 @@ import { ContentChild, Directive, ElementRef, - Input, - TemplateRef, Inject, + Input, Optional, + TemplateRef, } from '@angular/core'; import {CanStick, CanStickCtor, mixinHasStickyInput} from './can-stick'; import {CDK_TABLE} from './tokens'; @@ -178,12 +178,17 @@ export class CdkHeaderCell extends BaseCdkCell { selector: 'cdk-footer-cell, td[cdk-footer-cell]', host: { 'class': 'cdk-footer-cell', - 'role': 'gridcell', }, }) export class CdkFooterCell extends BaseCdkCell { constructor(columnDef: CdkColumnDef, elementRef: ElementRef) { super(columnDef, elementRef); + if (columnDef._table?._elementRef.nativeElement.nodeType === 1) { + const tableRole = columnDef._table._elementRef.nativeElement + .getAttribute('role'); + const role = (tableRole === 'grid' || tableRole === 'treegrid') ? 'gridcell' : 'cell'; + elementRef.nativeElement.setAttribute('role', role); + } } } @@ -192,11 +197,16 @@ export class CdkFooterCell extends BaseCdkCell { selector: 'cdk-cell, td[cdk-cell]', host: { 'class': 'cdk-cell', - 'role': 'gridcell', }, }) export class CdkCell extends BaseCdkCell { constructor(columnDef: CdkColumnDef, elementRef: ElementRef) { super(columnDef, elementRef); + if (columnDef._table?._elementRef.nativeElement.nodeType === 1) { + const tableRole = columnDef._table._elementRef.nativeElement + .getAttribute('role'); + const role = (tableRole === 'grid' || tableRole === 'treegrid') ? 'gridcell' : 'cell'; + elementRef.nativeElement.setAttribute('role', role); + } } } diff --git a/src/cdk/table/table.spec.ts b/src/cdk/table/table.spec.ts index 6e5d8d806c33..cd65610e2939 100644 --- a/src/cdk/table/table.spec.ts +++ b/src/cdk/table/table.spec.ts @@ -107,7 +107,7 @@ describe('CdkTable', () => { }); it('with the right accessibility roles', () => { - expect(tableElement.getAttribute('role')).toBe('grid'); + expect(tableElement.getAttribute('role')).toBe('table'); expect(getHeaderRows(tableElement)[0].getAttribute('role')).toBe('row'); const header = getHeaderRows(tableElement)[0]; @@ -118,7 +118,7 @@ describe('CdkTable', () => { getRows(tableElement).forEach(row => { expect(row.getAttribute('role')).toBe('row'); getCells(row).forEach(cell => { - expect(cell.getAttribute('role')).toBe('gridcell'); + expect(cell.getAttribute('role')).toBe('cell'); }); }); }); @@ -611,6 +611,19 @@ describe('CdkTable', () => { it('should not clobber an existing table role', () => { setupTableTestApp(CustomRoleCdkTableApp); expect(tableElement.getAttribute('role')).toBe('treegrid'); + + expect(getHeaderRows(tableElement)[0].getAttribute('role')).toBe('row'); + const header = getHeaderRows(tableElement)[0]; + getHeaderCells(header).forEach(cell => { + expect(cell.getAttribute('role')).toBe('columnheader'); + }); + + getRows(tableElement).forEach(row => { + expect(row.getAttribute('role')).toBe('row'); + getCells(row).forEach(cell => { + expect(cell.getAttribute('role')).toBe('gridcell'); + }); + }); }); it('should throw an error if two column definitions have the same name', () => { diff --git a/src/cdk/table/table.ts b/src/cdk/table/table.ts index 610c81b83dcd..c50adf5dc9a8 100644 --- a/src/cdk/table/table.ts +++ b/src/cdk/table/table.ts @@ -512,7 +512,7 @@ export class CdkTable implements AfterContentChecked, CollectionViewer, OnDes @Optional() @SkipSelf() @Inject(STICKY_POSITIONING_LISTENER) protected readonly _stickyPositioningListener: StickyPositioningListener) { if (!role) { - this._elementRef.nativeElement.setAttribute('role', 'grid'); + this._elementRef.nativeElement.setAttribute('role', 'table'); } this._document = _document; diff --git a/src/material-experimental/mdc-table/cell.ts b/src/material-experimental/mdc-table/cell.ts index cc3fa4df6a86..12f19bed3b5e 100644 --- a/src/material-experimental/mdc-table/cell.ts +++ b/src/material-experimental/mdc-table/cell.ts @@ -93,7 +93,6 @@ export class MatHeaderCell extends CdkHeaderCell {} selector: 'mat-footer-cell, td[mat-footer-cell]', host: { 'class': 'mat-mdc-footer-cell mdc-data-table__cell', - 'role': 'gridcell', }, }) export class MatFooterCell extends CdkFooterCell {} @@ -103,7 +102,6 @@ export class MatFooterCell extends CdkFooterCell {} selector: 'mat-cell, td[mat-cell]', host: { 'class': 'mat-mdc-cell mdc-data-table__cell', - 'role': 'gridcell', }, }) export class MatCell extends CdkCell {}