fix(ui5-calendar): opening month/year pickers with space now works correct (#3561)

Fixes: #3555

Author: tsanislavgatev

packages/main/src/CalendarHeader.hbs

@@ -19,6 +19,7 @@
 			tabindex="0"
 			@click={{onMonthButtonClick}}
 			@keydown={{onMonthButtonKeyDown}}
+			@keyup={{onMonthButtonKeyUp}}
 		>
 			{{_monthButtonText}}
 		</div>
@@ -29,6 +30,7 @@
 			tabindex="0"
 			@click={{onYearButtonClick}}
 			@keydown={{onYearButtonKeyDown}}
+			@keyup={{onYearButtonKeyUp}}
 		>
 			{{_yearButtonText}}
 		</div>

packages/main/src/CalendarHeader.js

@@ -117,7 +117,17 @@ class CalendarHeader extends UI5Element {
 	}
 
 	onMonthButtonKeyDown(event) {
-		if (isSpace(event) || isEnter(event)) {
+		if (isSpace(event)) {
+			event.preventDefault();
+		}
+
+		if (isEnter(event)) {
+			this.fireEvent("show-month-press", event);
+		}
+	}
+
+	onMonthButtonKeyUp(event) {
+		if (isSpace(event)) {
 			event.preventDefault();
 			this.fireEvent("show-month-press", event);
 		}
@@ -128,7 +138,17 @@ class CalendarHeader extends UI5Element {
 	}
 
 	onYearButtonKeyDown(event) {
-		if (isSpace(event) || isEnter(event)) {
+		if (isSpace(event)) {
+			event.preventDefault();
+		}
+
+		if (isEnter(event)) {
+			this.fireEvent("show-year-press", event);
+		}
+	}
+
+	onYearButtonKeyUp(event) {
+		if (isSpace(event)) {
 			event.preventDefault();
 			this.fireEvent("show-year-press", event);
 		}

packages/main/test/specs/Calendar.spec.js

@@ -75,6 +75,43 @@ describe("Calendar general interaction", () => {
 		assert.ok(new Date(parseInt(focusedItemTimestamp) * 1000).getUTCFullYear() === 1997, "The focused year is 1997");
 	});
 
+	it("Calendar focuses the selected month when monthpicker is opened with space", () => {
+		browser.url(`http://localhost:${PORT}/test-resources/pages/Calendar.html`);
+		const calendar = browser.$("#calendar1");
+		const dayPicker = calendar.shadow$("ui5-daypicker");
+		const monthPicker = calendar.shadow$("ui5-monthpicker");
+		const currentDayItem = dayPicker.shadow$(`div[data-sap-timestamp="974851200"]`);
+		calendar.setAttribute("timestamp", new Date(Date.UTC(2000, 10, 22, 0, 0, 0)).valueOf() / 1000);
+
+		currentDayItem.click();
+		browser.keys("Tab");
+		browser.keys("Space");
+
+		const focusedItemTimestamp = monthPicker.shadow$(`[tabindex="0"]`).getAttribute("data-sap-timestamp");
+		const isHidden = monthPicker.getAttribute("hidden");
+		assert.ok(!isHidden, "The monthpicker is present");
+		assert.ok(new Date(parseInt(focusedItemTimestamp) * 1000).getUTCMonth() === 10, "The focused month is November");
+	});
+
+	it("Calendar focuses the selected year when yearpicker is opened with space", () => {
+		browser.url(`http://localhost:${PORT}/test-resources/pages/Calendar.html`);
+		const calendar = browser.$("#calendar1");
+		const dayPicker = calendar.shadow$("ui5-daypicker");
+		const yearPicker = calendar.shadow$("ui5-yearpicker");
+		const currentDayItem = dayPicker.shadow$(`div[data-sap-timestamp="974851200"]`);
+		calendar.setAttribute("timestamp", new Date(Date.UTC(2000, 10, 22, 0, 0, 0)).valueOf() / 1000);
+
+		currentDayItem.click();
+		browser.keys("Tab");
+		browser.keys("Tab");
+		browser.keys("Space");
+
+		const isHidden = yearPicker.getAttribute("hidden");
+		assert.ok(!isHidden, "The yearpicker is present");
+		const focusedItemTimestamp = yearPicker.shadow$(`[tabindex="0"]`).getAttribute("data-sap-timestamp");
+		assert.ok(new Date(parseInt(focusedItemTimestamp) * 1000).getUTCFullYear() === 2000, "The focused year is 2000");
+	});
+
 	it("Calendar doesn't mark year as selected when there are no selected dates", () => {
 		browser.url(`http://localhost:${PORT}/test-resources/pages/Calendar.html`);
 		const calendar = browser.$("#calendar1");