@ui5/webcomponents 1.7.0 → 1.8.0

package/CHANGELOG.md

@@ -3,6 +3,53 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.8.0](https://github.com/SAP/ui5-webcomponents/compare/v1.7.1...v1.8.0) (2022-10-03)
+
+
+### Bug Fixes
+
+* **ui5-breadcrumbs-popover:** aligned footer items ([#5821](https://github.com/SAP/ui5-webcomponents/issues/5821)) ([b1aa6e7](https://github.com/SAP/ui5-webcomponents/commit/b1aa6e70086689678175506b230479c8dbff6f99)), closes [#5810](https://github.com/SAP/ui5-webcomponents/issues/5810)
+* **ui5-dialog:** correct imports in HC theme bundles ([#5851](https://github.com/SAP/ui5-webcomponents/issues/5851)) ([3cef0d5](https://github.com/SAP/ui5-webcomponents/commit/3cef0d5a104a4acd8b790cfd7549c5b890bdc81f)), closes [#5832](https://github.com/SAP/ui5-webcomponents/issues/5832)
+* **ui5-dialog:** fixed text selection when the dialog is draggable ([#5724](https://github.com/SAP/ui5-webcomponents/issues/5724)) ([9e0c79f](https://github.com/SAP/ui5-webcomponents/commit/9e0c79fe7bf623d9b113be5b6df4a569293babbc))
+* **ui5-input,ui5-combobox:** remove 'selected' announcement ([#5864](https://github.com/SAP/ui5-webcomponents/issues/5864)) ([e04adde](https://github.com/SAP/ui5-webcomponents/commit/e04added4ff84ffca490e3ce03d4dd54cffb600c))
+* **ui5-input:** announce suggestion text once ([#5817](https://github.com/SAP/ui5-webcomponents/issues/5817)) ([6225e10](https://github.com/SAP/ui5-webcomponents/commit/6225e10011b668da92584f434f33640000ed2310))
+* **ui5-input:** enable autocomplete deletion by Meta/Alt + backspace ([#5729](https://github.com/SAP/ui5-webcomponents/issues/5729)) ([df0fff6](https://github.com/SAP/ui5-webcomponents/commit/df0fff656392664c6ea1d8e63538dd787a37d0cf))
+* **ui5-input:** handle deletion in numeric input ([#5676](https://github.com/SAP/ui5-webcomponents/issues/5676)) ([3858adb](https://github.com/SAP/ui5-webcomponents/commit/3858adb1d2e88c1bd26b09f12a25a7dffc691ba2)), closes [#4932](https://github.com/SAP/ui5-webcomponents/issues/4932)
+* **ui5-multi-combobox:** apply focus when invoked explicitly ([#5850](https://github.com/SAP/ui5-webcomponents/issues/5850)) ([212b2ef](https://github.com/SAP/ui5-webcomponents/commit/212b2ef49d54f6328220a6d713e3ce8be5f8ab36))
+* **ui5-panel:** improve focus outline visualization ([#5811](https://github.com/SAP/ui5-webcomponents/issues/5811)) ([83b244c](https://github.com/SAP/ui5-webcomponents/commit/83b244c300cd179c0584d0bf6d302e3631fb3581))
+* **ui5-radio-button:** correct syncing radio group when exiting DOM ([#5859](https://github.com/SAP/ui5-webcomponents/issues/5859)) ([0dca9b2](https://github.com/SAP/ui5-webcomponents/commit/0dca9b2c87509be9ec3725681d8aa2dd23e59219)), closes [#5803](https://github.com/SAP/ui5-webcomponents/issues/5803)
+* **ui5-tabcontainer:** fix closing overflow on mobile ([#5855](https://github.com/SAP/ui5-webcomponents/issues/5855)) ([996714e](https://github.com/SAP/ui5-webcomponents/commit/996714eb9345e3efd796cf8b3c46c8e198fd18e2)), closes [#5854](https://github.com/SAP/ui5-webcomponents/issues/5854)
+* **ui5-tabcontainer:** fixed error when no tabs ([#5793](https://github.com/SAP/ui5-webcomponents/issues/5793)) ([cfb8951](https://github.com/SAP/ui5-webcomponents/commit/cfb8951f0acb30e1ebf54a18c2e9a3f5cf88cba1))
+* **ui5-tabcontainer:** fixed tabs accessibility issues ([#5846](https://github.com/SAP/ui5-webcomponents/issues/5846)) ([e633b8b](https://github.com/SAP/ui5-webcomponents/commit/e633b8b3003136f6ad7696a0d12af807e38c18dc))
+* **ui5-table:** add bottom border in Horizon themes ([#5807](https://github.com/SAP/ui5-webcomponents/issues/5807)) ([63bbf89](https://github.com/SAP/ui5-webcomponents/commit/63bbf89556fc254b3b53f6954bf48be0ad69b1a5))
+* **ui5-table:** adjust samples according to the guidelines ([#5828](https://github.com/SAP/ui5-webcomponents/issues/5828)) ([debf472](https://github.com/SAP/ui5-webcomponents/commit/debf472f18f6a91a5eadee6d7f64da8563d4d0f7))
+* **ui5-table:** apply correct padding in RTL mode ([#5805](https://github.com/SAP/ui5-webcomponents/issues/5805)) ([301fc4e](https://github.com/SAP/ui5-webcomponents/commit/301fc4ede2c1ab899a6a9268ed9bf776112ff42f))
+* **ui5-table:** count header row as first one ([#5800](https://github.com/SAP/ui5-webcomponents/issues/5800)) ([9bef86f](https://github.com/SAP/ui5-webcomponents/commit/9bef86fd7b780e8e4fe7ba6e2720ff0444e73847))
+* **ui5-textarea:** announce value state type ([#5798](https://github.com/SAP/ui5-webcomponents/issues/5798)) ([a689502](https://github.com/SAP/ui5-webcomponents/commit/a6895025300e707d63c0ab4f413b07f6a6f96563)), closes [#5716](https://github.com/SAP/ui5-webcomponents/issues/5716)
+* **ui5-tokenizer:** return correct token on delete event ([#5744](https://github.com/SAP/ui5-webcomponents/issues/5744)) ([d694a88](https://github.com/SAP/ui5-webcomponents/commit/d694a8884782c576bbef720068bbbd62db3602a3))
+
+
+### Features
+
+* **main:** add support for custom SVG icons ([#5865](https://github.com/SAP/ui5-webcomponents/issues/5865)) ([d8b7200](https://github.com/SAP/ui5-webcomponents/commit/d8b7200f30c16d94b7f15ddbdf9808d8efbaa38c))
+* **ui5-menu-item:** implement additional text ([#5867](https://github.com/SAP/ui5-webcomponents/issues/5867)) ([bf991b6](https://github.com/SAP/ui5-webcomponents/commit/bf991b6bb519e4cc849a542d67f4954efc4b55e3))
+* **ui5-tree:** introduce `accessibleName` and  `accessibleNameRef` properties ([#5804](https://github.com/SAP/ui5-webcomponents/issues/5804)) ([2e3452a](https://github.com/SAP/ui5-webcomponents/commit/2e3452a98463aa3b78231651ac63771d3cbc5c1a))
+
+
+
+
+
+## [1.7.1](https://github.com/SAP/ui5-webcomponents/compare/v1.7.0...v1.7.1) (2022-09-08)
+
+
+### Bug Fixes
+
+* **ui5-tabcontainer:** fixed error when no tabs ([#5793](https://github.com/SAP/ui5-webcomponents/issues/5793)) ([4aefe17](https://github.com/SAP/ui5-webcomponents/commit/4aefe176bfed5a6ba963418413aa167955b40418))
+
+
+
+
+
 # [1.7.0](https://github.com/SAP/ui5-webcomponents/compare/v1.6.0...v1.7.0) (2022-09-02)
 
 

package/dist/ComboBox.js

@@ -43,7 +43,6 @@ import {
 	INPUT_SUGGESTIONS_TITLE,
 	SELECT_OPTIONS,
 	LIST_ITEM_POSITION,
-	LIST_ITEM_SELECTED,
 	LIST_ITEM_GROUP_HEADER,
 } from "./generated/i18n/i18n-defaults.js";
 
@@ -986,13 +985,12 @@ class ComboBox extends UI5Element {
 		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);
 
 		if (isGroupItem) {
 			announce(`${groupHeaderText} ${currentItem.text} ${itemPositionText}`, "Polite");
 		} else {
-			announce(`${itemPositionText} ${itemSelectionText}`, "Polite");
+			announce(`${itemPositionText}`, "Polite");
 		}
 	}
 

package/dist/Dialog.js

@@ -98,6 +98,10 @@ const metadata = {
 		 * If this property is set to true, the Dialog will be draggable by its header.
 		 * <br><br>
 		 * <b>Note:</b> The component can be draggable only in desktop mode.
+		 * <br><br>
+		 * <b>Note:</b> This property overrides the default HTML "draggable" attribute native behavior.
+		 * When "draggable" is set to true, the native browser "draggable"
+		 * behavior is prevented and only the Dialog custom logic ("draggable by its header") works.
 		 * @type {boolean}
 		 * @defaultvalue false
 		 * @since 1.0.0-rc.9
@@ -217,6 +221,8 @@ class Dialog extends Popup {
 
 		this._resizeMouseMoveHandler = this._onResizeMouseMove.bind(this);
 		this._resizeMouseUpHandler = this._onResizeMouseUp.bind(this);
+
+		this._dragStartHandler = this._handleDragStart.bind(this);
 	}
 
 	static get metadata() {
@@ -348,11 +354,15 @@ class Dialog extends Popup {
 	onEnterDOM() {
 		super.onEnterDOM();
 		this._attachScreenResizeHandler();
+
+		this.addEventListener("dragstart", this._dragStartHandler);
 	}
 
 	onExitDOM() {
 		super.onExitDOM();
 		this._detachScreenResizeHandler();
+
+		this.removeEventListener("dragstart", this._dragStartHandler);
 	}
 
 	/**
@@ -648,6 +658,12 @@ class Dialog extends Popup {
 		this._detachMouseResizeHandlers();
 	}
 
+	_handleDragStart(event) {
+		if (this.draggable) {
+			event.preventDefault();
+		}
+	}
+
 	_attachMouseResizeHandlers() {
 		this._detachScreenResizeHandler();
 

package/dist/Icon.js

@@ -3,8 +3,8 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getIconData, getIconDataSync } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
 import IconTemplate from "./generated/templates/IconTemplate.lit.js";
-
 // Styles
 import iconCss from "./generated/themes/Icon.css.js";
 
@@ -354,11 +354,18 @@ class Icon extends UI5Element {
 			/* eslint-disable-next-line */
 			return console.warn("Icon name property is required", this);
 		}
+
 		let iconData = getIconDataSync(name);
 		if (!iconData) {
 			iconData = await getIconData(name);
 		}
 
+		this.viewBox = iconData.viewBox || "0 0 512 512";
+		if (iconData.customTemplate) {
+			iconData.pathData = [];
+			this.customSvg = executeTemplate(iconData.customTemplate, this);
+		}
+
 		if (iconData === ICON_NOT_FOUND) {
 			this.invalid = true;
 			/* eslint-disable-next-line */

package/dist/Input.js

@@ -63,8 +63,6 @@ import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverComm
 import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
 import SuggestionsCss from "./generated/themes/Suggestions.css.js";
 
-const rgxFloat = new RegExp(/(\+|-)?\d+(\.|,)\d+/);
-
 /**
  * @public
  */
@@ -268,6 +266,20 @@ const metadata = {
 			type: String,
 		},
 
+		/**
+		 * Defines the inner stored value of the component.
+		 * <br><br>
+		 * <b>Note:</b> The property is updated upon typing. In some special cases the old value is kept (e.g. deleting the value after the dot in a float)
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @private
+		 */
+		_innerValue: {
+			type: String,
+			noAttribute: true,
+		},
+
 		/**
 		 * Defines the value state of the component.
 		 * <br><br>
@@ -618,9 +630,6 @@ class Input extends UI5Element {
 		// The value that the user is typed in the input
 		this.valueBeforeAutoComplete = "";
 
-		// Indicates, if the user pressed the BACKSPACE key.
-		this._backspaceKeyDown = false;
-
 		// Indicates, if the user is typing. Gets reset once popup is closed
 		this.isTyping = false;
 
@@ -637,6 +646,8 @@ class Input extends UI5Element {
 		this.suggestionsTexts = [];
 
 		this._handleResizeBound = this._handleResize.bind(this);
+
+		this._keepInnerValue = false;
 	}
 
 	onEnterDOM() {
@@ -648,6 +659,10 @@ class Input extends UI5Element {
 	}
 
 	onBeforeRendering() {
+		if (!this._keepInnerValue) {
+			this._innerValue = this.value;
+		}
+
 		if (this.showSuggestions) {
 			this.enableSuggestions();
 			this.suggestionsTexts = this.Suggestions.defaultSlotProperties(this.highlightValue);
@@ -755,7 +770,6 @@ class Input extends UI5Element {
 		}
 
 		if (isBackSpace(event)) {
-			this._backspaceKeyDown = true;
 			this._selectedText = window.getSelection().toString();
 		}
 
@@ -775,7 +789,6 @@ class Input extends UI5Element {
 		}
 
 		this._keyDown = false;
-		this._backspaceKeyDown = false;
 	}
 
 	/* Event handling */
@@ -916,6 +929,8 @@ class Input extends UI5Element {
 		const focusedOutToSuggestions = this.Suggestions && event.relatedTarget && event.relatedTarget.shadowRoot && event.relatedTarget.shadowRoot.contains(this.Suggestions.responsivePopover);
 		const focusedOutToValueStateMessage = event.relatedTarget && event.relatedTarget.shadowRoot && event.relatedTarget.shadowRoot.querySelector(".ui5-valuestatemessage-root");
 
+		this._keepInnerValue = false;
+
 		if (this.showClearIcon && !this.effectiveShowClearIcon) {
 			this._clearIconClicked = false;
 			this._handleChange();
@@ -999,47 +1014,59 @@ class Input extends UI5Element {
 		const inputDomRef = this.getInputDOMRefSync();
 		const emptyValueFiredOnNumberInput = this.value && this.isTypeNumber && !inputDomRef.value;
 		const eventType = event.inputType || (event.detail && event.detail.inputType);
-
-		this._shouldAutocomplete = eventType !== "deleteContentBackward" && !this.noTypeahead;
+		this._keepInnerValue = false;
+
+		const allowedEventTypes = [
+			"deleteWordBackward",
+			"deleteWordForward",
+			"deleteSoftLineBackward",
+			"deleteSoftLineForward",
+			"deleteEntireSoftLine",
+			"deleteHardLineBackward",
+			"deleteHardLineForward",
+			"deleteByDrag",
+			"deleteByCut",
+			"deleteContent",
+			"deleteContentBackward",
+			"deleteContentForward",
+			"historyUndo",
+		];
+
+		this._shouldAutocomplete = !allowedEventTypes.includes(eventType) && !this.noTypeahead;
 		this.suggestionSelectionCanceled = false;
 
-		if (emptyValueFiredOnNumberInput && !this._backspaceKeyDown) {
-			// For input with type="Number", if the delimiter is entered second time,
-			// the inner input is firing event with empty value
-			return;
-		}
-
-		if (emptyValueFiredOnNumberInput && this._backspaceKeyDown) {
-			// Issue: when the user removes the character(s) after the delimeter of numeric Input,
-			// the native input is firing event with an empty value and we have to manually handle this case,
-			// otherwise the entire input will be cleared as we sync the "value".
-
-			// There are tree scenarios:
-			// Example: type "123.4" and press BACKSPACE - the native input is firing event with empty value.
-			// Example: type "123.456", select/mark "456" and press BACKSPACE - the native input is firing event with empty value.
-			// Example: type "123.456", select/mark "123.456" and press BACKSPACE - the native input is firing event with empty value,
-			// but this time that's really the case.
-
-			// Perform manual handling in case of floating number
-			// and if the user did not select the entire input value
-			if (this._selectedText.indexOf(",") > -1) {
-				this._selectedText = this._selectedText.replace(",", ".");
-			}
-
-			if (rgxFloat.test(this.value) && this._selectedText !== this.value) {
-				const newValue = this.removeFractionalPart(this.value);
-
-				// update state
-				this.value = newValue;
-				this.highlightValue = newValue;
-				this.valueBeforeItemPreview = newValue;
-
-				// fire events
-				this.fireEvent(this.EVENT_INPUT, { inputType: event.inputType });
-				this.fireEvent("value-changed");
-				return;
-			}
+		// ---- Special cases of numeric Input ----
+		// ---------------- Start -----------------
+
+		// When the last character after the delimiter is removed.
+		// In such cases, we want to skip the re-rendering of the
+		// component as this leads to cursor repositioning and causes user experience issues.
+
+		// There are few scenarios:
+		// Example: type "123.4" and press BACKSPACE - the native input is firing event with the whole part as value (123).
+		// Pressing BACKSPACE again will remove the delimiter and the native input will fire event with the whole part as value again (123).
+		// Example: type "123.456", select/mark "456" and press BACKSPACE - the native input is firing event with the whole part as value (123).
+		// Example: type "123.456", select/mark "123.456" and press BACKSPACE - the native input is firing event with empty value.
+		const delimiterCase = this.isTypeNumber
+			&& (event.inputType === "deleteContentForward" || event.inputType === "deleteContentBackward")
+			&& !event.target.value.includes(".")
+			&& this.value.includes(".");
+
+		// Handle special numeric notation with "e", example "12.5e12"
+		const eNotationCase = emptyValueFiredOnNumberInput && event.data === "e";
+
+		// Handle special numeric notation with "-", example "-3"
+		// When pressing BACKSPACE, the native input fires event with empty value
+		const minusRemovalCase = emptyValueFiredOnNumberInput
+			&& this.value.startsWith("-")
+			&& this.value.length === 2
+			&& (event.inputType === "deleteContentForward" || event.inputType === "deleteContentBackward");
+
+		if (delimiterCase || eNotationCase || minusRemovalCase) {
+			this.value = event.target.value;
+			this._keepInnerValue = true;
 		}
+		// ----------------- End ------------------
 
 		if (event.target === inputDomRef) {
 			this.focused = true;
@@ -1086,6 +1113,7 @@ class Input extends UI5Element {
 		const innerInput = this.getInputDOMRefSync();
 
 		filterValue = filterValue || "";
+		this._innerValue = value;
 		this.value = value;
 
 		innerInput.value = value;
@@ -1249,8 +1277,6 @@ class Input extends UI5Element {
 	}
 
 	async fireEventByAction(action, event) {
-		await this.getInputDOMRef();
-
 		if (this.disabled || this.readonly) {
 			return;
 		}

package/dist/MenuItem.js

@@ -17,6 +17,18 @@ const metadata = {
 			type: String,
 		},
 
+		/**
+		 * Defines the <code>additionalText</code>, displayed in the end of the menu item.
+		 * <b>Note:</b> The additional text would not be displayed if the item has a submenu.
+		 *
+		 * @type {string}
+		 * @public
+		 * @since 1.8.0
+		 */
+		additionalText: {
+			type: String,
+		},
+
 		/**
 		 * Defines the icon to be displayed as graphical element within the component.
 		 * The SAP-icons font provides numerous options.
@@ -167,6 +179,10 @@ class MenuItem extends UI5Element {
 		return !!Object.keys(this._subMenu).length;
 	}
 
+	get _additionalText() {
+		return this.hasChildren ? "" : this.additionalText;
+	}
+
 	get ariaLabelledByText() {
 		return `${this.text} ${this.accessibleName}`.trim();
 	}

package/dist/MultiComboBox.js

@@ -1082,7 +1082,7 @@ class MultiComboBox extends UI5Element {
 			if (isCut) {
 				const cutResult = this._tokenizer._fillClipboard("cut", selectedTokens);
 				selectedTokens.forEach(token => {
-					this._tokenizer._tokenDelete(event, token);
+					this._tokenizer._tokenKeyboardDelete(event, token);
 				});
 
 				this.focus();

package/dist/MultiInput.js

@@ -146,6 +146,11 @@ class MultiInput extends Input {
 			return;
 		}
 
+		if (focusedToken) {
+			this.fireEvent("token-delete", { token: focusedToken });
+			return;
+		}
+
 		if (selectedTokens.indexOf(focusedToken) === -1) {
 			selectedTokens.push(focusedToken);
 		}

package/dist/RadioButton.js

@@ -323,12 +323,20 @@ class RadioButton extends UI5Element {
 		this._enableFormSupport();
 	}
 
-	syncGroup() {
+	onExitDOM() {
+		this.syncGroup(true);
+	}
+
+	syncGroup(forceRemove) {
 		const oldGroup = this._name;
 		const currentGroup = this.name;
 		const oldChecked = this._checked;
 		const currentChecked = this.checked;
 
+		if (forceRemove) {
+			RadioButtonGroup.removeFromGroup(this, oldGroup);
+		}
+
 		if (currentGroup !== oldGroup) {
 			if (oldGroup) {
 				// remove the control from the previous group

package/dist/Tab.js

@@ -337,6 +337,10 @@ class Tab extends UI5Element {
 			labels.push(`${this._id}-icon`);
 		}
 
+		if (this._designDescription) {
+			labels.push(`${this._id}-designDescription`);
+		}
+
 		return labels.join(" ");
 	}
 
@@ -395,6 +399,14 @@ class Tab extends UI5Element {
 		}
 	}
 
+	get _designDescription() {
+		if (this.design === SemanticColor.Default) {
+			return null;
+		}
+
+		return this.design;
+	}
+
 	get semanticIconClasses() {
 		const classes = ["ui5-tab-semantic-icon"];
 

package/dist/TabContainer.js

@@ -378,17 +378,20 @@ class TabContainer extends UI5Element {
 	}
 
 	onBeforeRendering() {
-		// update selected tab
 		this._allItemsAndSubItems = this._getAllSubItems(this.items);
-		if (this._allItemsAndSubItems.length) {
-			const selectedTabs = this._allItemsAndSubItems.filter(tab => tab.selected);
-			if (selectedTabs.length) {
-				this._selectedTab = selectedTabs[0];
-			} else {
-				this._selectedTab = this._allItemsAndSubItems[0];
-				this._selectedTab._selected = true;
-			}
+		if (!this._allItemsAndSubItems.length) {
+			return;
+		}
+
+		// update selected tab
+		const selectedTabs = this._allItemsAndSubItems.filter(tab => tab.selected);
+		if (selectedTabs.length) {
+			this._selectedTab = selectedTabs[0];
+		} else {
+			this._selectedTab = this._allItemsAndSubItems[0];
+			this._selectedTab._selected = true;
 		}
+
 		this._setItemsPrivateProperties(this.items);
 
 		if (!this._animationRunning) {
@@ -401,6 +404,10 @@ class TabContainer extends UI5Element {
 	}
 
 	onAfterRendering() {
+		if (!this.items.length) {
+			return;
+		}
+
 		this._setItemsForStrip();
 
 		if (!this.shadowRoot.contains(document.activeElement)) {
@@ -619,6 +626,7 @@ class TabContainer extends UI5Element {
 	 * Calling <code>allItems</code> on this TabContainer will return the instances in the following order:
 	 * <code>[ ui5-tab#First, ui5-tab#Nested, ui5-tab#Second, ui5-tab-separator#sep, ui5-tab#Third ]</code>
 	 * @public
+	 * @readonly
 	 *
 	 * @returns {sap.ui.webcomponents.main.ITab[]}
 	 */
@@ -1137,6 +1145,11 @@ class TabContainer extends UI5Element {
 		return staticAreaItem.querySelector(`#${this._id}-overflowMenu`);
 	}
 
+	async _closeRespPopover() {
+		this.responsivePopover = await this._respPopover();
+		this.responsivePopover.close();
+	}
+
 	get classes() {
 		return {
 			root: {

package/dist/Table.js

@@ -35,7 +35,7 @@ import CheckBox from "./CheckBox.js"; // Ensure the dependency as it is being us
 import {
 	LOAD_MORE_TEXT,
 	ARIA_LABEL_SELECT_ALL_CHECKBOX,
-	TABLE_HEADER_ROW_TEXT,
+	TABLE_HEADER_ROW_INFORMATION,
 	TABLE_ROW_POSITION,
 } from "./generated/i18n/i18n-defaults.js";
 
@@ -516,7 +516,7 @@ class Table extends UI5Element {
 	onBeforeRendering() {
 		const columnSettings = this.getColumnPropagationSettings();
 		const columnSettingsString = JSON.stringify(columnSettings);
-		const rowsCount = this.rows.length;
+		const rowsCount = this.rows.length + 1;
 		const selectedRows = this.selectedRows;
 
 		this.rows.forEach((row, index) => {
@@ -525,7 +525,7 @@ class Table extends UI5Element {
 				row._columnsInfoString = JSON.stringify(row._columnsInfo);
 			}
 
-			row._ariaPosition = Table.i18nBundle.getText(TABLE_ROW_POSITION, index + 1, rowsCount);
+			row._ariaPosition = Table.i18nBundle.getText(TABLE_ROW_POSITION, index + 2, rowsCount);
 			row._busy = this.busy;
 			row.removeEventListener("ui5-_focused", this.fnOnRowFocused);
 			row.addEventListener("ui5-_focused", this.fnOnRowFocused);
@@ -1131,7 +1131,8 @@ class Table extends UI5Element {
 	}
 
 	get ariaLabelText() {
-		const headerRowText = Table.i18nBundle.getText(TABLE_HEADER_ROW_TEXT);
+		const rowsCount = this.rows.length + 1;
+		const headerRowText = Table.i18nBundle.getText(TABLE_HEADER_ROW_INFORMATION, rowsCount);
 		const columnsTitle = this.columns.map(column => {
 			return column.textContent.trim();
 		}).join(" ");

package/dist/TextArea.js

@@ -19,9 +19,14 @@ import TextAreaTemplate from "./generated/templates/TextAreaTemplate.lit.js";
 import TextAreaPopoverTemplate from "./generated/templates/TextAreaPopoverTemplate.lit.js";
 
 import {
+	VALUE_STATE_SUCCESS,
 	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,
 	TEXTAREA_CHARACTERS_LEFT,
 	TEXTAREA_CHARACTERS_EXCEEDED,
 } from "./generated/i18n/i18n-defaults.js";
@@ -619,10 +624,14 @@ class TextArea extends UI5Element {
 		}
 
 		if (this.hasCustomValueState) {
-			return this.valueStateMessageText.map(el => el.textContent).join(" ");
+			return `${this.valueStateTypeMappings[this.valueState]}`.concat(" ", this.valueStateMessageText.map(el => el.textContent).join(" "));
 		}
 
-		return this.valueStateText;
+		return `${this.valueStateTypeMappings[this.valueState]} ${this.valueStateDefaultText}`;
+	}
+
+	get valueStateDefaultText() {
+		return this.valueStateTextMappings[this.valueState];
 	}
 
 	get ariaInvalid() {
@@ -649,14 +658,6 @@ class TextArea extends UI5Element {
 		return this.valueStateMessage.map(x => x.cloneNode(true));
 	}
 
-	get valueStateText() {
-		if (this.valueState !== ValueState.Error) {
-			return this.valueStateTextMappings()[ValueState.Warning];
-		}
-
-		return this.valueStateTextMappings()[this.valueState];
-	}
-
 	get _valueStatePopoverHorizontalAlign() {
 		return this.effectiveDir !== "rtl" ? "Left" : "Right";
 	}
@@ -675,14 +676,24 @@ class TextArea extends UI5Element {
 		return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
 	}
 
-	valueStateTextMappings() {
+	get valueStateTextMappings() {
 		return {
+			"Success": TextArea.i18nBundle.getText(VALUE_STATE_SUCCESS),
 			"Information": TextArea.i18nBundle.getText(VALUE_STATE_INFORMATION),
 			"Error": TextArea.i18nBundle.getText(VALUE_STATE_ERROR),
 			"Warning": TextArea.i18nBundle.getText(VALUE_STATE_WARNING),
 		};
 	}
 
+	get valueStateTypeMappings() {
+		return {
+			"Success": TextArea.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
+			"Information": TextArea.i18nBundle.getText(VALUE_STATE_TYPE_INFORMATION),
+			"Error": TextArea.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
+			"Warning": TextArea.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
+		};
+	}
+
 	static get dependencies() {
 		return [Popover, Icon];
 	}