diff --git a/packages/main/cypress/specs/Calendar.cy.tsx b/packages/main/cypress/specs/Calendar.cy.tsx
index cabc564f7a6f0..a289427fb580d 100644
--- a/packages/main/cypress/specs/Calendar.cy.tsx
+++ b/packages/main/cypress/specs/Calendar.cy.tsx
@@ -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(
+
+
+
+ );
+
+ cy.get("#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(
+
+
+
+ );
+
+ cy.get("#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", () => {
diff --git a/packages/main/src/DayPicker.ts b/packages/main/src/DayPicker.ts
index b145a3b579200..e14d1a2e7392e 100644
--- a/packages/main/src/DayPicker.ts
+++ b/packages/main/src/DayPicker.ts
@@ -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
}
@@ -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
@@ -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)) {
@@ -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();