Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 4 additions & 14 deletions src/cdk/table/cell.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@ import {
ContentChild,
Directive,
ElementRef,
Inject,
Input,
Optional,
TemplateRef,
Inject,
Optional,
} from '@angular/core';
import {CanStick, CanStickCtor, mixinHasStickyInput} from './can-stick';
import {CDK_TABLE} from './tokens';
Expand Down Expand Up @@ -178,17 +178,12 @@ 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);
}
}
}

Expand All @@ -197,16 +192,11 @@ 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);
}
}
}
17 changes: 2 additions & 15 deletions src/cdk/table/table.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ describe('CdkTable', () => {
});

it('with the right accessibility roles', () => {
expect(tableElement.getAttribute('role')).toBe('table');
expect(tableElement.getAttribute('role')).toBe('grid');

expect(getHeaderRows(tableElement)[0].getAttribute('role')).toBe('row');
const header = getHeaderRows(tableElement)[0];
Expand All @@ -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('cell');
expect(cell.getAttribute('role')).toBe('gridcell');
});
});
});
Expand Down Expand Up @@ -622,19 +622,6 @@ 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', () => {
Expand Down
2 changes: 1 addition & 1 deletion src/cdk/table/table.ts
Original file line number Diff line number Diff line change
Expand Up @@ -521,7 +521,7 @@ export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDes
@Optional() @SkipSelf() @Inject(STICKY_POSITIONING_LISTENER)
protected readonly _stickyPositioningListener: StickyPositioningListener) {
if (!role) {
this._elementRef.nativeElement.setAttribute('role', 'table');
this._elementRef.nativeElement.setAttribute('role', 'grid');
}

this._document = _document;
Expand Down
2 changes: 2 additions & 0 deletions src/material-experimental/mdc-table/cell.ts
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@ 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 {}
Expand All @@ -99,6 +100,7 @@ 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 {}