diff --git a/src/material/datepicker/calendar-body.html b/src/material/datepicker/calendar-body.html
index 04d4c1667577..d41991ddc2ea 100644
--- a/src/material/datepicker/calendar-body.html
+++ b/src/material/datepicker/calendar-body.html
@@ -42,6 +42,7 @@
[style.paddingTop]="_cellPadding"
[style.paddingBottom]="_cellPadding">
{{item.displayValue}}
diff --git a/src/material/datepicker/calendar-body.spec.ts b/src/material/datepicker/calendar-body.spec.ts
index dad5f9c6aa4a..9918af58c132 100644
--- a/src/material/datepicker/calendar-body.spec.ts
+++ b/src/material/datepicker/calendar-body.spec.ts
@@ -1,5 +1,5 @@
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-import {Component} from '@angular/core';
+import {Component, DebugElement} from '@angular/core';
import {MatCalendarBody, MatCalendarCell, MatCalendarCellCssClasses} from './calendar-body';
import {By} from '@angular/platform-browser';
@@ -21,6 +21,7 @@ describe('MatCalendarBody', () => {
describe('standard calendar body', () => {
let fixture: ComponentFixture;
let testComponent: StandardCalendarBody;
+ let calendarBodyDebugElement: DebugElement;
let calendarBodyNativeElement: Element;
let rowEls: Element[];
let labelEls: Element[];
@@ -36,7 +37,7 @@ describe('MatCalendarBody', () => {
fixture = TestBed.createComponent(StandardCalendarBody);
fixture.detectChanges();
- const calendarBodyDebugElement = fixture.debugElement.query(By.directive(MatCalendarBody));
+ calendarBodyDebugElement = fixture.debugElement.query(By.directive(MatCalendarBody));
calendarBodyNativeElement = calendarBodyDebugElement.nativeElement;
testComponent = fixture.componentInstance;
@@ -49,6 +50,14 @@ describe('MatCalendarBody', () => {
expect(cellEls.length).toBe(14);
});
+ it('sets all mat-calendar-body-cell-content role attribute to button', () => {
+ const contentCells = calendarBodyDebugElement
+ .queryAll(By.css('.mat-calendar-body-cell-content'))
+ .map(button => button.nativeElement);
+ expect(contentCells.every((button: any) => button.getAttribute('role') === 'button'))
+ .toBe(true, 'to see role="button" on every element');
+ });
+
it('highlights today', () => {
const todayCell = calendarBodyNativeElement.querySelector('.mat-calendar-body-today')!;
expect(todayCell).not.toBeNull();