@ui5/webcomponents 0.31.22 → 0.31.26

package/src/MessageStrip.hbs

@@ -24,12 +24,12 @@
 
 	{{#unless noCloseButton}}
 		<ui5-button
-				icon="decline"
-				icon-size=".75rem"
-				design="Transparent"
-				class="ui5-messagestrip-close-button"
-				title="{{_closeButtonText}}"
-				@click={{_closeClick}}
+			icon="decline"
+			icon-size=".75rem"
+			design="Transparent"
+			class="ui5-messagestrip-close-button"
+			._buttonAccInfo="{{accInfo.button}}"
+			@click={{_closeClick}}
 		></ui5-button>
 	{{/unless}}
 </div>

package/src/MessageStrip.js

@@ -10,7 +10,14 @@ import MessageStripType from "./types/MessageStripType.js";
 import MessageStripTemplate from "./generated/templates/MessageStripTemplate.lit.js";
 import Icon from "./Icon.js";
 import Button from "./Button.js";
-import { MESSAGE_STRIP_CLOSE_BUTTON } from "./generated/i18n/i18n-defaults.js";
+import {
+	MESSAGE_STRIP_CLOSE_BUTTON,
+	MESSAGE_STRIP_CLOSABLE,
+	MESSAGE_STRIP_ERROR,
+	MESSAGE_STRIP_WARNING,
+	MESSAGE_STRIP_SUCCESS,
+	MESSAGE_STRIP_INFORMATION,
+} from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import messageStripCss from "./generated/themes/MessageStrip.css.js";
@@ -189,14 +196,27 @@ class MessageStrip extends UI5Element {
 		};
 	}
 
+	get designAnnouncementMappings() {
+		return {
+			"Information": this.i18nBundle.getText(MESSAGE_STRIP_INFORMATION),
+			"Positive": this.i18nBundle.getText(MESSAGE_STRIP_SUCCESS),
+			"Negative": this.i18nBundle.getText(MESSAGE_STRIP_ERROR),
+			"Warning": this.i18nBundle.getText(MESSAGE_STRIP_WARNING),
+		};
+	}
+
 	get hiddenText() {
-		return `Message Strip ${this.type} ${this.noCloseButton ? "" : "closable"}`;
+		return `${this.designAnnouncementMappings[this.type]} ${this.noCloseButton ? "" : this._closableText}`;
 	}
 
 	get _closeButtonText() {
 		return this.i18nBundle.getText(MESSAGE_STRIP_CLOSE_BUTTON);
 	}
 
+	get _closableText() {
+		return this.i18nBundle.getText(MESSAGE_STRIP_CLOSABLE);
+	}
+
 	get classes() {
 		return {
 			root: {
@@ -219,6 +239,14 @@ class MessageStrip extends UI5Element {
 	get typeClasses() {
 		return MessageStrip.typeClassesMappings()[this.type];
 	}
+
+	get accInfo() {
+		return {
+			"button": {
+				"title": this._closeButtonText,
+			},
+		};
+	}
 }
 
 MessageStrip.define();

package/src/MultiComboBox.js

@@ -852,6 +852,10 @@ class MultiComboBox extends UI5Element {
 		return (this._isFocusInside || this.open) && !this.readonly;
 	}
 
+	get _valueStatePopoverHorizontalAlign() {
+		return this.effectiveDir !== "rtl" ? "Left" : "Right";
+	}
+
 	get classes() {
 		return {
 			popoverValueState: {

package/src/MultiComboBoxPopover.hbs

@@ -98,7 +98,7 @@
 		no-arrow
 		class="ui5-valuestatemessage-popover"
 		placement-type="Bottom"
-		horizontal-align="Left"
+		horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
 	>
 		<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
 			{{> valueStateMessage}}

package/src/TabContainer.hbs

@@ -11,6 +11,7 @@
 			<div class="{{classes.headerBackArrow}}">
 				<ui5-button @click="{{_onHeaderBackArrowClick}}"
 							icon="slim-arrow-left"
+							data-ui5-stable="tabs-left"
 							design="Transparent"
 							tabindex="-1"
 							title="{{previousIconACCName}}"></ui5-button>
@@ -37,6 +38,7 @@
 			<div class="{{classes.headerForwardArrow}}">
 			<ui5-button @click="{{_onHeaderForwardArrowClick}}"
 						icon="slim-arrow-right"
+						data-ui5-stable="tabs-right"
 						design="Transparent"
 						tabindex="-1"
 						title="{{nextIconACCName}}"></ui5-button>
@@ -53,6 +55,7 @@
 				{{else}}
 					<ui5-button
 						icon="{{overflowMenuIcon}}"
+						data-ui5-stable="tabs-overflow"
 						design="Transparent"
 						tabindex="-1"
 						title="{{overflowMenuTitle}}"

package/src/TabContainer.js

@@ -458,7 +458,7 @@ class TabContainer extends UI5Element {
 	}
 
 	async _onOverflowButtonClick(event) {
-		const button = this.overflowButton[0] || this.getDomRef().querySelector(".ui-tc__overflowButton > ui5-button");
+		const button = this.overflowButton[0] || this.getDomRef().querySelector(".ui-tc__overflowButton > [ui5-button]");
 
 		if (event.target !== button) {
 			return;

package/src/TableRow.js

@@ -105,7 +105,7 @@ class TableRow extends UI5Element {
 			this.fireEvent("row-click", { row: this });
 		}
 
-		if (isSpace(event)) {
+		if (isSpace(event) && event.target.tagName.toLowerCase() === "tr") {
 			event.preventDefault();
 		}
 	}

package/src/TextArea.js

@@ -542,6 +542,7 @@ class TextArea extends UI5Element {
 
 	get styles() {
 		const lineHeight = 1.4 * 16;
+		const mainHeight = (this.rows * lineHeight) + (this.showExceededText ? 32 : 0);
 
 		return {
 			mirror: {
@@ -549,7 +550,7 @@ class TextArea extends UI5Element {
 			},
 			main: {
 				width: "100%",
-				height: (this.rows && !this.growing) ? `${this.rows * lineHeight}px` : "100%",
+				height: (this.rows && !this.growing) ? `${mainHeight}px` : "100%",
 			},
 			focusDiv: {
 				"height": (this.showExceededText ? "calc(100% - 26px)" : "100%"),

package/src/features/InputSuggestions.js

@@ -1,6 +1,7 @@
 import { registerFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-
+import encodeXML from "@ui5/webcomponents-base/dist/util/encodeXML.js";
+import generateHighlightedMarkup from "@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js";
 import List from "../List.js";
 import ResponsivePopover from "../ResponsivePopover.js";
 import SuggestionItem from "../SuggestionItem.js";
@@ -392,31 +393,21 @@ class Suggestions {
 	}
 
 	getHighlightedText(suggestion, input) {
-		let text = suggestion.text || suggestion.textContent;
-		text = this.sanitizeText(text);
-
+		const text = suggestion.text || suggestion.textContent;
 		return this.hightlightInput(text, input);
 	}
 
 	getHighlightedDesc(suggestion, input) {
-		let text = suggestion.description;
-		text = this.sanitizeText(text);
-
+		const text = suggestion.description || "";
 		return this.hightlightInput(text, input);
 	}
 
 	hightlightInput(text, input) {
-		if (!text) {
-			return text;
-		}
-
-		const inputEscaped = input.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-		const regEx = new RegExp(inputEscaped, "ig");
-		return text.replace(regEx, match => `<b>${match}</b>`);
+		return generateHighlightedMarkup(text, input);
 	}
 
 	sanitizeText(text) {
-		return text && text.replace("<", "&lt");
+		return encodeXML(text);
 	}
 
 	static get dependencies() {

package/src/i18n/messagebundle.properties

@@ -113,7 +113,22 @@ ARIA_LABEL_LIST_MULTISELECTABLE=Contains Multi-Selectable Items
 ARIA_LABEL_LIST_DELETABLE=Contains Deletable Items
 
 #XTOL: Tooltip of messgae strip close button
-MESSAGE_STRIP_CLOSE_BUTTON=Message Strip Close
+MESSAGE_STRIP_CLOSE_BUTTON=Information Bar Close
+
+#XACT: ARIA announcement for the MessageStrip's closable state
+MESSAGE_STRIP_CLOSABLE=Closable
+
+#XACT: ARIA announcement for the MessageStrip's "Error" state
+MESSAGE_STRIP_ERROR=Error Information Bar
+
+#XACT: ARIA announcement for the MessageStrip's "Warning" state
+MESSAGE_STRIP_WARNING=Warning Information Bar
+
+#XACT: ARIA announcement for the MessageStrip's "Success" state
+MESSAGE_STRIP_SUCCESS=Success Information Bar
+
+#XACT: ARIA announcement for the MessageStrip's "Information" state
+MESSAGE_STRIP_INFORMATION=Information Bar
 
 #XFLD: MultiComboBox dialog button
 MULTICOMBOBOX_DIALOG_OK_BUTTON=OK