From 01191bba05e0768723d7fbea680cdcc3d1f7f9f8 Mon Sep 17 00:00:00 2001 From: Annie Wang Date: Thu, 15 Apr 2021 11:09:21 -0700 Subject: [PATCH 1/2] fix(cdk/table): set default role of table to 'table' --- src/cdk/table/cell.ts | 16 ++++++++++++---- src/cdk/table/table.spec.ts | 4 ++-- src/cdk/table/table.ts | 2 +- src/material-experimental/mdc-table/cell.ts | 2 -- 4 files changed, 15 insertions(+), 9 deletions(-) diff --git a/src/cdk/table/cell.ts b/src/cdk/table/cell.ts index 540858827a1d..d9d89fa2740a 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,16 @@ 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 role = columnDef._table._elementRef.nativeElement + .getAttribute('role') === 'table' ? 'cell' : 'gridcell'; + elementRef.nativeElement.setAttribute('role', role); + } } } @@ -192,11 +196,15 @@ 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 role = columnDef._table._elementRef.nativeElement + .getAttribute('role') === 'table' ? 'cell' : 'gridcell'; + elementRef.nativeElement.setAttribute('role', role); + } } } diff --git a/src/cdk/table/table.spec.ts b/src/cdk/table/table.spec.ts index 6e5d8d806c33..3f7878e143e9 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'); }); }); }); 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 {} From 6fda4da064c2debb6c1e448c26cc612fbe57f461 Mon Sep 17 00:00:00 2001 From: Annie Wang Date: Tue, 20 Apr 2021 17:07:51 -0700 Subject: [PATCH 2/2] fixup! fix(cdk/table): set default role of table to 'table' --- src/cdk/table/cell.ts | 10 ++++++---- src/cdk/table/table.spec.ts | 13 +++++++++++++ 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/src/cdk/table/cell.ts b/src/cdk/table/cell.ts index d9d89fa2740a..ebf085e58654 100644 --- a/src/cdk/table/cell.ts +++ b/src/cdk/table/cell.ts @@ -184,8 +184,9 @@ export class CdkFooterCell extends BaseCdkCell { constructor(columnDef: CdkColumnDef, elementRef: ElementRef) { super(columnDef, elementRef); if (columnDef._table?._elementRef.nativeElement.nodeType === 1) { - const role = columnDef._table._elementRef.nativeElement - .getAttribute('role') === 'table' ? 'cell' : 'gridcell'; + const tableRole = columnDef._table._elementRef.nativeElement + .getAttribute('role'); + const role = (tableRole === 'grid' || tableRole === 'treegrid') ? 'gridcell' : 'cell'; elementRef.nativeElement.setAttribute('role', role); } } @@ -202,8 +203,9 @@ export class CdkCell extends BaseCdkCell { constructor(columnDef: CdkColumnDef, elementRef: ElementRef) { super(columnDef, elementRef); if (columnDef._table?._elementRef.nativeElement.nodeType === 1) { - const role = columnDef._table._elementRef.nativeElement - .getAttribute('role') === 'table' ? 'cell' : 'gridcell'; + 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 3f7878e143e9..cd65610e2939 100644 --- a/src/cdk/table/table.spec.ts +++ b/src/cdk/table/table.spec.ts @@ -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', () => {