@ui5/webcomponents 0.31.17 → 0.31.18

package/dist/Card.js

@@ -3,6 +3,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import CardTemplate from "./generated/templates/CardTemplate.lit.js";
 import Icon from "./Icon.js";
 
@@ -137,6 +138,18 @@ const metadata = {
 			defaultValue: "",
 		},
 
+		/**
+		 * Define the <code>aria-level</code> attribute of the component
+		 * <b>Note: </b> If the interactive property is set, <code>aria-level</code> attribute is not rendered at all.
+		 * @private
+		 * @type {Integer}
+		 * @defaultValue 3
+		 */
+		ariaLevel: {
+			type: Integer,
+			defaultValue: 3,
+		},
+
 		_headerActive: {
 			type: Boolean,
 			noAttribute: true,
@@ -230,8 +243,12 @@ class Card extends UI5Element {
 		return this.headerInteractive ? "button" : "heading";
 	}
 
-	get ariaLevel() {
-		return this.headerInteractive ? undefined : "3";
+	get _ariaLevel() {
+		if (this.interactive) {
+			return undefined;
+		}
+
+		return this.ariaLevel;
 	}
 
 	get hasHeader() {

package/dist/ComboBox.js

@@ -4,6 +4,7 @@ import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
@@ -24,6 +25,8 @@ import {
 	VALUE_STATE_INFORMATION,
 	INPUT_SUGGESTIONS_TITLE,
 	SELECT_OPTIONS,
+	LIST_ITEM_POSITION,
+	LIST_ITEM_SELECTED,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Templates
@@ -776,6 +779,13 @@ class ComboBox extends UI5Element {
 		this._itemFocused = true;
 	}
 
+	announceSelectedItem(indexOfItem) {
+		const itemPositionText = this.i18nBundle.getText(LIST_ITEM_POSITION, [indexOfItem + 1], [this._filteredItems.length]);
+		const itemSelectionText = this.i18nBundle.getText(LIST_ITEM_SELECTED);
+
+		announce(`${itemPositionText} ${itemSelectionText}`, "Polite");
+	}
+
 	get _headerTitleText() {
 		return this.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
 	}

package/dist/FileUploader.js

@@ -274,15 +274,23 @@ class FileUploader extends UI5Element {
 		});
 	}
 
+	_onclick(event) {
+		if (event.isMarked === "button") {
+			this._input.click(event);
+		}
+	}
+
 	_onkeydown(event) {
 		if (isEnter(event)) {
 			this._input.click(event);
+			event.preventDefault();
 		}
 	}
 
 	_onkeyup(event) {
 		if (isSpace(event)) {
 			this._input.click(event);
+			event.preventDefault();
 		}
 	}
 

package/dist/Input.js

@@ -836,6 +836,14 @@ class Input extends UI5Element {
 		return !!this._isPopoverOpen;
 	}
 
+	/**
+	 * Checks if the value state popover is open.
+	 * @returns {boolean} true if the value state popover is open, false otherwise
+	 */
+	 isValueStateOpened() {
+		return !!this._isPopoverOpen;
+	}
+
 	async openPopover() {
 		const popover = await this._getPopover();
 
@@ -1168,7 +1176,8 @@ class Input extends UI5Element {
 		return {
 			popoverValueState: {
 				"ui5-valuestatemessage-root": true,
-				"ui5-responsive-popover-header": !this.isOpen(),
+				"ui5-valuestatemessage-header": true,
+				"ui5-responsive-popover-header": !this.isValueStateOpened(),
 				"ui5-valuestatemessage--success": this.valueState === ValueState.Success,
 				"ui5-valuestatemessage--error": this.valueState === ValueState.Error,
 				"ui5-valuestatemessage--warning": this.valueState === ValueState.Warning,
@@ -1185,7 +1194,6 @@ class Input extends UI5Element {
 			suggestionPopoverHeader: {
 				"display": this._listWidth === 0 ? "none" : "inline-block",
 				"width": `${this._listWidth}px`,
-				"padding": "0.925rem 1rem",
 			},
 			suggestionsPopover: {
 				"max-width": `${this._inputWidth}px`,

package/dist/Label.js

@@ -42,7 +42,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines whether semi-colon is added to the <code>ui5-label</code> text.
+		 * Defines whether colon is added to the component text.
 		 * <br><br>
 		 * <b>Note:</b> Usually used in forms.
 		 * @type {boolean}

package/dist/List.js

@@ -208,16 +208,19 @@ const metadata = {
 		},
 
 		/**
-		 * Used to externally manipulate the role of the list
+		 * Defines the accessible role of the component.
+		 * <br><br>
+		 * <b>Note:</b> If you use notification list items,
+		 * it's recommended to set <code>accessible-role="list"</code> for better accessibility.
 		 *
 		 * @private
 		 * @type {String}
-		 * @defaultvalue "listbox"
-		 * @since 1.0.0-rc.9
+		 * @defaultvalue "list"
+		 * @since 1.0.0-rc.15
 		 */
-		accRole: {
+		 accessibleRole: {
 			type: String,
-			defaultValue: "listbox",
+			defaultValue: "list",
 		},
 
 		/**

package/dist/ListItem.js

@@ -13,6 +13,7 @@ import {
 	ARIA_LABEL_LIST_ITEM_CHECKBOX,
 	ARIA_LABEL_LIST_ITEM_RADIO_BUTTON,
 	LIST_ITEM_SELECTED,
+	LIST_ITEM_NOT_SELECTED,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
@@ -77,13 +78,13 @@ const metadata = {
 		 *
 		 * @private
 		 * @type {String}
-		 * @defaultvalue "option"
+		 * @defaultvalue "listitem"
 		 * @since 1.0.0-rc.9
 		 *
 		 */
 		role: {
 			type: String,
-			defaultValue: "option",
+			defaultValue: "listitem",
 		},
 
 		_mode: {
@@ -317,6 +318,20 @@ class ListItem extends ListItemBase {
 		return undefined;
 	}
 
+	get ariaSelectedText() {
+		let ariaSelectedText;
+
+		// Selected state needs to be supported separately since now the role mapping is list -> listitem[]
+		// to avoid the issue of nesting interactive elements, ex. (option -> radio/checkbox);
+		// The text is added to aria-describedby because as part of the aria-labelledby
+		// the whole content of the item is readout when the aria-labelledby value is changed.
+		if (this.ariaSelected !== undefined) {
+			ariaSelectedText = this.ariaSelected ? this.i18nBundle.getText(LIST_ITEM_SELECTED) : this.i18nBundle.getText(LIST_ITEM_NOT_SELECTED);
+		}
+
+		return ariaSelectedText;
+	}
+
 	get deleteText() {
 		return this.i18nBundle.getText(DELETE);
 	}
@@ -328,7 +343,7 @@ class ListItem extends ListItemBase {
 			ariaLevel: undefined,
 			ariaLabel: this.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_CHECKBOX),
 			ariaLabelRadioButton: this.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_RADIO_BUTTON),
-			listItemAriaLabel: this.ariaSelected ? this.i18nBundle.getText(LIST_ITEM_SELECTED) : undefined,
+			ariaSelectedText: this.ariaSelectedText,
 		};
 	}
 

package/dist/Toast.js

@@ -79,6 +79,15 @@ const metadata = {
 		hover: {
 			type: Boolean,
 		},
+
+		/**
+		 * Indicates whether the component DOM is rendered.
+		 * @type {boolean}
+		 * @private
+		 */
+		domRendered: {
+			type: Boolean,
+		},
 	},
 	slots: /** @lends sap.ui.webcomponents.main.Toast.prototype */ {
 		/**
@@ -206,6 +215,7 @@ class Toast extends UI5Element {
 	}
 
 	_initiateOpening() {
+		this.domRendered = true;
 		requestAnimationFrame(_ => {
 			this.open = true;
 		});
@@ -215,6 +225,7 @@ class Toast extends UI5Element {
 		if (this.hover) {
 			return;
 		}
+		this.domRendered = false;
 		this.open = false;
 	}
 

package/dist/TreeListItem.js

@@ -10,7 +10,6 @@ import {
 	TREE_ITEM_ARIA_LABEL,
 	TREE_ITEM_EXPAND_NODE,
 	TREE_ITEM_COLLAPSE_NODE,
-	LIST_ITEM_SELECTED,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Template
@@ -275,7 +274,8 @@ class TreeListItem extends ListItem {
 			ariaLevel: this.level,
 			posinset: this._posinset,
 			setsize: this._setsize,
-			listItemAriaLabel: this.ariaLabelText,
+			ariaSelectedText: this.ariaSelectedText,
+			listItemAriaLabel: this.i18nBundle.getText(TREE_ITEM_ARIA_LABEL),
 		};
 	}
 
@@ -304,16 +304,6 @@ class TreeListItem extends ListItem {
 		}
 	}
 
-	get ariaLabelText() {
-		let text = this.i18nBundle.getText(TREE_ITEM_ARIA_LABEL);
-
-		if (this.selected) {
-			text += ` ${this.i18nBundle.getText(LIST_ITEM_SELECTED)}`;
-		}
-
-		return text;
-	}
-
 	get iconAccessibleName() {
 		return this.expanded ? this.i18nBundle.getText(TREE_ITEM_COLLAPSE_NODE) : this.i18nBundle.getText(TREE_ITEM_EXPAND_NODE);
 	}