diff --git a/src/lib/datepicker/calendar-body.html b/src/lib/datepicker/calendar-body.html index 01f2684b77e..50b784bb8b5 100644 --- a/src/lib/datepicker/calendar-body.html +++ b/src/lib/datepicker/calendar-body.html @@ -35,6 +35,7 @@ [class.mat-calendar-body-active]="_isActiveCell(rowIndex, colIndex)" [attr.aria-label]="item.ariaLabel" [attr.aria-disabled]="!item.enabled || null" + [attr.aria-selected]="selectedValue === item.value" (click)="_cellClicked(item)" [style.width.%]="100 / numCols" [style.paddingTop.%]="50 * cellAspectRatio / numCols" diff --git a/src/lib/datepicker/calendar-body.spec.ts b/src/lib/datepicker/calendar-body.spec.ts index ea5052d7b66..30ea688a378 100644 --- a/src/lib/datepicker/calendar-body.spec.ts +++ b/src/lib/datepicker/calendar-body.spec.ts @@ -23,21 +23,21 @@ describe('MatCalendarBody', () => { let fixture: ComponentFixture; let testComponent: StandardCalendarBody; let calendarBodyNativeElement: Element; - let rowEls: NodeListOf; - let labelEls: NodeListOf; - let cellEls: NodeListOf; + let rowEls: Element[]; + let labelEls: Element[]; + let cellEls: Element[]; - let refreshElementLists = () => { - rowEls = calendarBodyNativeElement.querySelectorAll('tr'); - labelEls = calendarBodyNativeElement.querySelectorAll('.mat-calendar-body-label'); - cellEls = calendarBodyNativeElement.querySelectorAll('.mat-calendar-body-cell'); - }; + function refreshElementLists() { + rowEls = Array.from(calendarBodyNativeElement.querySelectorAll('tr')); + labelEls = Array.from(calendarBodyNativeElement.querySelectorAll('.mat-calendar-body-label')); + cellEls = Array.from(calendarBodyNativeElement.querySelectorAll('.mat-calendar-body-cell')); + } beforeEach(() => { fixture = TestBed.createComponent(StandardCalendarBody); fixture.detectChanges(); - let calendarBodyDebugElement = fixture.debugElement.query(By.directive(MatCalendarBody)); + const calendarBodyDebugElement = fixture.debugElement.query(By.directive(MatCalendarBody)); calendarBodyNativeElement = calendarBodyDebugElement.nativeElement; testComponent = fixture.componentInstance; @@ -51,17 +51,26 @@ describe('MatCalendarBody', () => { }); it('highlights today', () => { - let todayCell = calendarBodyNativeElement.querySelector('.mat-calendar-body-today')!; + const todayCell = calendarBodyNativeElement.querySelector('.mat-calendar-body-today')!; expect(todayCell).not.toBeNull(); expect(todayCell.innerHTML.trim()).toBe('3'); }); it('highlights selected', () => { - let selectedCell = calendarBodyNativeElement.querySelector('.mat-calendar-body-selected')!; + const selectedCell = calendarBodyNativeElement.querySelector('.mat-calendar-body-selected')!; expect(selectedCell).not.toBeNull(); expect(selectedCell.innerHTML.trim()).toBe('4'); }); + it('should set aria-selected correctly', () => { + const selectedCells = cellEls.filter(c => c.getAttribute('aria-selected') === 'true'); + const deselectedCells = cellEls.filter(c => c.getAttribute('aria-selected') === 'false'); + + expect(selectedCells.length).toBe(1, 'Expected one cell to be marked as selected.'); + expect(deselectedCells.length) + .toBe(cellEls.length - 1, 'Expected remaining cells to be marked as deselected.'); + }); + it('places label in first row if space is available', () => { testComponent.rows[0] = testComponent.rows[0].slice(3); testComponent.rows = testComponent.rows.slice(); @@ -77,7 +86,7 @@ describe('MatCalendarBody', () => { }); it('cell should be selected on click', () => { - let todayElement = + const todayElement = calendarBodyNativeElement.querySelector('.mat-calendar-body-today') as HTMLElement; todayElement.click(); fixture.detectChanges(); @@ -96,20 +105,20 @@ describe('MatCalendarBody', () => { let fixture: ComponentFixture; let testComponent: CalendarBodyWithDisabledCells; let calendarBodyNativeElement: Element; - let cellEls: NodeListOf; + let cellEls: HTMLElement[]; beforeEach(() => { fixture = TestBed.createComponent(CalendarBodyWithDisabledCells); fixture.detectChanges(); - let calendarBodyDebugElement = fixture.debugElement.query(By.directive(MatCalendarBody)); + const calendarBodyDebugElement = fixture.debugElement.query(By.directive(MatCalendarBody)); calendarBodyNativeElement = calendarBodyDebugElement.nativeElement; testComponent = fixture.componentInstance; - cellEls = calendarBodyNativeElement.querySelectorAll('.mat-calendar-body-cell'); + cellEls = Array.from(calendarBodyNativeElement.querySelectorAll('.mat-calendar-body-cell')); }); it('should only allow selection of disabled cells when allowDisabledSelection is true', () => { - (cellEls[0] as HTMLElement).click(); + cellEls[0].click(); fixture.detectChanges(); expect(testComponent.selected).toBeFalsy(); @@ -117,7 +126,7 @@ describe('MatCalendarBody', () => { testComponent.allowDisabledSelection = true; fixture.detectChanges(); - (cellEls[0] as HTMLElement).click(); + cellEls[0].click(); fixture.detectChanges(); expect(testComponent.selected).toBe(1);