Skip to content

Commit 173d480

Browse files
feat(material/datepicker): Add aria-current="date" to the current date's cell
1 parent 83da73f commit 173d480

File tree

2 files changed

+36
-1
lines changed

2 files changed

+36
-1
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: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,11 +50,45 @@ describe('MatCalendarBody', () => {
5050
});
5151

5252
it('highlights today', () => {
53-
const todayCell = calendarBodyNativeElement.querySelector('.mat-calendar-body-today')!;
53+
const todayCells = calendarBodyNativeElement.querySelectorAll(
54+
'.mat-calendar-body-today')!;
55+
expect(todayCells.length).toBe(1);
56+
57+
const todayCell = todayCells[0];
58+
59+
expect(todayCell).not.toBeNull();
60+
expect(todayCell.innerHTML.trim()).toBe('3');
61+
});
62+
63+
it('sets aria-current="date" on today', () => {
64+
const todayCells = calendarBodyNativeElement.querySelectorAll(
65+
'[aria-current="date"] .mat-calendar-body-today')!;
66+
expect(todayCells.length).toBe(1);
67+
68+
const todayCell = todayCells[0];
69+
5470
expect(todayCell).not.toBeNull();
5571
expect(todayCell.innerHTML.trim()).toBe('3');
5672
});
5773

74+
it('does not highlight today if today is not within the scope', () => {
75+
testComponent.todayValue = 100000;
76+
fixture.detectChanges();
77+
78+
const todayCell = calendarBodyNativeElement.querySelector('.mat-calendar-body-today')!;
79+
expect(todayCell).toBeNull();
80+
});
81+
82+
it('does not set aria-current="date" on any cell if today is not ' +
83+
'the scope', () => {
84+
testComponent.todayValue = 100000;
85+
fixture.detectChanges();
86+
87+
const todayCell = calendarBodyNativeElement.querySelector(
88+
'[aria-current="date"] .mat-calendar-body-today')!;
89+
expect(todayCell).toBeNull();
90+
});
91+
5892
it('highlights selected', () => {
5993
const selectedCell = calendarBodyNativeElement.querySelector('.mat-calendar-body-selected')!;
6094
expect(selectedCell).not.toBeNull();

0 commit comments

Comments
 (0)