@ui5/webcomponents 1.2.6 → 1.4.0

package/dist/List.js

@@ -5,7 +5,12 @@ import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation
 import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import { getLastTabbableElement } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
-import { isTabNext, isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import {
+	isTabNext,
+	isSpace,
+	isEnter,
+	isTabPrevious,
+} from "@ui5/webcomponents-base/dist/Keys.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
@@ -22,6 +27,7 @@ import ListTemplate from "./generated/templates/ListTemplate.lit.js";
 
 // Styles
 import listCss from "./generated/themes/List.css.js";
+import browserScrollbarCSS from "./generated/themes/BrowserScrollbar.css.js";
 
 // Texts
 import {
@@ -279,7 +285,7 @@ const metadata = {
 		/**
 		 * Fired when the <code>Close</code> button of any item is clicked
 		 * <br><br>
-		 * <b>Note:</b> This event is applicable to <code>ui5-li-notification</code> items only,
+		 * <b>Note:</b> This event is only applicable to list items that can be closed (such as notification list items),
 		 * not to be confused with <code>item-delete</code>.
 		 *
 		 * @event sap.ui.webcomponents.main.List#item-close
@@ -296,7 +302,7 @@ const metadata = {
 		/**
 		 * Fired when the <code>Toggle</code> button of any item is clicked.
 		 * <br><br>
-		 * <b>Note:</b> This event is applicable to <code>ui5-li-notification-group</code> items only.
+		 * <b>Note:</b> This event is only applicable to list items that can be toggled (such as notification group list items).
 		 *
 		 * @event sap.ui.webcomponents.main.List#item-toggle
 		 * @param {HTMLElement} item the toggled item.
@@ -436,7 +442,7 @@ class List extends UI5Element {
 	}
 
 	static get styles() {
-		return listCss;
+		return [browserScrollbarCSS, listCss];
 	}
 
 	static async onDefine() {
@@ -759,9 +765,17 @@ class List extends UI5Element {
 		}
 
 		if (isTabNext(event)) {
-			this.setPreviouslyFocusedItem(event.target);
 			this.focusAfterElement();
 		}
+
+		if (isTabPrevious(event)) {
+			if (this.getPreviouslyFocusedItem()) {
+				this.focusPreviouslyFocusedItem();
+			} else {
+				this.focusFirstItem();
+			}
+			event.preventDefault();
+		}
 	}
 
 	_onLoadMoreKeyup(event) {
@@ -824,8 +838,9 @@ class List extends UI5Element {
 	}
 
 	_onfocusin(event) {
+		const target = this.getNormalizedTarget(event.target);
 		// If the focusin event does not origin from one of the 'triggers' - ignore it.
-		if (!this.isForwardElement(this.getNormalizedTarget(event.target))) {
+		if (!this.isForwardElement(target)) {
 			event.stopImmediatePropagation();
 			return;
 		}
@@ -833,7 +848,11 @@ class List extends UI5Element {
 		// The focus arrives in the List for the first time.
 		// If there is selected item - focus it or focus the first item.
 		if (!this.getPreviouslyFocusedItem()) {
-			this.focusFirstItem();
+			if (this.growsWithButton && this.isForwardAfterElement(target)) {
+				this.focusGrowingButton();
+			} else {
+				this.focusFirstItem();
+			}
 			event.stopImmediatePropagation();
 			return;
 		}
@@ -841,6 +860,12 @@ class List extends UI5Element {
 		// The focus returns to the List,
 		// focus the first selected item or the previously focused element.
 		if (!this.getForwardingFocus()) {
+			if (this.growsWithButton && this.isForwardAfterElement(target)) {
+				this.focusGrowingButton();
+				event.stopImmediatePropagation();
+				return;
+			}
+
 			this.focusPreviouslyFocusedItem();
 			event.stopImmediatePropagation();
 		}
@@ -850,13 +875,19 @@ class List extends UI5Element {
 
 	isForwardElement(node) {
 		const nodeId = node.id;
-		const afterElement = this.getAfterElement();
 		const beforeElement = this.getBeforeElement();
 
 		if (this._id === nodeId || (beforeElement && beforeElement.id === nodeId)) {
 			return true;
 		}
 
+		return this.isForwardAfterElement(node);
+	}
+
+	isForwardAfterElement(node) {
+		const nodeId = node.id;
+		const afterElement = this.getAfterElement();
+
 		return afterElement && afterElement.id === nodeId;
 	}
 
@@ -920,6 +951,9 @@ class List extends UI5Element {
 
 		if (!this.growsWithButton) {
 			this.focusAfterElement();
+		} else {
+			this.focusGrowingButton();
+			event.preventDefault();
 		}
 	}
 
@@ -933,6 +967,22 @@ class List extends UI5Element {
 		this.getAfterElement().focus();
 	}
 
+	focusGrowingButton() {
+		const growingBtn = this.getGrowingButton();
+
+		if (growingBtn) {
+			growingBtn.focus();
+		}
+	}
+
+	getGrowingButton() {
+		return this.shadowRoot.querySelector(`#${this._id}-growing-btn`);
+	}
+
+	/**
+	 * Focuses the first list item and sets its tabindex to "0" via the ItemNavigation
+	 * @protected
+	 */
 	focusFirstItem() {
 		// only enabled items are focusable
 		const firstItem = this.getFirstItem(x => !x.disabled);

package/dist/ListItem.js

@@ -87,10 +87,29 @@ const metadata = {
 			defaultValue: "listitem",
 		},
 
+		/**
+		 * Used to define the role of the list item.
+		 *
+		 * @private
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @since 1.3.0
+		 *
+		 */
+		accessibleRole: {
+			type: String,
+		},
+
 		_mode: {
 			type: ListMode,
 			defaultValue: ListMode.None,
 		},
+
+		_ariaHasPopup: {
+			type: String,
+			noAttribute: true,
+		},
+
 	},
 	events: /** @lends sap.ui.webcomponents.main.ListItem.prototype */ {
 		/**
@@ -148,6 +167,15 @@ class ListItem extends ListItemBase {
 				this.active = false;
 			}
 		};
+
+		const handleTouchStartEvent = event => {
+			this._onmousedown(event);
+		};
+
+		this._ontouchstart = {
+			handleEvent: handleTouchStartEvent,
+			passive: true,
+		};
 	}
 
 	onBeforeRendering(...params) {
@@ -212,10 +240,6 @@ class ListItem extends ListItemBase {
 		this.deactivate();
 	}
 
-	_ontouchstart(event) {
-		this._onmousedown(event);
-	}
-
 	_ontouchend(event) {
 		this._onmouseup(event);
 	}
@@ -354,12 +378,13 @@ class ListItem extends ListItemBase {
 
 	get _accInfo() {
 		return {
-			role: this.role,
+			role: this.accessibleRole || this.role,
 			ariaExpanded: undefined,
 			ariaLevel: undefined,
 			ariaLabel: ListItem.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_CHECKBOX),
 			ariaLabelRadioButton: ListItem.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_RADIO_BUTTON),
 			ariaSelectedText: this.ariaSelectedText,
+			ariaHaspopup: this._ariaHasPopup || undefined,
 		};
 	}
 

package/dist/ListItemBase.js

@@ -117,7 +117,9 @@ class ListItemBase extends UI5Element {
 		const target = event.target;
 
 		if (this.shouldForwardTabAfter(target)) {
-			this.fireEvent("_forward-after", { item: target });
+			if (!this.fireEvent("_forward-after", { item: target }, true)) {
+				event.preventDefault();
+			}
 		}
 	}