@ui5/webcomponents 0.0.0-8db0ce01a → 0.0.0-918b4fbe7

package/dist/Button.js

@@ -1,11 +1,17 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
-import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
-import isLegacyBrowser from "@ui5/webcomponents-base/dist/isLegacyBrowser.js";
-import { isPhone, isTablet } from "@ui5/webcomponents-base/dist/Device.js";
+import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import {
+	isPhone,
+	isTablet,
+	isCombi,
+	isDesktop,
+	isSafari,
+} from "@ui5/webcomponents-base/dist/Device.js";
+import isDefaultSlotProvided from "@ui5/webcomponents-base/dist/util/isDefaultSlotProvided.js";
 import ButtonDesign from "./types/ButtonDesign.js";
 import ButtonTemplate from "./generated/templates/ButtonTemplate.lit.js";
 import Icon from "./Icon.js";
@@ -14,7 +20,6 @@ import { BUTTON_ARIA_TYPE_ACCEPT, BUTTON_ARIA_TYPE_REJECT, BUTTON_ARIA_TYPE_EMPH
 
 // Styles
 import buttonCss from "./generated/themes/Button.css.js";
-import buttonIECss from "./generated/themes/Button.ie11.css.js";
 
 let isGlobalHandlerAttached = false;
 let activeButton = null;
@@ -28,10 +33,10 @@ const metadata = {
 	properties: /** @lends sap.ui.webcomponents.main.Button.prototype */ {
 
 		/**
-		 * Defines the <code>ui5-button</code> design.
+		 * Defines the component design.
 		 *
 		 * <br><br>
-		 * <b>Note:</b>
+		 * <b>The available values are:</b>
 		 *
 		 * <ul>
 		 * <li><code>Default</code></li>
@@ -39,9 +44,10 @@ const metadata = {
 		 * <li><code>Positive</code></li>
 		 * <li><code>Negative</code></li>
 		 * <li><code>Transparent</code></li>
+		 * <li><code>Attention</code></li>
 		 * </ul>
 		 *
-		 * @type {ButtonDesign}
+		 * @type {sap.ui.webcomponents.main.types.ButtonDesign}
 		 * @defaultvalue "Default"
 		 * @public
 		 */
@@ -51,9 +57,8 @@ const metadata = {
 		},
 
 		/**
-		 * Defines whether the <code>ui5-button</code> is disabled
-		 * (default is set to <code>false</code>).
-		 * A disabled <code>ui5-button</code> can't be pressed or
+		 * Defines whether the component is disabled.
+		 * A disabled component can't be pressed or
 		 * focused, and it is not in the tab chain.
 		 *
 		 * @type {boolean}
@@ -65,14 +70,12 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the icon to be displayed as graphical element within the <code>ui5-button</code>.
+		 * Defines the icon, displayed as graphical element within the component.
 		 * The SAP-icons font provides numerous options.
 		 * <br><br>
 		 * Example:
-		 * <br>
-		 * <pre>ui5-button icon="palette"</pre>
 		 *
-		 * See all the available icons in the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 * See all the available icons within the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
@@ -83,7 +86,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines whether the icon should be displayed after the <code>ui5-button</code> text.
+		 * Defines whether the icon should be displayed after the component text.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -94,23 +97,10 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the size of the icon inside the <code>ui5-button</code>.
-		 *
-		 * @type {string}
-		 * @defaultvalue undefined
-		 * @public
-		 * @since 1.0.0-rc.8
-		 */
-		iconSize: {
-			type: String,
-			defaultValue: undefined,
-		},
-
-		/**
-		 * When set to <code>true</code>, the <code>ui5-button</code> will
-		 * automatically submit the nearest form element upon <code>press</code>.
+		 * When set to <code>true</code>, the component will
+		 * automatically submit the nearest HTML form element on <code>press</code>.
 		 * <br><br>
-		 * <b>Important:</b> For the <code>submits</code> property to have effect, you must add the following import to your project:
+		 * <b>Note:</b> For the <code>submits</code> property to have effect, you must add the following import to your project:
 		 * <code>import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";</code>
 		 *
 		 * @type {boolean}
@@ -122,20 +112,20 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the tooltip of the button.
+		 * Defines the tooltip of the component.
 		 * <br>
-		 * <b>Important:</b> Tooltips should only be set to icon only buttons.
+		 * <b>Note:</b> A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.
 		 * @type {string}
 		 * @defaultvalue: ""
-		 * @private
-		 * @since 1.0.0-rc.11
+		 * @public
+		 * @since 1.2.0
 		 */
-		title: {
+		tooltip: {
 			type: String,
 		},
 
 		/**
-		 * Used to switch the active state (pressed or not) of the <code>ui5-button</code>.
+		 * Used to switch the active state (pressed or not) of the component.
 		 * @private
 		 */
 		active: {
@@ -167,37 +157,61 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the aria-label attribute for the button
-		 * @type {String}
+		 * Defines the accessible ARIA name of the component.
+		 *
+		 * @type {string}
 		 * @defaultvalue: ""
-		 * @private
-		 * @since 1.0.0-rc.7
+		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		ariaLabel: {
+		accessibleName: {
 			type: String,
 			defaultValue: undefined,
 		},
 
 		/**
-		 * Receives id(or many ids) of the elements that label the button
-		 * @type {String}
+		 * Receives id(or many ids) of the elements that label the component.
+		 *
+		 * @type {string}
 		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.7
+		 * @public
+		 * @since 1.1.0
 		 */
-		ariaLabelledby: {
+		 accessibleNameRef: {
 			type: String,
 			defaultValue: "",
 		},
 
 		/**
-		 * @type {String}
-		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.8
+		 * An object of strings that defines several additional accessibility attribute values
+		 * for customization depending on the use case.
+		 *
+		 * It supports the following fields:
+		 *
+		 * <ul>
+		 * 		<li><code>expanded</code>: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed. Accepts the following string values:
+		 *			<ul>
+		 *				<li><code>true</code></li>
+		 *				<li><code>false</code></li>
+		 *			</ul>
+		 * 		</li>
+		 * 		<li><code>hasPopup</code>: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button. Accepts the following string values:
+		 * 			<ul>
+		 *				<li><code>Dialog</code></li>
+		 *				<li><code>Grid</code></li>
+		 *				<li><code>ListBox</code></li>
+		 *				<li><code>Menu</code></li>
+		 *				<li><code>Tree</code></li>
+		 * 			</ul>
+		 * 		</li>
+		 * 		<li><code>controls</code>: Identifies the element (or elements) whose contents or presence are controlled by the button element. Accepts a string value.</li>
+		 * </ul>
+		 * @type {object}
+		 * @public
+		 * @since 1.2.0
 		 */
-		ariaExpanded: {
-			type: String,
+		accessibilityAttributes: {
+			type: Object,
 		},
 
 		/**
@@ -212,10 +226,6 @@ const metadata = {
 			type: Object,
 		},
 
-		_buttonAccInfo: {
-			type: Object,
-		},
-
 		/**
 		 * Defines the tabIndex of the component.
 		 * @private
@@ -237,7 +247,7 @@ const metadata = {
 	managedSlots: true,
 	slots: /** @lends sap.ui.webcomponents.main.Button.prototype */ {
 		/**
-		 * Defines the text of the <code>ui5-button</code>.
+		 * Defines the text of the component.
 		 * <br><br>
 		 * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
 		 *
@@ -252,7 +262,7 @@ const metadata = {
 	events: /** @lends sap.ui.webcomponents.main.Button.prototype */ {
 
 		/**
-		 * Fired when the <code>ui5-button</code> is activated either with a
+		 * Fired when the component is activated either with a
 		 * mouse/tap or by using the Enter or Space key.
 		 * <br><br>
 		 * <b>Note:</b> The event will not be fired if the <code>disabled</code>
@@ -305,7 +315,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.Button
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-button
  * @implements sap.ui.webcomponents.main.IButton
  * @public
@@ -316,7 +326,7 @@ class Button extends UI5Element {
 	}
 
 	static get styles() {
-		return [buttonCss, isLegacyBrowser() && buttonIECss];
+		return buttonCss;
 	}
 
 	static get render() {
@@ -346,11 +356,23 @@ class Button extends UI5Element {
 			isGlobalHandlerAttached = true;
 		}
 
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+		const handleTouchStartEvent = event => {
+			event.isMarked = "button";
+			if (this.nonInteractive) {
+				return;
+			}
+
+			this.active = true;
+		};
+
+		this._ontouchstart = {
+			handleEvent: handleTouchStartEvent,
+			passive: true,
+		};
 	}
 
 	onEnterDOM() {
-		this._isTouch = isPhone() || isTablet();
+		this._isTouch = (isPhone() || isTablet()) && !isCombi();
 	}
 
 	onBeforeRendering() {
@@ -369,9 +391,13 @@ class Button extends UI5Element {
 		}
 		event.isMarked = "button";
 		const FormSupport = getFeature("FormSupport");
-		if (FormSupport) {
+		if (FormSupport && this.submits) {
 			FormSupport.triggerFormSubmit(this);
 		}
+
+		if (isSafari()) {
+			this.getDomRef().focus();
+		}
 	}
 
 	_onmousedown(event) {
@@ -384,15 +410,6 @@ class Button extends UI5Element {
 		activeButton = this; // eslint-disable-line
 	}
 
-	_ontouchstart(event) {
-		event.isMarked = "button";
-		if (this.nonInteractive) {
-			return;
-		}
-
-		this.active = true;
-	}
-
 	_ontouchend(event) {
 		this.active = false;
 
@@ -424,7 +441,9 @@ class Button extends UI5Element {
 			return;
 		}
 		this.active = false;
-		this.focused = false;
+		if (isDesktop()) {
+			this.focused = false;
+		}
 	}
 
 	_onfocusin(event) {
@@ -433,31 +452,25 @@ class Button extends UI5Element {
 		}
 
 		event.isMarked = "button";
-		this.focused = true;
+		if (isDesktop()) {
+			this.focused = true;
+		}
 	}
 
 	get hasButtonType() {
 		return this.design !== ButtonDesign.Default && this.design !== ButtonDesign.Transparent;
 	}
 
-	get isIconOnly() {
-		return !Array.from(this.childNodes).filter(node => {
-			return node.nodeType !== Node.COMMENT_NODE
-			&& (node.nodeType !== Node.TEXT_NODE || node.nodeValue.trim().length !== 0);
-		}).length;
-	}
+	get iconRole() {
+		if (!this.icon) {
+			return "";
+		}
 
-	get accInfo() {
-		return {
-			"ariaExpanded": this.ariaExpanded || (this._buttonAccInfo && this._buttonAccInfo.ariaExpanded),
-			"ariaControls": this._buttonAccInfo && this._buttonAccInfo.ariaControls,
-			"ariaHaspopup": this._buttonAccInfo && this._buttonAccInfo.ariaHaspopup,
-			"title": this.title || (this._buttonAccInfo && this._buttonAccInfo.title),
-		};
+		return this.showIconTooltip ? "img" : "presentation";
 	}
 
-	get ariaLabelText() {
-		return getEffectiveAriaLabelText(this);
+	get isIconOnly() {
+		return !isDefaultSlotProvided(this);
 	}
 
 	static typeTextMappings() {
@@ -469,7 +482,7 @@ class Button extends UI5Element {
 	}
 
 	get buttonTypeText() {
-		return this.i18nBundle.getText(Button.typeTextMappings()[this.design]);
+		return Button.i18nBundle.getText(Button.typeTextMappings()[this.design]);
 	}
 
 	get tabIndexValue() {
@@ -483,20 +496,15 @@ class Button extends UI5Element {
 	}
 
 	get showIconTooltip() {
-		return this.iconOnly && !this.title;
+		return this.iconOnly && !this.tooltip;
 	}
 
-	get styles() {
-		return {
-			icon: {
-				width: this.iconSize,
-				height: this.iconSize,
-			},
-		};
+	get ariaLabelText() {
+		return getEffectiveAriaLabelText(this);
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		Button.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 

package/dist/Calendar.js

@@ -1,9 +1,14 @@
+import transformDateToSecondaryType from "@ui5/webcomponents-localization/dist/dates/transformDateToSecondaryType.js";
+import convertMonthNumbersToMonthNames from "@ui5/webcomponents-localization/dist/dates/convertMonthNumbersToMonthNames.js";
 import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import {
 	isF4,
 	isF4Shift,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
+import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
+import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
 import * as CalendarDateComponent from "./CalendarDate.js";
 import CalendarPart from "./CalendarPart.js";
 import CalendarHeader from "./CalendarHeader.js";
@@ -26,7 +31,8 @@ import calendarCSS from "./generated/themes/Calendar.css.js";
  */
 const metadata = {
 	tag: "ui5-calendar",
-	properties: /** @lends  sap.ui.webcomponents.main.Calendar.prototype */ {
+	fastNavigation: true,
+	properties: /** @lends sap.ui.webcomponents.main.Calendar.prototype */ {
 		/**
 		 * Defines the type of selection used in the calendar component.
 		 * Accepted property values are:<br>
@@ -35,7 +41,7 @@ const metadata = {
 		 * <li><code>CalendarSelectionMode.Range</code> - enables selection of a date range.</li>
 		 * <li><code>CalendarSelectionMode.Multiple</code> - enables selection of multiple dates.</li>
 		 * </ul>
-		 * @type {CalendarSelectionMode}
+		 * @type {sap.ui.webcomponents.main.types.CalendarSelectionMode}
 		 * @defaultvalue "Single"
 		 * @public
 		 */
@@ -74,9 +80,21 @@ const metadata = {
 		_nextButtonDisabled: {
 			type: Boolean,
 		},
+
+		_headerMonthButtonText: {
+			type: String,
+		},
+
+		_headerYearButtonText: {
+			type: String,
+		},
+
+		_headerYearButtonTextSecType: {
+			type: String,
+		},
 	},
 	managedSlots: true,
-	slots: /** @lends  sap.ui.webcomponents.main.Calendar.prototype */ {
+	slots: /** @lends sap.ui.webcomponents.main.Calendar.prototype */ {
 		/**
 		 * Defines the selected date or dates (depending on the <code>selectionMode</code> property) for this calendar as instances of <code>ui5-date</code>
 		 *
@@ -90,10 +108,10 @@ const metadata = {
 			invalidateOnChildChange: true,
 		},
 	},
-	events: /** @lends  sap.ui.webcomponents.main.Calendar.prototype */ {
+	events: /** @lends sap.ui.webcomponents.main.Calendar.prototype */ {
 		/**
 		 * Fired when the selected dates change.
-		 * <b>Note:</b> If you call <code>preventDefault()</code> for this event, <code>ui5-calendar</code> will not
+		 * <b>Note:</b> If you call <code>preventDefault()</code> for this event, the component will not
 		 * create instances of <code>ui5-date</code> for the newly selected dates. In that case you should do this manually.
 		 *
 		 * @event sap.ui.webcomponents.main.Calendar#selected-dates-change
@@ -108,6 +126,9 @@ const metadata = {
 				values: { type: Array },
 			},
 		},
+
+		"show-month-press": {},
+		"show-year-press": {},
 	},
 };
 
@@ -161,8 +182,8 @@ const metadata = {
  * <br>
  * - Month picker: <br>
  * <ul>
- * <li>[PAGEUP] - Navigate to the previous month</li>
- * <li>[PAGEDOWN] - Navigate to the next month</li>
+ * <li>[PAGEUP] - Navigate to the previous year</li>
+ * <li>[PAGEDOWN] - Navigate to the next year</li>
  * <li>[HOME] - Navigate to the first month of the current row</li>
  * <li>[END] - Navigate to the last month of the current row</li>
  * <li>[CTRL] + [HOME] - Navigate to the first month of the current year</li>
@@ -180,6 +201,12 @@ const metadata = {
  * </ul>
  * <br>
  *
+ * <h4>Fast Navigation</h4>
+ * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
+ * In order to use this functionality, you need to import the following module:
+ * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
+ * <br><br>
+ *
 * <h3>Calendar types</h3>
  * The component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.
  * By default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,
@@ -213,7 +240,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.Calendar
- * @extends CalendarPart
+ * @extends sap.ui.webcomponents.main.CalendarPart
  * @tagname ui5-calendar
  * @appenddocs CalendarDate
  * @public
@@ -256,7 +283,7 @@ class Calendar extends CalendarPart {
 
 		// Create tags for the selected dates that don't already exist in DOM
 		selectedValues.filter(value => !valuesInDOM.includes(value)).forEach(value => {
-			const dateElement = document.createElement("ui5-date");
+			const dateElement = document.createElement(CalendarDateComponent.default.getMetadata().getTag());
 			dateElement.value = value;
 			this.appendChild(dateElement);
 		});
@@ -266,20 +293,41 @@ class Calendar extends CalendarPart {
 		await renderFinished(); // Await for the current picker to render and then ask if it has previous/next pages
 		this._previousButtonDisabled = !this._currentPickerDOM._hasPreviousPage();
 		this._nextButtonDisabled = !this._currentPickerDOM._hasNextPage();
+
+		const yearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this.primaryCalendarType });
+		const localeData = getCachedLocaleDataInstance(getLocale());
+		this._headerMonthButtonText = localeData.getMonthsStandAlone("wide", this.primaryCalendarType)[this._calendarDate.getMonth()];
+
+		if (this._currentPicker === "year") {
+			const rangeStart = new CalendarDate(this._calendarDate, this._primaryCalendarType);
+			const rangeEnd = new CalendarDate(this._calendarDate, this._primaryCalendarType);
+			rangeStart.setYear(this._currentPickerDOM._firstYear);
+			rangeEnd.setYear(this._currentPickerDOM._lastYear);
+
+			this._headerYearButtonText = `${yearFormat.format(rangeStart.toLocalJSDate(), true)} - ${yearFormat.format(rangeEnd.toLocalJSDate(), true)}`;
+		} else {
+			this._headerYearButtonText = String(yearFormat.format(this._localDate, true));
+		}
+
+		this.secondaryCalendarType && this._setSecondaryCalendarTypeButtonText();
 	}
 
 	/**
 	 * The user clicked the "month" button in the header
 	 */
-	onHeaderShowMonthPress() {
+	onHeaderShowMonthPress(event) {
+		this._currentPickerDOM._autoFocus = false;
 		this._currentPicker = "month";
+		this.fireEvent("show-month-press", event);
 	}
 
 	/**
 	 * The user clicked the "year" button in the header
 	 */
-	onHeaderShowYearPress() {
+	onHeaderShowYearPress(event) {
+		this._currentPickerDOM._autoFocus = false;
 		this._currentPicker = "year";
+		this.fireEvent("show-year-press", event);
 	}
 
 	get _currentPickerDOM() {
@@ -300,13 +348,52 @@ class Calendar extends CalendarPart {
 		this._currentPickerDOM._showNextPage();
 	}
 
+	_setSecondaryCalendarTypeButtonText() {
+		const localeData = getCachedLocaleDataInstance(getLocale());
+		const yearFormatSecType = DateFormat.getDateInstance({ format: "y", calendarType: this.secondaryCalendarType });
+		this._headerMonthButtonTextInSexType = localeData.getMonthsStandAlone("wide", this.secondaryCalendarType)[this._calendarDate.getMonth()];
+
+		if (this._currentPicker === "year") {
+			const rangeStart = new CalendarDate(this._calendarDate, this._primaryCalendarType);
+			const rangeEnd = new CalendarDate(this._calendarDate, this._primaryCalendarType);
+			rangeStart.setYear(this._currentPickerDOM._firstYear);
+			rangeEnd.setYear(this._currentPickerDOM._lastYear);
+
+			const rangeStartSecType = transformDateToSecondaryType(this.primaryCalendarType, this.secondaryCalendarType, rangeStart.valueOf() / 1000, true)
+				.firstDate;
+			const rangeEndSecType = transformDateToSecondaryType(this.primaryCalendarType, this.secondaryCalendarType, rangeEnd.valueOf() / 1000, true)
+				.lastDate;
+			this._headerYearButtonTextSecType = `${yearFormatSecType.format(rangeStartSecType.toLocalJSDate(), true)} - ${yearFormatSecType.format(rangeEndSecType.toLocalJSDate(), true)}`;
+		} else {
+			this._headerYearButtonTextSecType = String(yearFormatSecType.format(this._localDate, true));
+		}
+	}
+
+	get secondaryCalendarTypeButtonText() {
+		if (!this.secondaryCalendarType) {
+			return;
+		}
+
+		const localDate = new Date(this._timestamp * 1000);
+		const secondYearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this.secondaryCalendarType });
+		const dateInSecType = transformDateToSecondaryType(this._primaryCalendarType, this.secondaryCalendarType, this._timestamp);
+		const secondMonthInfo = convertMonthNumbersToMonthNames(dateInSecType.firstDate.getMonth(), dateInSecType.lastDate.getMonth(), this.secondaryCalendarType);
+		const secondYearText = secondYearFormat.format(localDate, true);
+
+		return {
+			yearButtonText: secondYearText,
+			monthButtonText: secondMonthInfo.text,
+			monthButtonInfo: secondMonthInfo.textInfo,
+		};
+	}
+
 	/**
-	 * The month button is only hidden when the month picker is shown
+	 * The month button is hidden when the month picker or year picker is shown
 	 * @returns {boolean}
 	 * @private
 	 */
 	get _isHeaderMonthButtonHidden() {
-		return this._currentPicker === "month";
+		return this._currentPicker === "month" || this._currentPicker === "year";
 	}
 
 	get _isDayPickerHidden() {
@@ -339,11 +426,13 @@ class Calendar extends CalendarPart {
 	onSelectedMonthChange(event) {
 		this.timestamp = event.detail.timestamp;
 		this._currentPicker = "day";
+		this._currentPickerDOM._autoFocus = true;
 	}
 
 	onSelectedYearChange(event) {
 		this.timestamp = event.detail.timestamp;
 		this._currentPicker = "day";
+		this._currentPickerDOM._autoFocus = true;
 	}
 
 	onNavigate(event) {
@@ -351,11 +440,11 @@ class Calendar extends CalendarPart {
 	}
 
 	_onkeydown(event) {
-		if (isF4(event) && this._currentPicker === "day") {
+		if (isF4(event) && this._currentPicker !== "month") {
 			this._currentPicker = "month";
 		}
 
-		if (isF4Shift(event) && this._currentPicker === "day") {
+		if (isF4Shift(event) && this._currentPicker !== "year") {
 			this._currentPicker = "year";
 		}
 	}

package/dist/CalendarDate.js

@@ -5,10 +5,10 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 */
 const metadata = {
 	tag: "ui5-date",
-	properties: /** @lends  sap.ui.webcomponents.main.CalendarDate.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.CalendarDate.prototype */ {
 
 		/**
-		 * The date formatted according to the <code>formatPattern</code> property of the <code>ui5-calendar</code> that hosts the <code>ui5-date</code>
+		 * The date formatted according to the <code>formatPattern</code> property of the <code>ui5-calendar</code> that hosts the component
 		 *
 		 * @type {string}
 		 * @public