From 04f977c6b2d44408a866330696572c2ffb4c6733 Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Fri, 17 Jul 2026 11:27:27 +0300 Subject: [PATCH 1/3] fix: format aria-label value according current locale --- packages/main/cypress/specs/Calendar.cy.tsx | 32 +++++++++++++++++++++ packages/main/src/DayPicker.ts | 15 ++++++++-- 2 files changed, 44 insertions(+), 3 deletions(-) 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..cc3f2644b7f12 100644 --- a/packages/main/src/DayPicker.ts +++ b/packages/main/src/DayPicker.ts @@ -283,9 +283,10 @@ class DayPicker extends CalendarPart implements ICalendarPicker { 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 +1005,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(); From 0fb0dbd3e3bae625451a18e83cfe0798e8fb42b6 Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Fri, 17 Jul 2026 11:36:35 +0300 Subject: [PATCH 2/3] fix: lint errors --- packages/main/src/DayPicker.ts | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/packages/main/src/DayPicker.ts b/packages/main/src/DayPicker.ts index cc3f2644b7f12..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,10 +274,6 @@ 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._formatLong.format(tempDate.toUTCJSDate(), true); From 2c9d7fe4461c81d05ed21ac40d08a2bf3c392892 Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Tue, 21 Jul 2026 11:56:07 +0300 Subject: [PATCH 3/3] fix: add more detailed tests --- packages/main/cypress/specs/Calendar.cy.tsx | 28 ++++++++++++++++++++- packages/main/test/pages/Calendar.html | 4 +-- 2 files changed, 29 insertions(+), 3 deletions(-) diff --git a/packages/main/cypress/specs/Calendar.cy.tsx b/packages/main/cypress/specs/Calendar.cy.tsx index a289427fb580d..197d418dc4a47 100644 --- a/packages/main/cypress/specs/Calendar.cy.tsx +++ b/packages/main/cypress/specs/Calendar.cy.tsx @@ -9,6 +9,8 @@ import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js"; import { resetConfiguration } from "@ui5/webcomponents-base/dist/InitialConfiguration.js"; import { getFirstDayOfWeek } from "@ui5/webcomponents-base/dist/config/FormatSettings.js"; import CalendarSelectionMode from "../../src/types/CalendarSelectionMode.js"; +import { setLanguage } from "@ui5/webcomponents-base/dist/config/Language.js"; +import "../../src/Assets.js"; const getDefaultCalendar = (date: Date) => { const calDate = new Date(date); @@ -1291,6 +1293,11 @@ describe("Calendar general interaction", () => { }); describe("Calendar accessibility", () => { + beforeEach(() => { + cy.wrap({ setLanguage }) + .then(api => { api.setLanguage("en"); }); + }); + it("Header prev/next buttons have correct title and tabindex", () => { const date = new Date(Date.UTC(2025, 0, 15, 0, 0, 0)); cy.mount(getDefaultCalendar(date)); @@ -1606,7 +1613,7 @@ describe("Calendar accessibility", () => { }); }); - it("Should format day cell aria-label according to the current locale", () => { + it("Should format day cell aria-label with en locale", () => { const date = new Date(Date.UTC(2024, 0, 15, 0, 0, 0)); cy.mount( @@ -1622,6 +1629,25 @@ describe("Calendar accessibility", () => { .should("have.attr", "aria-label", "January 15, 2024"); }); + it("Should format day cell aria-label with bg locale", () => { + cy.wrap({ setLanguage }) + .then(api => { api.setLanguage("bg"); }); + + 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", "15 януари 2024\u202fг."); + }); + 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( diff --git a/packages/main/test/pages/Calendar.html b/packages/main/test/pages/Calendar.html index 843655e2080be..724bc02a0bb3d 100644 --- a/packages/main/test/pages/Calendar.html +++ b/packages/main/test/pages/Calendar.html @@ -10,11 +10,11 @@ // delete Document.prototype.adoptedStyleSheets; - +