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 b156bb49daa5..d73dd322a50c 100644 --- a/src/cdk/table/table.spec.ts +++ b/src/cdk/table/table.spec.ts @@ -108,7 +108,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]; @@ -119,7 +119,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'); }); }); }); @@ -622,6 +622,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 a5a0b29cb71a..dcfec39e5432 100644 --- a/src/cdk/table/table.ts +++ b/src/cdk/table/table.ts @@ -521,7 +521,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 6a34ced92195..eb49f45da598 100644 --- a/src/material-experimental/mdc-table/cell.ts +++ b/src/material-experimental/mdc-table/cell.ts @@ -90,7 +90,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 {} @@ -100,7 +99,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 {}