Visitar URL original
USWDS - Date Picker: Add aria-current to today's date button by daresTheDevil · Pull Request #6593 · uswds/uswds · GitHub
Skip to content

USWDS - Date Picker: Add aria-current to today's date button #6593

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ethangardner merged 6 commits into from
Jun 3, 2026
Merged

USWDS - Date Picker: Add aria-current to today's date button #6593

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1e1809e
fix(date-picker): add aria-current='date' to today's date button
daresTheDevil Mar 27, 2026
8fb7647
Merge branch 'develop' into fix/date-picker-aria-current-6546
annepetersen Mar 30, 2026
f523744
Merge branch 'develop' into fix/date-picker-aria-current-6546
annepetersen Apr 29, 2026
43a99bf
Merge branch 'develop' into fix/date-picker-aria-current-6546
annepetersen May 29, 2026
ab9919a
Merge branch 'develop' into fix/date-picker-aria-current-6546
ethangardner Jun 1, 2026
d20615b
Merge branch 'develop' into fix/date-picker-aria-current-6546
ethangardner Jun 3, 2026
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
6 changes: 5 additions & 1 deletion packages/usa-date-picker/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1047,7 +1047,8 @@ const renderCalendar = (el, _dateToDisplay) => {
classes.push(CALENDAR_DATE_SELECTED_CLASS);
}

if (isSameDay(dateToRender, todaysDate)) {
const isToday = isSameDay(dateToRender, todaysDate);
if (isToday) {
classes.push(CALENDAR_DATE_TODAY_CLASS);
}

Expand Down Expand Up @@ -1096,6 +1097,9 @@ const renderCalendar = (el, _dateToDisplay) => {
Sanitizer.escapeHTML`${day} ${monthStr} ${year} ${dayStr}`,
);
btn.setAttribute("aria-selected", isSelected ? "true" : "false");
if (isToday) {
btn.setAttribute("aria-current", "date");
}
if (isDisabled === true) {
btn.disabled = true;
}
Expand Down
31 changes: 31 additions & 0 deletions packages/usa-date-picker/src/test/date-picker.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,37 @@ tests.forEach(({ name, selector: containerSelector }) => {
);
});

it("should set aria-current='date' on today's date button", () => {
EVENTS.click(button);

const todayBtn = getCalendarEl().querySelector(
".usa-date-picker__calendar__date--today",
);

assert.ok(todayBtn, "today's date button exists");
assert.strictEqual(
todayBtn.getAttribute("aria-current"),
"date",
"today's date button has aria-current='date'",
);
});

it("should not set aria-current on non-today date buttons", () => {
EVENTS.click(button);

const otherBtns = getCalendarEl().querySelectorAll(
".usa-date-picker__calendar__date:not(.usa-date-picker__calendar__date--today)",
);

otherBtns.forEach((btn) => {
assert.strictEqual(
btn.getAttribute("aria-current"),
null,
"non-today button should not have aria-current",
);
});
});

it("should hide the calendar when the date picker button is clicked and the calendar is already open", () => {
EVENTS.click(button);
assert.strictEqual(
Expand Down