fix(ui5-calendar): improve accessibility announcements

packages/main/cypress/specs/Calendar.cy.tsx

@@ -957,3 +957,300 @@ describe("Calendar general interaction", () => {
 			.should("have.text", "Sun");
 	});
 });
+
+describe("Calendar accessibility", () => {
+	it("Should have proper aria-label attributes on header buttons", () => {
+		const date = new Date(Date.UTC(2000, 10, 22, 0, 0, 0));
+		cy.mount(getDefaultCalendar(date));
+
+		cy.get<Calendar>("#calendar1")
+			.shadow()
+			.find(".ui5-calheader")
+			.as("calheader");
+
+		// Check month button aria-label
+		cy.get("@calheader")
+			.find("[data-ui5-cal-header-btn-month]")
+			.should("have.attr", "aria-label")
+			.and("contain", "Month November");
+
+		// Check year button aria-label
+		cy.get("@calheader")
+			.find("[data-ui5-cal-header-btn-year]")
+			.should("have.attr", "aria-label")
+			.and("contain", "Year 2000");
+	});
+
+	it("Should have proper aria-description attributes on header buttons", () => {
+		const date = new Date(Date.UTC(2000, 10, 22, 0, 0, 0));
+		cy.mount(getDefaultCalendar(date));
+
+		cy.get<Calendar>("#calendar1")
+			.shadow()
+			.find(".ui5-calheader")
+			.as("calheader");
+
+		// Check month button aria-description
+		cy.get("@calheader")
+			.find("[data-ui5-cal-header-btn-month]")
+			.should("have.attr", "aria-description")
+			.and("contain", "Month November");
+
+		// Check year button aria-description  
+		cy.get("@calheader")
+			.find("[data-ui5-cal-header-btn-year]")
+			.should("have.attr", "aria-description")
+			.and("contain", "Year 2000");
+	});
+
+	it("Should have proper title (tooltip) attributes on header buttons", () => {
+		const date = new Date(Date.UTC(2000, 10, 22, 0, 0, 0));
+		cy.mount(getDefaultCalendar(date));
+
+		cy.get<Calendar>("#calendar1")
+			.shadow()
+			.find(".ui5-calheader")
+			.as("calheader");
+
+		// Check month button title includes both label and shortcut
+		cy.get("@calheader")
+			.find("[data-ui5-cal-header-btn-month]")
+			.should("have.attr", "title")
+			.and("contain", "Month November")
+			.and("contain", "(F4)");
+
+		// Check year button title includes both label and shortcut
+		cy.get("@calheader")
+			.find("[data-ui5-cal-header-btn-year]")
+			.should("have.attr", "title")
+			.and("contain", "Year 2000")
+			.and("contain", "(Shift + F4)");
+	});
+
+	it("Should have proper aria-keyshortcuts attributes on header buttons", () => {
+		const date = new Date(Date.UTC(2000, 10, 22, 0, 0, 0));
+		cy.mount(getDefaultCalendar(date));
+
+		cy.get<Calendar>("#calendar1")
+			.shadow()
+			.find(".ui5-calheader")
+			.as("calheader");
+
+		// Check month button keyboard shortcut
+		cy.get("@calheader")
+			.find("[data-ui5-cal-header-btn-month]")
+			.should("have.attr", "aria-keyshortcuts", "F4");
+
+		// Check year button keyboard shortcut
+		cy.get("@calheader")
+			.find("[data-ui5-cal-header-btn-year]")
+			.should("have.attr", "aria-keyshortcuts", "Shift + F4");
+	});
+
+	it("Should have proper accessibility attributes on year range button when visible", () => {
+		const date = new Date(Date.UTC(2000, 10, 22, 0, 0, 0));
+		cy.mount(getDefaultCalendar(date));
+
+		// Navigate to year picker first to make year range button visible
+		cy.get<Calendar>("#calendar1")
+			.shadow()
+			.find("[data-ui5-cal-header-btn-year]")
+			.realClick();
+
+		// Now check year range button accessibility attributes
+		cy.get<Calendar>("#calendar1")
+			.shadow()
+			.find(".ui5-calheader")
+			.find("[data-ui5-cal-header-btn-year-range]")
+			.as("yearRangeBtn");
+
+		// Check aria-label for year range
+		cy.get("@yearRangeBtn")
+			.should("have.attr", "aria-label")
+			.and("contain", "Year range from")
+			.and("contain", "1991")
+			.and("contain", "to")
+			.and("contain", "2010");
+
+		// Check aria-description for year range
+		cy.get("@yearRangeBtn")
+			.should("have.attr", "aria-description")
+			.and("contain", "Year range from")
+			.and("contain", "1991")
+			.and("contain", "to")
+			.and("contain", "2010");
+
+		// Check title includes both label and shortcut
+		cy.get("@yearRangeBtn")
+			.should("have.attr", "title")
+			.and("contain", "Year range from")
+			.and("contain", "1991")
+			.and("contain", "to")
+			.and("contain", "2010")
+			.and("contain", "(Shift + F4)");
+
+		// Check keyboard shortcut
+		cy.get("@yearRangeBtn")
+			.should("have.attr", "aria-keyshortcuts", "Shift + F4");
+	});
+
+	it("Should update accessibility attributes when navigating between different months", () => {
+		const date = new Date(Date.UTC(2000, 10, 22, 0, 0, 0)); // November 2000
+		cy.mount(getDefaultCalendar(date));
+
+		cy.get<Calendar>("#calendar1")
+			.shadow()
+			.find(".ui5-calheader")
+			.as("calheader");
+
+		// Initial check - November 2000
+		cy.get("@calheader")
+			.find("[data-ui5-cal-header-btn-month]")
+			.should("have.attr", "aria-label")
+			.and("contain", "Month November");
+
+		// Navigate to next month
+		cy.get("@calheader")
+			.find("[data-ui5-cal-header-btn-next]")
+			.realClick();
+
+		// Check updated aria-label - December 2000
+		cy.get("@calheader")
+			.find("[data-ui5-cal-header-btn-month]")
+			.should("have.attr", "aria-label")
+			.and("contain", "Month December");
+
+		// Navigate to previous month twice
+		cy.get("@calheader")
+			.find("[data-ui5-cal-header-btn-prev]")
+			.realClick()
+			.realClick();
+
+		// Check updated aria-label - October 2000
+		cy.get("@calheader")
+			.find("[data-ui5-cal-header-btn-month]")
+			.should("have.attr", "aria-label")
+			.and("contain", "Month October");
+	});
+
+	it("Should update accessibility attributes when navigating between different years", () => {
+		const date = new Date(Date.UTC(2000, 10, 22, 0, 0, 0)); // November 2000
+		cy.mount(getDefaultCalendar(date));
+
+		cy.get<Calendar>("#calendar1")
+			.shadow()
+			.find(".ui5-calheader")
+			.as("calheader");
+
+		// Initial check - Year 2000
+		cy.get("@calheader")
+			.find("[data-ui5-cal-header-btn-year]")
+			.should("have.attr", "aria-label")
+			.and("contain", "Year 2000");
+
+		// Navigate to day picker and use keyboard shortcuts to change year
+		cy.get<Calendar>("#calendar1")
+			.shadow()
+			.find("[ui5-daypicker]")
+			.shadow()
+			.find("[tabindex='0']")
+			.realClick()
+			.realPress(["Shift", "PageDown"]); // Next year
+
+		// Check updated aria-label - Year 2001
+		cy.get("@calheader")
+			.find("[data-ui5-cal-header-btn-year]")
+			.should("have.attr", "aria-label")
+			.and("contain", "Year 2001");
+
+		// Navigate back one year
+		cy.focused()
+			.realPress(["Shift", "PageUp"]); // Previous year
+
+		// Check updated aria-label - Year 2000
+		cy.get("@calheader")
+			.find("[data-ui5-cal-header-btn-year]")
+			.should("have.attr", "aria-label")
+			.and("contain", "Year 2000");
+	});
+
+	it("Should maintain accessibility attributes consistency between primary and secondary calendar types", () => {
+		const date = new Date(Date.UTC(2000, 10, 22, 0, 0, 0)); 
+		cy.mount(
+			<Calendar id="calendar1" timestamp={date.valueOf() / 1000} formatPattern="dd/MM/yyyy" primaryCalendarType="Gregorian" secondaryCalendarType="Islamic">
+				<CalendarDate value="22/11/2000"></CalendarDate>
+			</Calendar>
+		);
+
+		cy.get<Calendar>("#calendar1")
+			.shadow()
+			.find(".ui5-calheader")
+			.as("calheader");
+
+		// Check that month button still has proper aria-label with dual calendar
+		cy.get("@calheader")
+			.find("[data-ui5-cal-header-btn-month]")
+			.should("have.attr", "aria-label")
+			.and("contain", "Month");
+
+		// Check that year button still has proper aria-label with dual calendar
+		cy.get("@calheader")
+			.find("[data-ui5-cal-header-btn-year]")
+			.should("have.attr", "aria-label")
+			.and("contain", "Year");
+
+		// Verify tooltips still contain shortcuts
+		cy.get("@calheader")
+			.find("[data-ui5-cal-header-btn-month]")
+			.should("have.attr", "title")
+			.and("contain", "(F4)");
+
+		cy.get("@calheader")
+			.find("[data-ui5-cal-header-btn-year]")
+			.should("have.attr", "title")
+			.and("contain", "(Shift + F4)");
+	});
+
+	it("Should have proper aria-labels for range selection dates (First, Between, Last)", () => {
+		// Mount calendar with predefined range selection (Jan 20-22, 2021) similar to Calendar.html
+		cy.mount(
+			<Calendar id="calendar1" selectionMode="Range" formatPattern="MMM dd, yyyy">
+				<CalendarDateRange startValue="Jan 20, 2021" endValue="Jan 22, 2021"></CalendarDateRange>
+			</Calendar>
+		);
+
+		// Find all selected day cells using the part attribute
+		cy.get<Calendar>("#calendar1")
+			.shadow()
+			.find("[ui5-daypicker]")
+			.shadow()
+			.find("[part*='day-cell-selected']")
+			.as("selectedDays");
+
+		// Should have exactly 3 selected days (Jan 20, 21, 22)
+		cy.get("@selectedDays")
+			.should("have.length", 3);
+
+		// Get the selected days and verify their aria-labels
+		cy.get("@selectedDays").each(($day, index) => {
+			cy.wrap($day).should("have.attr", "aria-label");
+
+			if (index === 0) {
+				// First day should contain "First date of range"
+				cy.wrap($day)
+					.should("have.attr", "aria-label")
+					.and("contain", "First date of range");
+			} else if (index === 1) {
+				// Middle day should contain "in a selected range"
+				cy.wrap($day)
+					.should("have.attr", "aria-label")
+					.and("contain", "in a selected range");
+			} else if (index === 2) {
+				// Last day should contain "Last date of range"
+				cy.wrap($day)
+					.should("have.attr", "aria-label")
+					.and("contain", "Last date of range");
+			}
+		});
+	});
+});