Skip to content

Commit 9889151

Browse files
ByzantineFailuremmalerba
authored andcommitted
fix(material/datepicker): Add aria-current="date" to the current date's cell
1 parent 0e48905 commit 9889151

File tree

2 files changed

+37
-2
lines changed

2 files changed

+37
-2
lines changed

src/material/datepicker/calendar-body.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
4949
[attr.aria-label]="item.ariaLabel"
5050
[attr.aria-disabled]="!item.enabled || null"
5151
[attr.aria-selected]="_isSelected(item.compareValue)"
52+
[attr.aria-current]="todayValue === item.compareValue ? 'date' : null"
5253
(click)="_cellClicked(item, $event)"
5354
[style.width]="_cellWidth"
5455
[style.paddingTop]="_cellPadding"

src/material/datepicker/calendar-body.spec.ts

Lines changed: 36 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,43 @@ describe('MatCalendarBody', () => {
4747
});
4848

4949
it('highlights today', () => {
50-
const todayCell = calendarBodyNativeElement.querySelector('.mat-calendar-body-today')!;
50+
const todayCells = calendarBodyNativeElement.querySelectorAll('.mat-calendar-body-today')!;
51+
expect(todayCells.length).toBe(1);
52+
53+
const todayCell = todayCells[0];
54+
5155
expect(todayCell).not.toBeNull();
52-
expect(todayCell.innerHTML.trim()).toBe('3');
56+
expect(todayCell.textContent!.trim()).toBe('3');
57+
});
58+
59+
it('sets aria-current="date" on today', () => {
60+
const todayCells = calendarBodyNativeElement.querySelectorAll(
61+
'[aria-current="date"] .mat-calendar-body-today',
62+
)!;
63+
expect(todayCells.length).toBe(1);
64+
65+
const todayCell = todayCells[0];
66+
67+
expect(todayCell).not.toBeNull();
68+
expect(todayCell.textContent!.trim()).toBe('3');
69+
});
70+
71+
it('does not highlight today if today is not within the scope', () => {
72+
testComponent.todayValue = 100000;
73+
fixture.detectChanges();
74+
75+
const todayCell = calendarBodyNativeElement.querySelector('.mat-calendar-body-today')!;
76+
expect(todayCell).toBeNull();
77+
});
78+
79+
it('does not set aria-current="date" on any cell if today is not ' + 'the scope', () => {
80+
testComponent.todayValue = 100000;
81+
fixture.detectChanges();
82+
83+
const todayCell = calendarBodyNativeElement.querySelector(
84+
'[aria-current="date"] .mat-calendar-body-today',
85+
)!;
86+
expect(todayCell).toBeNull();
5387
});
5488

5589
it('highlights selected', () => {

0 commit comments

Comments
 (0)