Skip to content

fix(ui5-calendar): format aria-label day cell value #13838

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

Open
GDamyanov wants to merge 2 commits into
base: main
Choose a base branch
from
+46 −12
Open

fix(ui5-calendar): format aria-label day cell value #13838

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
04f977c
fix: format aria-label value according current locale
GDamyanov Jul 17, 2026
0fb0dbd
fix: lint errors
GDamyanov Jul 17, 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
32 changes: 32 additions & 0 deletions packages/main/cypress/specs/Calendar.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1605,6 +1605,38 @@ describe("Calendar accessibility", () => {
}
});
});

it("Should format day cell aria-label according to the current locale", () => {
const date = new Date(Date.UTC(2024, 0, 15, 0, 0, 0));
cy.mount(
<Calendar id="calendar1" timestamp={date.valueOf() / 1000} primaryCalendarType="Gregorian">
<CalendarDate value="Jan 15, 2024"></CalendarDate>
</Calendar>
);

cy.get<Calendar>("#calendar1")
.shadow()
.find("[ui5-daypicker]")
.shadow()
.find("[tabindex='0']")
.should("have.attr", "aria-label", "January 15, 2024");
});

it("Should append secondary Islamic calendar date in day cell aria-label", () => {
const date = new Date(Date.UTC(2024, 0, 15, 0, 0, 0));
cy.mount(
<Calendar id="calendar1" timestamp={date.valueOf() / 1000} primaryCalendarType="Gregorian" secondaryCalendarType="Islamic">
<CalendarDate value="Jan 15, 2024"></CalendarDate>
</Calendar>
);

cy.get<Calendar>("#calendar1")
.shadow()
.find("[ui5-daypicker]")
.shadow()
.find("[tabindex='0']")
.should("have.attr", "aria-label", "January 15, 2024 Rajab 4, 1445 AH");
});
});

describe("Day Picker Tests", () => {
Expand Down
26 changes: 14 additions & 12 deletions packages/main/src/DayPicker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,16 +217,15 @@ class DayPicker extends CalendarPart implements ICalendarPicker {

onBeforeRendering() {
const localeData = getCachedLocaleDataInstance(getLocale());
this._buildWeeks(localeData);
this._buildWeeks();
this._buildDayNames(localeData);
}

/**
* Builds the "_weeks" object that represents the month.
* @param localeData
* @private
*/
_buildWeeks(localeData: LocaleData) {
_buildWeeks() {
if (this._hidden) {
return; // Optimization to not do any work unless the current picker
}
Expand All @@ -235,8 +234,6 @@ class DayPicker extends CalendarPart implements ICalendarPicker {

const firstDayOfWeek = this._getFirstDayOfWeek();
const specialCalendarDates = this._specialCalendarDates;
const monthsNames = localeData.getMonths("wide", this._primaryCalendarType);
const secondaryMonthsNames = this.hasSecondaryCalendarType ? localeData.getMonths("wide", this.secondaryCalendarType) : [];
const nonWorkingDayLabel = DayPicker.i18nBundle.getText(DAY_PICKER_NON_WORKING_DAY);
const todayLabel = DayPicker.i18nBundle.getText(DAY_PICKER_TODAY);
const tempDate = this._getFirstDay(); // date that will be changed by 1 day 42 times
Expand Down Expand Up @@ -277,15 +274,12 @@ class DayPicker extends CalendarPart implements ICalendarPicker {
: "";
const todayAriaLabel = isToday ? `${todayLabel} ` : "";

const tempSecondDateNumber = tempSecondDate ? tempSecondDate.getDate() : "";
const tempSecondYearNumber = tempSecondDate ? tempSecondDate.getYear() : "";
const secondaryMonthsNamesString = secondaryMonthsNames.length > 0 ? secondaryMonthsNames[tempSecondDate!.getMonth()] : "";

const tooltip = `${todayAriaLabel}${nonWorkingAriaLabel}${unnamedCalendarTypeLabel}`.trim();

let ariaLabel = this.hasSecondaryCalendarType
? `${monthsNames[tempDate.getMonth()]} ${tempDate.getDate()}, ${tempDate.getYear()}; ${secondaryMonthsNamesString} ${tempSecondDateNumber}, ${tempSecondYearNumber} ${tooltip}`.trim()
: `${monthsNames[tempDate.getMonth()]} ${tempDate.getDate()}, ${tempDate.getYear()} ${tooltip}`.trim();
let ariaLabel = this._formatLong.format(tempDate.toUTCJSDate(), true);
if (this.hasSecondaryCalendarType && tempSecondDate) {
ariaLabel += ` ${this._formatLongSecondary.format(tempSecondDate.toUTCJSDate(), true)}`;
}

if (this.selectionMode === CalendarSelectionMode.Range) {
if (isSelected && this._isRangeEndDate(timestamp)) {
Expand Down Expand Up @@ -1004,6 +998,14 @@ class DayPicker extends CalendarPart implements ICalendarPicker {
? `${this._primaryCalendarType} calendar with secondary ${this.secondaryCalendarType as string} calendar`
: `${this._primaryCalendarType} calendar`;
}

get _formatLong() {
return DateFormat.getDateInstance({ style: "long", calendarType: this._primaryCalendarType });
}

get _formatLongSecondary() {
return DateFormat.getDateInstance({ style: "long", calendarType: this._secondaryCalendarType });
}
}

DayPicker.define();
Expand Down
Loading