@openui5/sap.tnt 1.136.1 → 1.138.0

package/src/sap/tnt/NavigationListItem.js

@@ -12,6 +12,7 @@ sap.ui.define([
 	"sap/ui/core/Renderer",
 	"sap/ui/core/IconPool",
 	"sap/ui/core/library",
+	"sap/ui/core/Lib",
 	"sap/ui/events/KeyCodes",
 	"sap/ui/util/openWindow",
 	"sap/ui/util/defaultLinkTypes",
@@ -23,6 +24,7 @@ sap.ui.define([
 	Renderer,
 	IconPool,
 	coreLibrary,
+	Lib,
 	KeyCodes,
 	openWindow,
 	defaultLinkTypes,
@@ -57,7 +59,7 @@ sap.ui.define([
 	 * @extends sap.tnt.NavigationListItemBase
 	 *
 	 * @author SAP SE
-	 * @version 1.136.1
+	 * @version 1.138.0
 	 *
 	 * @constructor
 	 * @public
@@ -90,7 +92,7 @@ sap.ui.define([
 				 *
 				 * <b>Guidelines:</b>
 				 * <ul>
-				 * <li>External links should not be selectable.</li>
+				 * <li>Items that have a set href and target set to <code>_blank</code> should not be selectable.</li>
 				 * <li>Items that trigger actions (with design "Action") should not be selectable.</li>
 				 * </ul>
 				 *
@@ -103,6 +105,7 @@ sap.ui.define([
 				/**
 				 * Defines the link target URI. Supports standard hyperlink behavior. If a JavaScript action should be triggered,
 				 * this should not be set, but instead an event handler for the <code>select</code> event should be registered.
+				 *
 				 */
 				href: { type: "sap.ui.core.URI", group: "Data", defaultValue: null },
 
@@ -111,7 +114,14 @@ sap.ui.define([
 				 *
 				 * Options are the standard values for window.open() supported by browsers:
 				 * <code>_self</code>, <code>_top</code>, <code>_blank</code>, <code>_parent</code>, <code>_search</code>.
-				 * Alternatively, a frame name can be entered. This property is only used when the <code>href</code> property is set.
+				 * Alternatively, a frame name can be entered.
+				 *
+				 * <b>Guidelines:</b>
+                 * <ul>
+				 * <li>Use only when <code>href</code> property is set.</li>
+                 * <li>Items that have a set href and target set to <code>_blank</code> should not have children</li>
+                 * <li>Items that have a set href, should not use target for internal navigation/li>
+                 * </ul>
 				 */
 				target: { type: "string", group: "Behavior", defaultValue: null },
 
@@ -157,10 +167,12 @@ sap.ui.define([
 	NavigationListItem._getInvisibleText = function () {
 		if (!this._invisibleText) {
 			this._invisibleText = new InvisibleText().toStatic();
+			this._invisibleText.setText(Lib.getResourceBundleFor("sap.tnt").getText("NAVIGATION_LIST_EXTERNAL_LINK_DESCRIPTION"));
 		}
 		return this._invisibleText;
 	};
 
+
 	/**
 	 * Creates a popup list.
 	 *
@@ -249,7 +261,9 @@ sap.ui.define([
 		const oItemInPopup = oEvent.getParameter("item"),
 			oRealItem = Element.getElementById(oItemInPopup.getKey());
 
-		oRealItem._firePress({ item: oRealItem });
+		if (!oRealItem._firePress(oEvent, oRealItem)) {
+			oEvent.preventDefault();
+		}
 	};
 
 	/**
@@ -284,16 +298,6 @@ sap.ui.define([
 		}
 	};
 
-	/**
-	 * Gets DOM reference of the accessibility element.
-	 *
-	 * @private
-	 * @returns {HTMLElement} dom ref
-	 */
-	NavigationListItem.prototype._getAccessibilityRef = function () {
-		return this.getDomRef().querySelector(".sapTntNLIFirstLevel");
-	};
-
 	/**
 	 * Handles tap event.
 	 *
@@ -331,18 +335,8 @@ sap.ui.define([
 			return;
 		}
 
-		const bHasModifierKey = this._hasModifierKey(oEvent);
-
-		if ((oEvent.key ? oEvent.key === "Enter" : oEvent.keyCode === KeyCodes.ENTER) && !bHasModifierKey) {
-			this.getDomRef().classList.add("sapTntNLIActive");
+		if ((oEvent.key ? oEvent.key === "Enter" : oEvent.keyCode === KeyCodes.ENTER) ) {
 			this.ontap(oEvent);
-		} else if ((oEvent.key ? oEvent.key === " " : oEvent.keyCode === KeyCodes.SPACE) && !bHasModifierKey) {
-			this.getDomRef().classList.add("sapTntNLIActive");
-		}
-
-		//onkeyup is not called when new page is opened
-		if (this.getHref() && this.getTarget() === "_blank") {
-			this.getDomRef().classList.remove("sapTntNLIActive");
 		}
 
 		NavigationListItemBase.prototype.onkeydown.apply(this, arguments);
@@ -353,16 +347,8 @@ sap.ui.define([
 			return;
 		}
 
-		const bHasModifierKey = this._hasModifierKey(oEvent);
-
-		if ((oEvent.key ? oEvent.key === "Enter" : oEvent.keyCode === KeyCodes.ENTER) && !bHasModifierKey) {
-			this.getDomRef().classList.remove("sapTntNLIActive");
-		} else if ((oEvent.key ? oEvent.key === " " : oEvent.keyCode === KeyCodes.SPACE)) {
-			this.getDomRef().classList.remove("sapTntNLIActive");
-
-			if (!bHasModifierKey) {
-				this.ontap(oEvent);
-			}
+		if ((oEvent.key ? oEvent.key === " " : oEvent.keyCode === KeyCodes.SPACE)) {
+			this.ontap(oEvent);
 		}
 
 		if (oEvent.srcControl.getLevel() === 1) {
@@ -405,6 +391,7 @@ sap.ui.define([
 		oRM.openStart("li", this)
 			.attr("role", "none");
 
+
 		if (!bListExpanded) {
 			if (aItems.length && bEnabled) {
 				oRM.class("sapTntNLINotExpandedTriangle");
@@ -429,7 +416,7 @@ sap.ui.define([
 					label: this.getText()
 				});
 
-			if (!this.getExpanded()) {
+			if (!this.getExpanded() && !this._animateCollapse || this._animateExpand) {
 				oRM.class("sapTntNLIItemsContainerHidden");
 			}
 
@@ -486,7 +473,7 @@ sap.ui.define([
 			bSelected = true;
 		}
 
-		if (!bListExpanded && aItems.includes(oNavigationList._selectedItem)) {
+		if ((!bListExpanded || !bExpanded) && aItems.includes(oNavigationList._selectedItem)) {
 			oRM.class("sapTntNLISelected");
 			bSelected = true;
 		}
@@ -526,6 +513,7 @@ sap.ui.define([
 
 			if (this._isOverflow) {
 				oLinkAriaProps.haspopup = "menu";
+				oLinkAriaProps.label = this._resourceBundleTnt.getText("NAVIGATION_LIST_OVERFLOW_ITEM_LABEL");
 			}
 
 			if (bSelectable) {
@@ -655,10 +643,12 @@ sap.ui.define([
 			oRM.attr("title", sTooltip);
 		}
 
-		if (!bDisabled) {
-			oRM.attr("tabindex", "-1");
+		if (bDisabled) {
+			oRM.attr("aria-disabled", "true");
 		}
 
+		oRM.attr("tabindex", "-1");
+
 		if (sHref) {
 			oRM.attr("href", sHref);
 		}
@@ -668,6 +658,11 @@ sap.ui.define([
 				.attr("rel", defaultLinkTypes("", sTarget));
 		}
 
+		if (sHref && sTarget === "_blank") {
+			const oInvisibleText = NavigationListItem._getInvisibleText();
+			oRM.attr("aria-describedby", oInvisibleText.getId());
+		}
+
 		oRM.openEnd();
 	};
 
@@ -806,7 +801,7 @@ sap.ui.define([
 	NavigationListItem.prototype._getFocusDomRefs = function () {
 		const aDomRefs = [];
 
-		if (!this.getEnabled() || !this.getVisible()) {
+		if (!this.getVisible()) {
 			return aDomRefs;
 		}
 
@@ -815,7 +810,7 @@ sap.ui.define([
 		}
 
 		if (this._isListExpanded() && this.getExpanded()) {
-			aDomRefs.push(...this.getDomRef().querySelectorAll(".sapTntNLISecondLevel:not(.sapTntNLIDisabled) a"));
+			aDomRefs.push(...this.getDomRef().querySelectorAll(".sapTntNLISecondLevel a"));
 		}
 
 		return aDomRefs;
@@ -885,9 +880,5 @@ sap.ui.define([
 
 	NavigationListItem.prototype.onmouseover = NavigationListItem.prototype.onfocusout;
 
-	NavigationListItem.prototype._hasModifierKey = 	function hasModifierKeys(oEvent) {
-		return oEvent.shiftKey || oEvent.altKey || oEvent.ctrlKey || oEvent.metaKey;
-	};
-
 	return NavigationListItem;
 });

package/src/sap/tnt/NavigationListItemBase.js

@@ -29,7 +29,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Item
 	 *
 	 * @author SAP SE
-	 * @version 1.136.1
+	 * @version 1.138.0
 	 *
 	 * @constructor
 	 * @public
@@ -79,11 +79,36 @@ sap.ui.define([
 				 * @since 1.133
 				 */
 				press: {
+					allowPreventDefault: true,
 					parameters: {
 						/**
 						 * The pressed item.
 						 */
-						item: { type: "sap.ui.core.Item" }
+						item: { type: "sap.ui.core.Item" },
+						/**
+						 * Indicates whether the CTRL key was pressed when the link was selected.
+						 * @since 1.137
+						 */
+						ctrlKey: { type: "boolean" },
+						/**
+						 * Indicates whether the Shift key was pressed when the link was selected.
+						 * @since 1.137
+						 */
+						shiftKey: { type: "boolean" },
+						/**
+						 * Indicates whether the Alt key was pressed when the link was selected.
+						 * @since 1.137
+						 */
+						altKey: { type: "boolean" },
+						/**
+						 * Indicates whether the "meta" key was pressed when the link was selected.
+						 *
+						 * On Macintosh keyboards, this is the command key (⌘).
+						 * On Windows keyboards, this is the windows key (⊞).
+						 *
+						 * @since 1.137
+						 */
+						metaKey: { type: "boolean" }
 					}
 				}
 			}
@@ -184,12 +209,6 @@ sap.ui.define([
 	 */
 	NavigationListItemBase.prototype._getFocusDomRefs = function () { };
 
-	/**
-	 * Gets DOM reference of the accessibility element.
-	 * @abstract
-	 */
-	NavigationListItemBase.prototype._getAccessibilityRef = function () { };
-
 	/**
 	 * Returns the <code>sap.ui.core.Icon</code> control used to display the expand/collapse icon.
 	 *
@@ -280,11 +299,42 @@ sap.ui.define([
 	 * @private
 	 */
 	NavigationListItemBase.prototype.onkeydown = function (oEvent) {
+		const bRtl = Localization.getRTL();
+
 		if (oEvent.key ? oEvent.key === " " : oEvent.keyCode === KeyCodes.SPACE) {
 			oEvent.preventDefault();
 		}
 
+		if (this._isInsidePopover()) {
+			if ((oEvent.which == KeyCodes.ARROW_LEFT && !bRtl) || (oEvent.which == KeyCodes.ARROW_RIGHT && bRtl)) {
+				this.getNavigationList().oParent.close();
+				// prevent ItemNavigation to move the focus to the next/previous item
+				oEvent.stopPropagation();
+			}
+
+			if 	((oEvent.which == KeyCodes.ARROW_RIGHT && !bRtl) ||	(oEvent.which == KeyCodes.ARROW_LEFT && bRtl)) {
+				// prevent ItemNavigation to move the focus to the next/previous item
+				oEvent.stopPropagation();
+			}
+
+			return;
+		}
+
 		if (!this._isListExpanded()) {
+			if 	((oEvent.which == KeyCodes.ARROW_RIGHT && !bRtl) ||	(oEvent.which == KeyCodes.ARROW_LEFT && bRtl)) {
+				if (this.getItems().length > 0 ) {
+					this.ontap(oEvent);
+				}
+
+				// prevent ItemNavigation to move the focus to the next/previous item
+				oEvent.stopPropagation();
+			}
+
+			if ((oEvent.which == KeyCodes.ARROW_LEFT && !bRtl) || (oEvent.which == KeyCodes.ARROW_RIGHT && bRtl)) {
+				// prevent ItemNavigation to move the focus to the next/previous item
+				oEvent.stopPropagation();
+			}
+
 			return;
 		}
 
@@ -297,30 +347,33 @@ sap.ui.define([
 		}
 
 		if (this.getLevel() !== 0) {
+
+			if (oEvent.which == KeyCodes.ARROW_RIGHT && !bRtl || oEvent.which == KeyCodes.ARROW_LEFT && bRtl ||
+				oEvent.which == KeyCodes.ARROW_LEFT && !bRtl || oEvent.which == KeyCodes.ARROW_RIGHT && bRtl) {
+					// prevent ItemNavigation to move the focus to the next/previous item
+					oEvent.stopPropagation();
+				}
+
 			return;
 		}
 
-		const bRtl = Localization.getRTL();
-
 		//  KeyCodes.MINUS is not returning 189
 		if ((oEvent.shiftKey && oEvent.which == 189) ||
 			oEvent.which == KeyCodes.NUMPAD_MINUS ||
 			(oEvent.which == KeyCodes.ARROW_RIGHT && bRtl) ||
 			(oEvent.which == KeyCodes.ARROW_LEFT && !bRtl)) {
-			if (this.collapse()) {
-				oEvent.preventDefault();
-				// prevent ItemNavigation to move the focus to the next/previous item
-				oEvent.stopPropagation();
-			}
+			this.collapse();
+			oEvent.preventDefault();
+			// prevent ItemNavigation to move the focus to the next/previous item
+			oEvent.stopPropagation();
 		} else if (oEvent.which == KeyCodes.NUMPAD_PLUS ||
 			(oEvent.shiftKey && oEvent.which == KeyCodes.PLUS) ||
 			oEvent.which == KeyCodes.ARROW_LEFT && bRtl ||
 			oEvent.which == KeyCodes.ARROW_RIGHT && !bRtl) {
-			if (this.expand()) {
-				oEvent.preventDefault();
-				// prevent ItemNavigation to move the focus to the next/previous item
-				oEvent.stopPropagation();
-			}
+			this.expand();
+			oEvent.preventDefault();
+			// prevent ItemNavigation to move the focus to the next/previous item
+			oEvent.stopPropagation();
 		}
 	};
 
@@ -332,13 +385,10 @@ sap.ui.define([
 	 * @returns {boolean} whether the event was handled
 	 */
 	NavigationListItemBase.prototype.ontap = function (oEvent) {
-		const oParams = {
-			item: this
-		};
-
 		if (this.getEnabled() && !(oEvent.srcControl.isA("sap.ui.core.Icon")) && !this._isOverflow && !(!this.getNavigationList().getExpanded() && this.getItems().length)) {
-			this._firePress(oParams);
-
+			if (!this._firePress(oEvent, this)) {
+				return true;
+			}
 			oEvent.stopPropagation();
 		}
 
@@ -349,6 +399,7 @@ sap.ui.define([
 		oEvent.setMarked("subItem");
 
 		if (!this.getEnabled() || !this.getAllParentsEnabled()) {
+			oEvent.stopPropagation();
 			return true;
 		}
 
@@ -361,14 +412,36 @@ sap.ui.define([
 
 	/**
 	 * Fires a press event on an item.
-	 * @param {object} oParams The event parameters
+	 * @param {sap.ui.base.Event} oEvent press event
+	 * @param {sap.tnt.NavigationListMenuItem|sap.tnt.NavigationListItem} oItem The item that triggered the event
+	 * @returns {boolean} whether the event was successfully fired
 	 * @private
 	 */
-	NavigationListItemBase.prototype._firePress = function(oParams) {
+	NavigationListItemBase.prototype._firePress = function(oEvent, oItem) {
 		const oNavList = this.getNavigationList();
+		const oParams = oEvent.getParameters ? oEvent.getParameters() : {
+			item: oItem,
+			ctrlKey: !!oEvent.ctrlKey,
+			shiftKey: !!oEvent.shiftKey,
+			altKey: !!oEvent.altKey,
+			metaKey: !!oEvent.metaKey
+		};
+
+		if (!this.getEnabled()) {
+			return false;
+		}
+
+		if (!this.firePress(oParams)) {
+			oEvent.preventDefault();
+			return false;
+		}
 
-		oNavList?.fireItemPress({ item: this });
-		this.firePress(oParams);
+		if (!oNavList?.fireItemPress(oParams)) {
+			oEvent.preventDefault();
+			return false;
+		}
+
+		return true;
 	};
 
 	/**
@@ -412,36 +485,16 @@ sap.ui.define([
 	 * @returns {boolean} whether the items will be expanded
 	 */
 	NavigationListItemBase.prototype.expand = function () {
-		if (this.getExpanded() || !this.getHasExpander() || this.getItems().length == 0 || this.getLevel() !== 0) {
+		if (!this.getEnabled() || this.getExpanded() || !this.getHasExpander() || this.getItems().length == 0 || this.getLevel() !== 0) {
 			return false;
 		}
 
-		this.setProperty("expanded", true, true);
-		this._getExpandIconControl()
-			.setSrc(COLLAPSE_ICON_SRC)
-			.setTooltip(this._getExpandIconTooltip(false));
-
-		this._getAccessibilityRef().setAttribute("aria-expanded", "true");
-
-		const $container = this.$().find(".sapTntNLIItemsContainer").first();
-		$container.stop(true, true).slideDown("fast", () => {
-			this._updateContainerVisibility();
-			this.getNavigationList()?._updateNavItems();
-		});
+		this.setProperty("expanded", true);
+		this._animateExpand = true;
 
 		return true;
 	};
 
-	NavigationListItemBase.prototype._updateContainerVisibility = function () {
-		const oContainerRef = this.getDomRef()?.querySelector(".sapTntNLIItemsContainer");
-		if (oContainerRef) {
-			if (this.getExpanded()) {
-				oContainerRef.classList.remove("sapTntNLIItemsContainerHidden");
-			} else {
-				oContainerRef.classList.add("sapTntNLIItemsContainerHidden");
-			}
-		}
-	};
 
 	/**
 	 * Collapses the child items (works only on first-level items).
@@ -449,22 +502,13 @@ sap.ui.define([
 	 * @returns {boolean} whether the items will be collapsed
 	 */
 	NavigationListItemBase.prototype.collapse = function () {
-		if (!this.getExpanded() || !this.getHasExpander() || this.getItems().length == 0 || this.getLevel() !== 0) {
+		if (!this.getEnabled() || !this.getExpanded() || !this.getHasExpander() || this.getItems().length == 0 || this.getLevel() !== 0) {
 			return false;
 		}
 
-		this.setProperty("expanded", false, true);
-		this._getExpandIconControl()
-			.setSrc(EXPAND_ICON_SRC)
-			.setTooltip(this._getExpandIconTooltip(true));
-
-		this._getAccessibilityRef().setAttribute("aria-expanded", "false");
+		this.setProperty("expanded", false);
+		this._animateCollapse = true;
 
-		const $container = this.$().find(".sapTntNLIItemsContainer").first();
-		$container.stop(true, true).slideUp("fast", () => {
-			this._updateContainerVisibility();
-			this.getNavigationList()?._updateNavItems();
-		});
 
 		return true;
 	};