fix(ui5-calendar): year button accessibility (SAP#9255)

Fixes: SAP#9107

Author: unazko

packages/main/src/Calendar.ts

@@ -591,6 +591,14 @@ class Calendar extends CalendarPart {
 		return this._currentPicker === "month" || this._currentPicker === "year";
 	}
 
+	/**
+	 * The year button is hidden when the year picker is shown
+	 * @private
+	 */
+	get _isHeaderYearButtonHidden(): boolean {
+		return this._currentPicker === "year";
+	}
+
 	get _isDayPickerHidden() {
 		return this._currentPicker !== "day";
 	}

packages/main/src/CalendarHeader.hbs

@@ -29,6 +29,7 @@
 		<div
 			data-ui5-cal-header-btn-year
 			class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
+			?hidden="{{_isHeaderYearButtonHidden}}"
 			tabindex="0"
 			role="button"
 			@click={{onHeaderShowYearPress}}

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

@@ -431,4 +431,16 @@ describe("Calendar general interaction", () => {
 
 		assert.strictEqual(specialDate.length, 1, "Special date is rendered");
 	});
+
+	it("Calendar header buttons visibility", async  () => {
+		const calendarHeader = await browser.$("#calendar1").shadow$(".ui5-calheader");
+		const monthButton = await calendarHeader.shadow$(`[data-ui5-cal-header-btn-month]`);
+		const yearButton = await calendarHeader.shadow$(`[data-ui5-cal-header-btn-year]`);
+
+		await monthButton.click();
+		assert.ok(monthButton.hasAttribute("hidden"), "The month button is hidden");
+
+		await yearButton.click();
+		assert.ok(yearButton.hasAttribute("hidden"), "The year button is hidden");
+	});
 });