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();