@ui5/webcomponents 1.7.1 → 1.9.0

package/dist/Tokenizer.js

@@ -96,7 +96,7 @@ const metadata = {
 		/**
 		 * Indicates the value state of the related input component.
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webcomponents.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @private
 		 */
@@ -132,7 +132,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.Tokenizer
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-tokenizer
  * @usestextcontent
  * @private
@@ -242,14 +242,40 @@ class Tokenizer extends UI5Element {
 	}
 
 	_delete(event) {
+		if (!event.detail) { // if there are no details, the event is triggered by a click
+			this._tokenClickDelete(event, event.target);
+			return;
+		}
+
 		if (this._selectedTokens.length) {
-			this._selectedTokens.forEach(token => this._tokenDelete(event, token));
+			this._selectedTokens.forEach(token => this._tokenKeyboardDelete(event, token));
 		} else {
-			this._tokenDelete(event);
+			this._tokenKeyboardDelete(event);
+		}
+	}
+
+	_tokenClickDelete(event, token) {
+		const tokens = this._getVisibleTokens();
+		const deletedTokenIndex = token ? tokens.indexOf(token) : tokens.indexOf(event.target); // The index of the token that just got deleted
+		const nextTokenIndex = deletedTokenIndex === tokens.length - 1 ? deletedTokenIndex - 1 : deletedTokenIndex + 1; // The index of the next token that needs to be focused next due to the deletion
+		const nextToken = tokens[nextTokenIndex]; // if the last item was deleted this will be undefined
+
+		this._handleCurrentItemAfterDeletion(nextToken);
+
+		this.fireEvent("token-delete", { ref: token || event.target });
+	}
+
+	_handleCurrentItemAfterDeletion(nextToken) {
+		if (nextToken && !isPhone()) {
+			this._itemNav.setCurrentItem(nextToken); // update the item navigation with the new token or undefined, if the last was deleted
+
+			setTimeout(() => {
+				nextToken.focus();
+			}, 0);
 		}
 	}
 
-	_tokenDelete(event, token) {
+	_tokenKeyboardDelete(event, token) {
 		let nextTokenIndex; // The index of the next token that needs to be focused next due to the deletion
 
 		const tokens = this._getVisibleTokens();
@@ -272,13 +298,7 @@ class Tokenizer extends UI5Element {
 			nextToken = notSelectedTokens[0];
 		}
 
-		if (nextToken && !isPhone()) {
-			this._itemNav.setCurrentItem(nextToken); // update the item navigation with the new token or undefined, if the last was deleted
-
-			setTimeout(() => {
-				nextToken.focus();
-			}, 0);
-		}
+		this._handleCurrentItemAfterDeletion(nextToken);
 
 		this.fireEvent("token-delete", { ref: token || event.target });
 	}

package/dist/Tree.js

@@ -1,5 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import TreeItem from "./TreeItem.js";
 import List from "./List.js";
 import TreeListItem from "./TreeListItem.js";
@@ -34,7 +35,7 @@ const metadata = {
 		 * </ul>
 		 *
 		 * @public
-		 * @type {ListMode}
+		 * @type {sap.ui.webcomponents.main.types.ListMode}
 		 * @defaultValue "None"
 		 */
 		mode: {
@@ -77,6 +78,31 @@ const metadata = {
 			type: String,
 		},
 
+		/**
+		 * Defines the accessible name of the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue: ""
+		 * @public
+		 * @since 1.8.0
+		 */
+		 accessibleName: {
+			type: String,
+		},
+
+		/**
+		 * Defines the IDs of the elements that label the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.8.0
+		 */
+		accessibleNameRef: {
+			type: String,
+			defaultValue: "",
+		},
+
 		/**
 		 * An array, containing a flat structure of list items to render
 		 *
@@ -281,7 +307,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.Tree
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-tree
  * @appenddocs TreeItem
  * @public
@@ -325,6 +351,10 @@ class Tree extends UI5Element {
 		return "tree";
 	}
 
+	get _label() {
+		return getEffectiveAriaLabelText(this);
+	}
+
 	_onListItemStepIn(event) {
 		const listItem = event.detail.item;
 		const treeItem = listItem.treeItem;

package/dist/TreeItem.js

@@ -103,7 +103,7 @@ const metadata = {
 		 * Defines the state of the <code>additionalText</code>.
 		 * <br>
 		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Error"</code>.
-		 * @type {ValueState}
+		 * @type {sap.ui.webcomponents.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -113,6 +113,18 @@ const metadata = {
 			defaultValue: ValueState.None,
 		},
 
+		/**
+		 * Defines the accessible name of the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue: ""
+		 * @public
+		 * @since 1.8.0
+		 */
+		accessibleName: {
+			type: String,
+		},
+
 		/**
 		 * Defines the tooltip of the component.
 		 * @type {string}
@@ -160,7 +172,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.TreeItem
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-tree-item
  * @public
  * @implements sap.ui.webcomponents.main.ITreeItem

package/dist/TreeListItem.js

@@ -29,7 +29,7 @@ const metadata = {
 		/**
 		 * Defines the indentation of the tree list item. Use level 1 for tree list items, representing top-level tree nodes.
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @public
 		 * @defaultValue 1
 		 */
@@ -93,7 +93,7 @@ const metadata = {
 		 * Defines the state of the <code>additionalText</code>.
 		 * <br>
 		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Error"</code>.
-		 * @type {ValueState}
+		 * @type {sap.ui.webcomponents.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -103,6 +103,18 @@ const metadata = {
 			defaultValue: ValueState.None,
 		},
 
+		/**
+		 * Defines the accessible name of the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue: ""
+		 * @public
+		 * @since 1.8.0
+		 */
+		 accessibleName: {
+			type: String,
+		},
+
 		/**
 		 * Defines whether the toggle button is shown at the end, rather than at the beginning of the item
 		 *
@@ -221,7 +233,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.TreeListItem
- * @extends ListItem
+ * @extends sap.ui.webcomponents.main.ListItem
  * @tagname ui5-li-tree
  * @public
  * @since 1.0.0-rc.8
@@ -288,6 +300,10 @@ class TreeListItem extends ListItem {
 		return this.textContent.length && !this._minimal;
 	}
 
+	get _ariaLabel() {
+		return TreeListItem.i18nBundle.getText(TREE_ITEM_ARIA_LABEL);
+	}
+
 	get _accInfo() {
 		return {
 			role: "treeitem",
@@ -296,7 +312,7 @@ class TreeListItem extends ListItem {
 			posinset: this._posinset,
 			setsize: this._setsize,
 			ariaSelectedText: this.ariaSelectedText,
-			listItemAriaLabel: TreeListItem.i18nBundle.getText(TREE_ITEM_ARIA_LABEL),
+			listItemAriaLabel: !this.accessibleName ? this._ariaLabel : undefined,
 		};
 	}
 

package/dist/WheelSlider.js

@@ -134,7 +134,7 @@ const CELL_SIZE_COZY = 46;
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.WheelSlider
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-wheelslider
  * @public
  * @since 1.0.0-rc.6

package/dist/YearPicker.js

@@ -30,7 +30,7 @@ const metadata = {
 	properties: /** @lends sap.ui.webcomponents.main.YearPicker.prototype */ {
 		/**
 		 * An array of UTC timestamps representing the selected date or dates depending on the capabilities of the picker component.
-		 * @type {Array}
+		 * @type {array}
 		 * @public
 		 */
 		selectedDates: {
@@ -74,7 +74,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.YearPicker
- * @extends CalendarPart
+ * @extends sap.ui.webcomponents.main.CalendarPart
  * @tagname ui5-yearpicker
  * @public
  */