@ui5/webcomponents 1.5.0 → 1.6.0

package/CHANGELOG.md

@@ -3,6 +3,45 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.6.0](https://github.com/SAP/ui5-webcomponents/compare/v1.5.0...v1.6.0) (2022-07-25)
+
+
+### Bug Fixes
+
+* **formEnablement:** correct submit event behaviour ([#5500](https://github.com/SAP/ui5-webcomponents/issues/5500)) ([07237ec](https://github.com/SAP/ui5-webcomponents/commit/07237ec))
+* **inputs:** adjust placeholder styling ([#5547](https://github.com/SAP/ui5-webcomponents/issues/5547)) ([c427344](https://github.com/SAP/ui5-webcomponents/commit/c427344))
+* **InvisibleMessage:** clear announcement after a while ([#5446](https://github.com/SAP/ui5-webcomponents/issues/5446)) ([af213f1](https://github.com/SAP/ui5-webcomponents/commit/af213f1))
+* **MultoComboBox:** fix component scoping ([#5553](https://github.com/SAP/ui5-webcomponents/issues/5553)) ([9c26e8e](https://github.com/SAP/ui5-webcomponents/commit/9c26e8e)), closes [#5521](https://github.com/SAP/ui5-webcomponents/issues/5521)
+* **ui5-card:** correct accessibility attribute ([#5479](https://github.com/SAP/ui5-webcomponents/issues/5479)) ([48ff032](https://github.com/SAP/ui5-webcomponents/commit/48ff032))
+* **ui5-combobox:** annouce group item's text when accessed via keyboard ([#5478](https://github.com/SAP/ui5-webcomponents/issues/5478)) ([0f60574](https://github.com/SAP/ui5-webcomponents/commit/0f60574))
+* **ui5-combobox:** correct ok and close buttons' behavior, as well as item select behavior on mobile ([#5541](https://github.com/SAP/ui5-webcomponents/issues/5541)) ([fdf25c3](https://github.com/SAP/ui5-webcomponents/commit/fdf25c3))
+* **ui5-combobox:** correctly fire change event on item press ([#5447](https://github.com/SAP/ui5-webcomponents/issues/5447)) ([0218c19](https://github.com/SAP/ui5-webcomponents/commit/0218c19)), closes [#5432](https://github.com/SAP/ui5-webcomponents/issues/5432)
+* **ui5-combobox:** simplify condition ([#5508](https://github.com/SAP/ui5-webcomponents/issues/5508)) ([514f632](https://github.com/SAP/ui5-webcomponents/commit/514f632))
+* **ui5-date-picker:** adjust background color ([#5466](https://github.com/SAP/ui5-webcomponents/issues/5466)) ([7ea3f49](https://github.com/SAP/ui5-webcomponents/commit/7ea3f49)), closes [#5396](https://github.com/SAP/ui5-webcomponents/issues/5396)
+* **ui5-date-picker:** adjust value help icon role ([#5419](https://github.com/SAP/ui5-webcomponents/issues/5419)) ([56cc995](https://github.com/SAP/ui5-webcomponents/commit/56cc995)), closes [#5378](https://github.com/SAP/ui5-webcomponents/issues/5378)
+* **ui5-input:** enhance lazy loading ([#5370](https://github.com/SAP/ui5-webcomponents/issues/5370)) ([73010dc](https://github.com/SAP/ui5-webcomponents/commit/73010dc))
+* **ui5-input, ui5-multi-input, ui5-combobox, ui5-multi-combobox:** announce value state type ([#5515](https://github.com/SAP/ui5-webcomponents/issues/5515)) ([82317d0](https://github.com/SAP/ui5-webcomponents/commit/82317d0)), closes [#5392](https://github.com/SAP/ui5-webcomponents/issues/5392)
+* **ui5-li:** correct accessibility attribute to checkbox ([#5475](https://github.com/SAP/ui5-webcomponents/issues/5475)) ([88f278b](https://github.com/SAP/ui5-webcomponents/commit/88f278b))
+* **ui5-li-groupheader:** use group role on UL nodes only ([#5518](https://github.com/SAP/ui5-webcomponents/issues/5518)) ([1010f73](https://github.com/SAP/ui5-webcomponents/commit/1010f73)), closes [#5400](https://github.com/SAP/ui5-webcomponents/issues/5400)
+* **ui5-list:** focus handling on nested lists ([#5502](https://github.com/SAP/ui5-webcomponents/issues/5502)) ([5d4ae79](https://github.com/SAP/ui5-webcomponents/commit/5d4ae79))
+* **ui5-panel:** add tooltip to expand/collapse icon ([#5543](https://github.com/SAP/ui5-webcomponents/issues/5543)) ([533469d](https://github.com/SAP/ui5-webcomponents/commit/533469d))
+* **ui5-panel:** enhance aria-labelledby handling ([#5539](https://github.com/SAP/ui5-webcomponents/issues/5539)) ([410dee1](https://github.com/SAP/ui5-webcomponents/commit/410dee1))
+* **ui5-radio-button:** correct keyboard navigation in RTL ([#5529](https://github.com/SAP/ui5-webcomponents/issues/5529)) ([bc726a9](https://github.com/SAP/ui5-webcomponents/commit/bc726a9))
+* **ui5-select:** announce value state type ([#5538](https://github.com/SAP/ui5-webcomponents/issues/5538)) ([c0f8a2a](https://github.com/SAP/ui5-webcomponents/commit/c0f8a2a))
+* **ui5-table:** render selectAll checkbox only in case ui5-table is not empty ([#5523](https://github.com/SAP/ui5-webcomponents/issues/5523)) ([cbf23d1](https://github.com/SAP/ui5-webcomponents/commit/cbf23d1))
+* **ui5-title:** use correct font-family for Horizon Themes ([#5457](https://github.com/SAP/ui5-webcomponents/issues/5457)) ([62c4c20](https://github.com/SAP/ui5-webcomponents/commit/62c4c20))
+
+
+### Features
+
+* **ui5-calendar:** show months and years from both primary and secon… ([#5412](https://github.com/SAP/ui5-webcomponents/issues/5412)) ([d5dc7ec](https://github.com/SAP/ui5-webcomponents/commit/d5dc7ec))
+* **ui5-panel:** remove header when not used ([#5513](https://github.com/SAP/ui5-webcomponents/issues/5513)) ([73757a4](https://github.com/SAP/ui5-webcomponents/commit/73757a4))
+* **ui5-radio-button:** add accessibleName property ([#5548](https://github.com/SAP/ui5-webcomponents/issues/5548)) ([967b441](https://github.com/SAP/ui5-webcomponents/commit/967b441)), closes [#5516](https://github.com/SAP/ui5-webcomponents/issues/5516)
+
+
+
+
+
 # [1.5.0](https://github.com/SAP/ui5-webcomponents/compare/v1.4.0...v1.5.0) (2022-07-03)
 
 

package/dist/BreadcrumbsItem.js

@@ -45,7 +45,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the item.
+		 * Defines the accessible ARIA name of the item.
 		 *
 		 * @type {string}
 		 * @defaultvalue undefined

package/dist/Button.js

@@ -157,7 +157,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue: ""

package/dist/Calendar.js

@@ -1,3 +1,5 @@
+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 {
@@ -86,6 +88,10 @@ const metadata = {
 		_headerYearButtonText: {
 			type: String,
 		},
+
+		_headerYearButtonTextSecType: {
+			type: String,
+		},
 	},
 	managedSlots: true,
 	slots: /** @lends sap.ui.webcomponents.main.Calendar.prototype */ {
@@ -302,6 +308,8 @@ class Calendar extends CalendarPart {
 		} else {
 			this._headerYearButtonText = String(yearFormat.format(this._localDate, true));
 		}
+
+		this.secondaryCalendarType && this._setSecondaryCalendarTypeButtonText();
 	}
 
 	/**
@@ -340,6 +348,27 @@ 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;
@@ -347,58 +376,17 @@ class Calendar extends CalendarPart {
 
 		const localDate = new Date(this._timestamp * 1000);
 		const secondYearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this.secondaryCalendarType });
-		const secondMonthInfo = this._getDisplayedSecondaryMonthText();
+		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.info,
-		};
-	}
-
-	_getDisplayedSecondaryMonthText() {
-		const month = this._getDisplayedSecondaryMonths();
-		const localeData = getCachedLocaleDataInstance(getLocale());
-		const pattern = localeData.getIntervalPattern();
-		const secondaryMonthsNames = getCachedLocaleDataInstance(getLocale()).getMonthsStandAlone("abbreviated", this.secondaryCalendarType);
-		const secondaryMonthsNamesWide = getCachedLocaleDataInstance(getLocale()).getMonthsStandAlone("wide", this.secondaryCalendarType);
-
-		if (month.startMonth === month.endMonth) {
-			return {
-				text: localeData.getMonths("abbreviated", this.secondaryCalendarType)[month.startMonth],
-				textInfo: localeData.getMonths("wide", this.secondaryCalendarType)[month.startMonth],
-			};
-		}
-
-		return {
-			text: pattern.replace(/\{0\}/, secondaryMonthsNames[month.startMonth]).replace(/\{1\}/, secondaryMonthsNames[month.endMonth]),
-			textInfo: pattern.replace(/\{0\}/, secondaryMonthsNamesWide[month.startMonth]).replace(/\{1\}/, secondaryMonthsNamesWide[month.endMonth]),
+			monthButtonInfo: secondMonthInfo.textInfo,
 		};
 	}
 
-	_getDisplayedSecondaryMonths() {
-		const localDate = new Date(this._timestamp * 1000);
-		let firstDate = CalendarDate.fromLocalJSDate(localDate, this._primaryCalendarType);
-		firstDate.setDate(1);
-		firstDate = new CalendarDate(firstDate, this.secondaryCalendarType);
-		const startMonth = firstDate.getMonth();
-
-		let lastDate = CalendarDate.fromLocalJSDate(localDate, this._primaryCalendarType);
-		lastDate.setDate(this._getDaysInMonth(lastDate));
-		lastDate = new CalendarDate(lastDate, this.secondaryCalendarType);
-		const endMonth = lastDate.getMonth();
-
-		return { startMonth, endMonth };
-	}
-
-	_getDaysInMonth(date) {
-		const tempCalendarDate = new CalendarDate(date);
-		tempCalendarDate.setDate(1);
-		tempCalendarDate.setMonth(tempCalendarDate.getMonth() + 1);
-		tempCalendarDate.setDate(0);
-		return tempCalendarDate.getDate();
-	}
-
 	/**
 	 * The month button is hidden when the month picker or year picker is shown
 	 * @returns {boolean}

package/dist/CalendarHeader.js

@@ -78,6 +78,10 @@ const metadata = {
 			type: String,
 		},
 
+		_yearButtonTextSecType: {
+			type: String,
+		},
+
 		isYearButtonHidden: {
 			type: Boolean,
 		},
@@ -199,7 +203,7 @@ class CalendarHeader extends UI5Element {
 	get accInfo() {
 		return {
 			ariaLabelMonthButton: this.hasSecondaryCalendarType
-				? `${this._monthButtonText}, ${this.buttonTextForSecondaryCalendarType.info}` : `${this._monthButtonText}`,
+				? `${this._monthButtonText}, ${this.buttonTextForSecondaryCalendarType.monthButtonInfo}` : `${this._monthButtonText}`,
 		};
 	}
 }

package/dist/CheckBox.js

@@ -46,7 +46,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @public

package/dist/ComboBox.js

@@ -36,10 +36,15 @@ import {
 	VALUE_STATE_ERROR,
 	VALUE_STATE_WARNING,
 	VALUE_STATE_INFORMATION,
+	VALUE_STATE_TYPE_SUCCESS,
+	VALUE_STATE_TYPE_INFORMATION,
+	VALUE_STATE_TYPE_ERROR,
+	VALUE_STATE_TYPE_WARNING,
 	INPUT_SUGGESTIONS_TITLE,
 	SELECT_OPTIONS,
 	LIST_ITEM_POSITION,
 	LIST_ITEM_SELECTED,
+	LIST_ITEM_GROUP_HEADER,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Templates
@@ -212,7 +217,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue: ""
@@ -550,6 +555,10 @@ class ComboBox extends UI5Element {
 		this.inner.focus();
 		this._resetFilter();
 
+		if (isPhone() && this.value && !this._lastValue) {
+			this._lastValue = this.value;
+		}
+
 		this._toggleRespPopover();
 	}
 
@@ -661,12 +670,12 @@ class ComboBox extends UI5Element {
 		this._isValueStateFocused = false;
 		this._selectionChanged = true;
 
+		this._announceSelectedItem(indexOfItem);
+
 		if (isGroupItem && isOpen) {
 			return;
 		}
 
-		this._announceSelectedItem(indexOfItem);
-
 		// autocomplete
 		const item = this._getFirstMatchingItem(this.value);
 		this._applyAtomicValueAndSelection(item, (this.open ? this._userTypedValue : null), true);
@@ -829,11 +838,20 @@ class ComboBox extends UI5Element {
 	}
 
 	_closeRespPopover(event) {
-		if (isPhone() && event && event.target.classList.contains("ui5-responsive-popover-close-btn") && this._selectedItemText) {
+		if (event && event.target.classList.contains("ui5-responsive-popover-close-btn") && this._selectedItemText) {
 			this.value = this._selectedItemText;
 			this.filterValue = this._selectedItemText;
 		}
 
+		if (event && event.target.classList.contains("ui5-responsive-popover-close-btn")) {
+			this.value = this._lastValue ? this._lastValue : "";
+			this.filterValue = this._lastValue ? this._lastValue : "";
+		}
+
+		if (isPhone()) {
+			this._fireChangeEvent();
+		}
+
 		this._isValueStateFocused = false;
 		this._clearFocus();
 
@@ -965,10 +983,17 @@ class ComboBox extends UI5Element {
 	}
 
 	_announceSelectedItem(indexOfItem) {
+		const currentItem = this._filteredItems[indexOfItem];
+		const isGroupItem = currentItem && currentItem.isGroupItem;
 		const itemPositionText = ComboBox.i18nBundle.getText(LIST_ITEM_POSITION, indexOfItem + 1, this._filteredItems.length);
 		const itemSelectionText = ComboBox.i18nBundle.getText(LIST_ITEM_SELECTED);
+		const groupHeaderText = ComboBox.i18nBundle.getText(LIST_ITEM_GROUP_HEADER);
 
-		announce(`${itemPositionText} ${itemSelectionText}`, "Polite");
+		if (isGroupItem) {
+			announce(`${groupHeaderText} ${currentItem.text} ${itemPositionText}`, "Polite");
+		} else {
+			announce(`${itemPositionText} ${itemSelectionText}`, "Polite");
+		}
 	}
 
 	get _headerTitleText() {
@@ -1001,7 +1026,19 @@ class ComboBox extends UI5Element {
 		return this.hasValueState && this.valueState !== ValueState.Success;
 	}
 
-	get valueStateText() {
+	get ariaValueStateHiddenText() {
+		if (!this.hasValueState) {
+			return;
+		}
+
+		if (this.shouldDisplayDefaultValueStateMessage) {
+			return `${this.valueStateTypeMappings[this.valueState]} ${this.valueStateDefaultText}`;
+		}
+
+		return `${this.valueStateTypeMappings[this.valueState]}`.concat(" ", this.valueStateMessageText.map(el => el.textContent).join(" "));
+	}
+
+	get valueStateDefaultText() {
 		return this.valueStateTextMappings[this.valueState];
 	}
 
@@ -1022,6 +1059,15 @@ class ComboBox extends UI5Element {
 		};
 	}
 
+	get valueStateTypeMappings() {
+		return {
+			"Success": ComboBox.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
+			"Information": ComboBox.i18nBundle.getText(VALUE_STATE_TYPE_INFORMATION),
+			"Error": ComboBox.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
+			"Warning": ComboBox.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
+		};
+	}
+
 	get shouldOpenValueStateMessagePopover() {
 		return this.focused && !this.readonly && this.hasValueStateText && !this._iconPressed
 			&& !this.open && !this._isPhone;

package/dist/DatePicker.js

@@ -16,7 +16,7 @@ import {
 	isF4,
 	isEnter,
 } from "@ui5/webcomponents-base/dist/Keys.js";
-import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import { isPhone, isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import "@ui5/webcomponents-icons/dist/appointment-2.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import HasPopup from "./types/HasPopup.js";
@@ -705,6 +705,14 @@ class DatePicker extends DateComponentBase {
 		return false;
 	}
 
+	/**
+	 * Defines whether the value help icon is hidden
+	 * @private
+	 */
+	get _ariaHidden() {
+		return isDesktop();
+	}
+
 	async _respPopover() {
 		const staticAreaItem = await this.getStaticAreaItemDomRef();
 		return staticAreaItem.querySelector("[ui5-responsive-popover]");

package/dist/Icon.js

@@ -107,7 +107,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the aria hidden state of the component.
+		 * Defines the ARIA hidden state of the component.
 		 * Note: If the role is presentation the default value of aria-hidden will be true.
 		 * @private
 		 * @since 1.0.0-rc.15

package/dist/Input.js

@@ -46,6 +46,10 @@ import {
 	VALUE_STATE_INFORMATION,
 	VALUE_STATE_ERROR,
 	VALUE_STATE_WARNING,
+	VALUE_STATE_TYPE_SUCCESS,
+	VALUE_STATE_TYPE_INFORMATION,
+	VALUE_STATE_TYPE_ERROR,
+	VALUE_STATE_TYPE_WARNING,
 	INPUT_SUGGESTIONS,
 	INPUT_SUGGESTIONS_TITLE,
 	INPUT_SUGGESTIONS_ONE_HIT,
@@ -331,7 +335,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @public
@@ -866,6 +870,8 @@ class Input extends UI5Element {
 		const innerInput = this.getInputDOMRefSync();
 		const isAutoCompleted = innerInput.selectionEnd - innerInput.selectionStart > 0;
 
+		this.isTyping = false;
+
 		if (!isOpen) {
 			this.value = this.lastConfirmedValue ? this.lastConfirmedValue : this.previousValue;
 			return;
@@ -1112,7 +1118,6 @@ class Input extends UI5Element {
 			this.focused = false;
 		}
 
-		this.isTyping = false;
 		this.openOnMobile = false;
 		this.open = false;
 		this._forceOpen = false;
@@ -1376,6 +1381,15 @@ class Input extends UI5Element {
 
 	onClose() {}
 
+	get valueStateTypeMappings() {
+		return {
+			"Success": Input.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
+			"Information": Input.i18nBundle.getText(VALUE_STATE_TYPE_INFORMATION),
+			"Error": Input.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
+			"Warning": Input.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
+		};
+	}
+
 	valueStateTextMappings() {
 		return {
 			"Success": Input.i18nBundle.getText(VALUE_STATE_SUCCESS),
@@ -1449,15 +1463,15 @@ class Input extends UI5Element {
 	}
 
 	get ariaValueStateHiddenText() {
-		if (!this.hasValueStateMessage) {
+		if (!this.hasValueState) {
 			return;
 		}
 
 		if (this.shouldDisplayDefaultValueStateMessage) {
-			return this.valueStateText;
+			return `${this.valueStateTypeMappings[this.valueState]} ${this.valueStateText}`;
 		}
 
-		return this.valueStateMessageText.map(el => el.textContent).join(" ");
+		return `${this.valueStateTypeMappings[this.valueState]}`.concat(" ", this.valueStateMessageText.map(el => el.textContent).join(" "));
 	}
 
 	get itemSelectionAnnounce() {

package/dist/Link.js

@@ -103,7 +103,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""

package/dist/List.js

@@ -888,6 +888,8 @@ class List extends UI5Element {
 	onItemFocused(event) {
 		const target = event.target;
 
+		event.stopPropagation();
+
 		this._itemNavigation.setCurrentItem(target);
 		this.fireEvent("item-focused", { item: target });
 
@@ -937,7 +939,7 @@ class List extends UI5Element {
 	onForwardBefore(event) {
 		this.setPreviouslyFocusedItem(event.target);
 		this.focusBeforeElement();
-		event.stopImmediatePropagation();
+		event.stopPropagation();
 	}
 
 	onForwardAfter(event) {
@@ -949,6 +951,8 @@ class List extends UI5Element {
 			this.focusGrowingButton();
 			event.preventDefault();
 		}
+
+		event.stopPropagation();
 	}
 
 	focusBeforeElement() {

package/dist/Menu.js

@@ -118,6 +118,8 @@ const metadata = {
 	slots: /** @lends sap.ui.webcomponents.main.Menu.prototype */ {
 		/**
 		 * Defines the items of this component.
+		 * <br><br>
+		 * <b>Note:</b> Use <code>ui5-menu-item</code> for the intended design.
 		 *
 		 * @type {sap.ui.webcomponents.main.IMenuItem[]}
 		 * @slot items

package/dist/MenuItem.js

@@ -125,7 +125,6 @@ const metadata = {
  * and each <code>ui5-menu-item</code> is represented by a list item (<code>ui5-li</code>) in that list. Therefore, you should only use
  * <code>ui5-menu-item</code> directly in your apps. The <code>ui5-li</code> list item is internal for the list, and not intended for public use.
  *
- * For the <code>ui5-menu-item</code>
  * <h3>ES6 Module Import</h3>
  *
  * <code>import @ui5/webcomponents/dist/MenuItem.js";</code>

package/dist/MonthPicker.js

@@ -1,4 +1,6 @@
 import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
+import convertMonthNumbersToMonthNames from "@ui5/webcomponents-localization/dist/dates/convertMonthNumbersToMonthNames.js";
+import transformDateToSecondaryType from "@ui5/webcomponents-localization/dist/dates/transformDateToSecondaryType.js";
 import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
 import {
 	isEnter,
@@ -19,6 +21,7 @@ import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
 import CalendarPart from "./CalendarPart.js";
 import MonthPickerTemplate from "./generated/templates/MonthPickerTemplate.lit.js";
 import styles from "./generated/themes/MonthPicker.css.js";
+
 /**
  * @public
  */
@@ -131,6 +134,7 @@ class MonthPicker extends CalendarPart {
 				selected: isSelected,
 				ariaSelected: isSelected ? "true" : "false",
 				name: monthsNames[i],
+				nameInSecType: this.secondaryCalendarType && this._getDisplayedSecondaryMonthText(timestamp).text,
 				disabled: isDisabled,
 				classes: "ui5-mp-item",
 			};
@@ -155,6 +159,11 @@ class MonthPicker extends CalendarPart {
 		this._months = months;
 	}
 
+	_getDisplayedSecondaryMonthText(timestamp) {
+		const monthsName = transformDateToSecondaryType(this._primaryCalendarType, this.secondaryCalendarType, timestamp);
+		return convertMonthNumbersToMonthNames(monthsName.firstDate.getMonth(), monthsName.lastDate.getMonth(), this.secondaryCalendarType);
+	}
+
 	onAfterRendering() {
 		if (!this._hidden) {
 			this.focus();

package/dist/MultiComboBox.js

@@ -50,6 +50,7 @@ import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import MultiComboBoxItem from "./MultiComboBoxItem.js";
 import MultiComboBoxGroupItem from "./MultiComboBoxGroupItem.js";
+import GroupHeaderListItem from "./GroupHeaderListItem.js";
 import Tokenizer from "./Tokenizer.js";
 import Token from "./Token.js";
 import Icon from "./Icon.js";
@@ -65,6 +66,10 @@ import {
 	VALUE_STATE_ERROR,
 	VALUE_STATE_WARNING,
 	VALUE_STATE_INFORMATION,
+	VALUE_STATE_TYPE_SUCCESS,
+	VALUE_STATE_TYPE_INFORMATION,
+	VALUE_STATE_TYPE_ERROR,
+	VALUE_STATE_TYPE_WARNING,
 	INPUT_SUGGESTIONS_TITLE,
 	SELECT_OPTIONS,
 	MULTICOMBOBOX_DIALOG_OK_BUTTON,
@@ -269,7 +274,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue: ""
@@ -466,6 +471,7 @@ class MultiComboBox extends UI5Element {
 			Popover,
 			List,
 			StandardListItem,
+			GroupHeaderListItem,
 			ToggleButton,
 			Button,
 		];
@@ -1447,7 +1453,19 @@ class MultiComboBox extends UI5Element {
 		return this.hasValueState && this.valueState !== ValueState.Success;
 	}
 
-	get valueStateText() {
+	get ariaValueStateHiddenText() {
+		if (!this.hasValueState) {
+			return;
+		}
+
+		if (this.shouldDisplayDefaultValueStateMessage) {
+			return `${this.valueStateTypeMappings[this.valueState]} ${this.valueStateDefaultText}`;
+		}
+
+		return `${this.valueStateTypeMappings[this.valueState]}`.concat(" ", this.valueStateMessageText.map(el => el.textContent).join(" "));
+	}
+
+	get valueStateDefaultText() {
 		let key = this.valueState;
 
 		if (this._performingSelectionTwice) {
@@ -1520,6 +1538,15 @@ class MultiComboBox extends UI5Element {
 		};
 	}
 
+	get valueStateTypeMappings() {
+		return {
+			"Success": MultiComboBox.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
+			"Information": MultiComboBox.i18nBundle.getText(VALUE_STATE_TYPE_INFORMATION),
+			"Error": MultiComboBox.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
+			"Warning": MultiComboBox.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
+		};
+	}
+
 	get _innerInput() {
 		if (isPhone()) {
 			if (this.allItemsPopover && this.allItemsPopover.opened) {

package/dist/Option.js

@@ -21,7 +21,7 @@ const metadata = {
 		/**
 		 * Defines whether the component is in disabled state.
 		 * <br><br>
-		 * <b>Note:</b> A disabled component is noninteractive.
+		 * <b>Note:</b> A disabled component is hidden.
 		 * @type {boolean}
 		 * @defaultvalue false
 		 * @public

package/dist/Panel.js

@@ -105,7 +105,7 @@ const metadata = {
 		},
 
 		/**
-		 * Sets the accessible aria role of the component.
+		 * Sets the accessible ARIA role of the component.
 		 * Depending on the usage, you can change the role from the default <code>Form</code>
 		 * to <code>Region</code> or <code>Complementary</code>.
 		 *
@@ -133,7 +133,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
@@ -422,7 +422,11 @@ class Panel extends UI5Element {
 	}
 
 	get ariaLabelledbyReference() {
-		return (this.nonFocusableButton && this.headerText) ? `${this._id}-header-title` : undefined;
+		return (this.nonFocusableButton && this.headerText && !this.fixed) ? `${this._id}-header-title` : undefined;
+	}
+
+	get fixedPanelAriaLabelledbyReference() {
+		return this.fixed && !this.effectiveAccessibleName ? `${this._id}-header-title` : undefined;
 	}
 
 	get header() {
@@ -441,6 +445,10 @@ class Panel extends UI5Element {
 		return !this._hasHeader && !this.fixed;
 	}
 
+	get hasHeaderOrHeaderText() {
+		return this._hasHeader || this.headerText;
+	}
+
 	get nonFocusableButton() {
 		return !this.header.length;
 	}