@sapui5/sap.suite.ui.commons 1.146.0 → 1.147.0

package/src/sap/suite/ui/commons/networkgraph/KeyboardNavigator.js

@@ -14,11 +14,12 @@ sap.ui.define([
 	"sap/ui/events/KeyCodes",
 	"sap/ui/dom/containsOrEquals",
 	"sap/base/Log",
-	"sap/ui/core/Lib",
-	"sap/ui/core/Element"
-], function (jQuery, BaseObject, Group, Node, Line, KeyCodes, containsOrEquals, Log, CoreLib, Element) {
+	"sap/ui/core/Lib"
+], function (jQuery, BaseObject, Group, Node, Line, KeyCodes, containsOrEquals, Log, CoreLib) {
 	"use strict";
 
+	const oResourceBundle = CoreLib.getResourceBundleFor("sap.suite.ui.commons");
+
 	var mDirections = {
 		LEFT: "left",
 		RIGHT: "right",
@@ -74,6 +75,13 @@ sap.ui.define([
 			this._oFocusPosition = null;
 			this._oWrapperDom = null;
 			this.isFromFullscreen = null;
+			this._oAltNode = null;
+			this._oAltConnectors = null;
+			this._oAltAnnouncement = null;
+			this._oAssociatedControl = null;
+			this._oAssociatedContainer = null;
+			this._oAssociatedDelegate = null;
+			this._bCtrlAltDown = false;
 		}
 	});
 
@@ -124,6 +132,14 @@ sap.ui.define([
 				this._iColumns = aRow.length;
 			}
 		}, this);
+
+		const oControl = this._oGraph.getAssociatedControl();
+		if (oControl !== this._oAssociatedControl) {
+			this._updateAssociatedDelegate(oControl);
+		}
+		this._oAltNode = null;
+		this._oAltConnectors = null;
+		this._oAltAnnouncement = null;
 	};
 
 	KeyboardNavigator.prototype.setWrapperDom = function (oDom) {
@@ -229,6 +245,12 @@ sap.ui.define([
 	KeyboardNavigator.prototype.onkeydown = function (oEvent) {
 		var oItem, oBtn,
 			oFocus = this.getFocus();
+
+		// On Windows, Ctrl+Alt = AltGr — browsers strip ctrlKey/altKey from the character keydown.
+		if (oEvent.keyCode === KeyCodes.ALT && oEvent.ctrlKey) {
+			this._bCtrlAltDown = true;
+		}
+
 		if (!oFocus) {
 			return;
 		}
@@ -256,11 +278,7 @@ sap.ui.define([
 			}
 			oEvent.stopPropagation();
 		} else if (oEvent.keyCode === KeyCodes.F6) {
-			if (oItem && oBtn) {
-				oFocus.button = null;
-				this._oGraph.setFocus(oFocus);
-			}
-			this._handleArrow(oEvent, oEvent.shiftKey ? mDirections.LEFT : mDirections.RIGHT);
+			this._handleF6(oEvent);
 		} else if (oEvent.keyCode === KeyCodes.F7 && !oEvent.shiftKey) {
 			if (oItem && oBtn) {
 				oFocus.button = null;
@@ -272,12 +290,24 @@ sap.ui.define([
 			this._onCtrlPlus(oEvent);
 		} else if (oEvent.ctrlKey && (oEvent.keyCode === KeyCodes.SLASH || oEvent.keyCode === KeyCodes.NUMPAD_MINUS)) {
 			this._onCtrlMinus(oEvent);
-		} else if(oEvent.ctrlKey && oEvent.altKey && oEvent.keyCode === KeyCodes.P) {
-			var oAssociatedControl = this._oGraph.getAssociatedControl();
+		} else if (this._bCtrlAltDown && oEvent.keyCode === KeyCodes.P) {
+			this._bCtrlAltDown = false;
+			const oAssociatedControl = this._oGraph.getAssociatedControl();
 			if (oAssociatedControl) {
 				oAssociatedControl.focus();
 				oItem._setFocus(false);
 			}
+			oEvent.preventDefault();
+			oEvent.stopPropagation();
+		} else if (oEvent.altKey && !oEvent.ctrlKey && !oEvent.shiftKey && oItem instanceof Node) {
+			if (oEvent.keyCode === KeyCodes.PLUS || oEvent.keyCode === KeyCodes.NUMPAD_PLUS) {
+				this._handleAltAnnounce(oEvent, oItem);
+			} else {
+				const iDigitIndex = this._getAltDigitIndex(oEvent.keyCode);
+				if (iDigitIndex >= 0) {
+					this._handleAltConnectorNavigation(oEvent, oItem, iDigitIndex);
+				}
+			}
 		}
 	};
 
@@ -285,6 +315,59 @@ sap.ui.define([
 	/* Private methods */
 	/* =========================================================== */
 
+	KeyboardNavigator.prototype._getAltDigitIndex = function (iKeyCode) {
+		if (iKeyCode >= KeyCodes.DIGIT_1 && iKeyCode <= KeyCodes.DIGIT_9) {
+			return iKeyCode - KeyCodes.DIGIT_1;
+		}
+		if (iKeyCode >= KeyCodes.NUMPAD_1 && iKeyCode <= KeyCodes.NUMPAD_9) {
+			return iKeyCode - KeyCodes.NUMPAD_1;
+		}
+		return -1;
+	};
+
+	/**
+	 * Handles F6 / Shift+F6 — skip to next/previous visible group regardless of what is focused.
+	 * @private
+	 */
+	KeyboardNavigator.prototype._handleF6 = function (oEvent) {
+		const bBackward = oEvent.shiftKey,
+			oFocus = this.getFocus(),
+			oItem = oFocus ? oFocus.item : null,
+			bIsRtl = this._oGraph._bIsRtl,
+			aGroups = this._oGraph.getGroups().filter(function (oGroup) {
+				return !oGroup.isHidden() && oGroup.getVisible();
+			}).sort(function (oA, oB) {
+				// Top-to-bottom, then by reading direction (RTL: descending x, LTR: ascending x)
+				const iDeltaY = oA.getY() - oB.getY();
+				if (iDeltaY !== 0) { return iDeltaY; }
+				const iDeltaX = oA.getX() - oB.getX();
+				return bIsRtl ? -iDeltaX : iDeltaX;
+			});
+
+		if (aGroups.length === 0) {
+			return;
+		}
+
+		let iCurrentIndex = -1;
+		if (oItem instanceof Group) {
+			iCurrentIndex = aGroups.indexOf(oItem);
+		} else if (oItem instanceof Node && oItem._oGroup) {
+			iCurrentIndex = aGroups.indexOf(oItem._oGroup);
+		}
+
+		const iTargetIndex = bBackward
+			? (iCurrentIndex > 0 ? iCurrentIndex - 1 : aGroups.length - 1)
+			: (iCurrentIndex < aGroups.length - 1 ? iCurrentIndex + 1 : 0);
+
+		// Ensure setFocus lands on the group header, not the menu button
+		if (this._oGraph._oFocus) {
+			this._oGraph._oFocus.groupInFocused = false;
+		}
+		this._oGraph.setFocus({ item: aGroups[iTargetIndex], button: null });
+		oEvent.preventDefault();
+		oEvent.stopPropagation();
+	};
+
 	KeyboardNavigator.prototype._handleEnter = function () {
 		var oItem, oBtn,
 			oFocus = this.getFocus();
@@ -372,9 +455,32 @@ sap.ui.define([
 		}
 	};
 
+	/**
+	 * Fires the nodeAdded event and shifts focus to the newly added node after re-render.
+	 * Only active when DnD is enabled.
+	 * @private
+	 */
+	KeyboardNavigator.prototype._handleAddNode = function (oEvent) {
+		if (!this._oGraph._isDnDEnabled()) {
+			return;
+		}
+		this._oGraph.fireEvent("nodeAdded", {}, false);
+		const fnFocus = () => {
+			this._oGraph.detachGraphReady(fnFocus);
+			const aNodes = this._oGraph.getNodes();
+			if (aNodes.length) {
+				this._oGraph.setFocus({ item: aNodes.at(-1), button: null });
+			}
+		};
+		this._oGraph.attachGraphReady(fnFocus);
+		oEvent.preventDefault();
+		oEvent.stopPropagation();
+	};
+
 	KeyboardNavigator.prototype._handleTab = function (oEvent, sDirection) {
-		var oResourceBundle = CoreLib.getResourceBundleFor("sap.suite.ui.commons");
-		this._oWrapperDom.setAttribute("aria-live","assertive");
+		const oFocus = this.getFocus(),
+			bBackward = sDirection === mDirections.LEFT;
+		this._oWrapperDom.setAttribute("aria-live", "assertive");
 		this._oGraph._setAriaLabelForWrapper(oResourceBundle.getText("NETWORK_GRAPH_ACCESSIBILITY_LABEL"));
 		if (this._ignoreEvent(oEvent)) {
 			this._oWrapperDom.setAttribute("aria-live","off");
@@ -386,6 +492,12 @@ sap.ui.define([
 			}
 			return;
 		} else {
+			if (sDirection === mDirections.LEFT && this._bWrapperHighlighted && !this.getFocus()) {
+				this._oWrapperDom.classList.add("sapSuiteUiCommonsNetworkGraphContentFocusHidden");
+				this._bWrapperHighlighted = false;
+				return;
+			}
+			this._bWrapperHighlighted = false;
 			this._oWrapperDom.classList.add("sapSuiteUiCommonsNetworkGraphContentFocusHidden");
 		}
 
@@ -396,7 +508,118 @@ sap.ui.define([
 			return;
 		}
 
-		this._moveItemFocus(oEvent, sDirection);
+		if (oFocus?.item instanceof Node) {
+			const bMoved = this._navigateFromNode(oFocus.item, bBackward);
+			if (!bMoved && bBackward) {
+				const oGroup = oFocus.item._oGroup;
+				if (oGroup) {
+					this._oGraph.setFocus({ item: oGroup, button: Group.BUTTONS.COLLAPSE });
+					oEvent.preventDefault();
+					oEvent.stopPropagation();
+				} else {
+					this._moveItemFocus(oEvent, mDirections.LEFT);
+				}
+				return;
+			}
+		} else if (oFocus?.item instanceof Line) {
+			this._navigateFromConnector(oFocus.item, bBackward);
+		} else {
+			this._moveItemFocus(oEvent, sDirection);
+			return;
+		}
+
+		oEvent.preventDefault();
+		oEvent.stopPropagation();
+	};
+
+	/**
+	 * Navigate from a node to its first connector.
+	 * @returns {boolean} True if focus moved to a connector, false otherwise
+	 * @private
+	 */
+	KeyboardNavigator.prototype._navigateFromNode = function (oNode, bBackward) {
+		const aLines = bBackward ? oNode.getParentLines() : oNode.getChildLines();
+		const aVisibleLines = this._getVisibleLines(aLines, bBackward);
+
+		if (aVisibleLines.length > 0) {
+			this._oGraph.setFocus({
+				item: aVisibleLines[0],
+				button: null
+			});
+			return true;
+		}
+		return false;
+	};
+
+	/**
+	 * Navigate from a connector to its connected node
+	 * @param {Line} oLine - The connector to navigate from
+	 * @param {boolean} bBackward - True for source node, false for target node
+	 * @private
+	 */
+	KeyboardNavigator.prototype._navigateFromConnector = function (oLine, bBackward) {
+		const oNode = bBackward ? oLine.getFromNode() : oLine.getToNode();
+
+		if (oNode && !oNode.isHidden()) {
+			this._oGraph.setFocus({
+				item: oNode,
+				button: null
+			});
+		}
+	};
+
+	/**
+	 * Returns visible lines sorted top-to-bottom.
+	 * @param {Array} aLines - Array of lines to filter and sort
+	 * @param {boolean} bSortBySource - If true, sort by source node Y position; otherwise by target node
+	 * @private
+	 */
+	KeyboardNavigator.prototype._getVisibleLines = function (aLines, bSortBySource) {
+		if (!aLines || aLines.length === 0) {
+			return [];
+		}
+
+		const aVisibleLines = aLines.filter(function (oLine) {
+			return !oLine.isHidden() && !oLine._isIgnored() && oLine.getVisible();
+		});
+
+		const fnGetSortY = (oLine) => {
+			const oNode = bSortBySource ? oLine.getFromNode() : oLine.getToNode();
+			if (oNode && !oNode.isHidden()) {
+				return oNode.getY();
+			}
+			const aCoords = oLine.getCoordinates();
+			return (aCoords && aCoords.length > 0) ? aCoords[0].getY() : 0;
+		};
+		return aVisibleLines.sort((oLine1, oLine2) => fnGetSortY(oLine1) - fnGetSortY(oLine2));
+	};
+
+	KeyboardNavigator.prototype._handleAltAnnounce = function (oEvent, oNode) {
+		if (this._oAltNode !== oNode) {
+			this._oAltNode = oNode;
+			this._oAltConnectors = oNode._getAltNavigationConnectors();
+			const { aIncomingConnectors, aOutgoingConnectors, aConnectors } = this._oAltConnectors;
+			this._oAltAnnouncement = (aIncomingConnectors.length >= 2 || aOutgoingConnectors.length >= 2)
+				? oNode._getAltConnectorsAnnouncement(aConnectors)
+				: null;
+		}
+		if (!this._oAltAnnouncement) { return; }
+		this._oGraph._setAccessibilityTitle(this._oAltAnnouncement);
+		oEvent.preventDefault();
+		oEvent.stopPropagation();
+	};
+
+	KeyboardNavigator.prototype._handleAltConnectorNavigation = function (oEvent, oNode, iIndex) {
+		if (this._oAltNode !== oNode || !this._oAltConnectors) {
+			this._oAltNode = oNode;
+			this._oAltConnectors = oNode._getAltNavigationConnectors();
+		}
+		const { aConnectors } = this._oAltConnectors;
+		if (iIndex < aConnectors.length) {
+			this._oGraph.setFocus({ item: aConnectors[iIndex].line, button: null });
+			oEvent.preventDefault();
+			oEvent.stopPropagation();
+		}
 	};
 
 	KeyboardNavigator.prototype._handleTabOverLinesWithButtons = function (oEvent, sDirection) {
@@ -624,12 +847,64 @@ sap.ui.define([
 			return;
 		}
 
+		const oFocus = this.getFocus();
+		const oItem = oFocus.item;
+		if (oItem instanceof Line) {
+			if (sDirection === mDirections.UP || sDirection === mDirections.DOWN) {
+				this._navigateBetweenConnectors(oEvent, sDirection);
+				return;
+			}
+		}
+
+		// For all other cases, use default behavior
 		this._moveItemFocus(oEvent, sDirection, true);
 	};
 
+	/**
+	 * Navigate between multiple connectors from the same source node
+	 * @private
+	 */
+	KeyboardNavigator.prototype._navigateBetweenConnectors = function (oEvent, sDirection) {
+		const oFocus = this.getFocus(),
+			oLine = oFocus.item;
+
+		if (!(oLine instanceof Line)) {
+			return;
+		}
+
+		// ↑/↓ navigates among the outgoing connectors of this line's source node,
+		// giving a consistent vertical ordering regardless of which connector is focused.
+		const oSourceNode = oLine.getFromNode();
+		if (!oSourceNode) {
+			return;
+		}
+
+		const aVisibleLines = this._getVisibleLines(oSourceNode.getChildLines());
+		if (aVisibleLines.length <= 1) {
+			return;
+		}
+
+		const iCurrentIndex = aVisibleLines.indexOf(oLine);
+		if (iCurrentIndex === -1) {
+			return;
+		}
+
+		const iTargetIndex = sDirection === mDirections.DOWN ? iCurrentIndex + 1 : iCurrentIndex - 1;
+		if (iTargetIndex >= 0 && iTargetIndex < aVisibleLines.length) {
+			this._oGraph.setFocus({
+				item: aVisibleLines[iTargetIndex],
+				button: null
+			});
+		}
+
+		oEvent.preventDefault();
+		oEvent.stopPropagation();
+	};
+
 	KeyboardNavigator.prototype._moveItemFocus = function (oEvent, sDirection, bStopOnLast) {
 		var oFocus,
 			bBackTab = (sDirection === mDirections.LEFT && oEvent.key === "Tab"),
+			bHadFocus = !!this.getFocus(),
 			oPosition,
 			oNewItem,
 			aBtns;
@@ -667,6 +942,11 @@ sap.ui.define([
 		if (oEvent && oNewItem) {
 			oEvent.preventDefault();
 			oEvent.stopPropagation();
+		} else if (bBackTab && !oNewItem && bHadFocus) {
+			this._oWrapperDom.classList.remove("sapSuiteUiCommonsNetworkGraphContentFocusHidden");
+			this._bWrapperHighlighted = true;
+			oEvent.preventDefault();
+			oEvent.stopPropagation();
 		}
 	};
 
@@ -815,6 +1095,45 @@ sap.ui.define([
 		oEvent.stopPropagation();
 	};
 
+	KeyboardNavigator.prototype._updateAssociatedDelegate = function (oControl) {
+		if (this._oAssociatedContainer) {
+			this._oAssociatedContainer.removeEventDelegate(this._oAssociatedDelegate);
+			this._oAssociatedContainer = null;
+			this._oAssociatedDelegate = null;
+		}
+		const oContainer = oControl && oControl.getParent();
+		if (oContainer) {
+			this._oAssociatedDelegate = {
+				onkeydown: (oEvent) => {
+					if (oEvent.keyCode === KeyCodes.ALT && oEvent.ctrlKey) {
+						this._bCtrlAltDown = true;
+					}
+
+					if (oEvent.shiftKey && oEvent.keyCode === KeyCodes.F10) {
+						this._oGraph._restoreFocusToGraph();
+						oEvent.preventDefault();
+						oEvent.stopPropagation();
+					} else if (oEvent.keyCode === KeyCodes.INSERT || (this._bCtrlAltDown && oEvent.keyCode === KeyCodes.N)) {
+						this._bCtrlAltDown = false;
+						this._handleAddNode(oEvent);
+					}
+				}
+			};
+			this._oAssociatedContainer = oContainer;
+			oContainer.addEventDelegate(this._oAssociatedDelegate);
+		}
+		this._oAssociatedControl = oControl;
+	};
+
+	KeyboardNavigator.prototype.destroy = function () {
+		if (this._oAssociatedContainer) {
+			this._oAssociatedContainer.removeEventDelegate(this._oAssociatedDelegate);
+			this._oAssociatedContainer = null;
+			this._oAssociatedDelegate = null;
+		}
+		BaseObject.prototype.destroy.apply(this, arguments);
+	};
+
 	KeyboardNavigator.prototype._ignoreEvent = function (oEvent) {
 		return !containsOrEquals(this._oWrapperDom, oEvent.target);
 	};

package/src/sap/suite/ui/commons/networkgraph/Line.js

@@ -883,7 +883,11 @@ sap.ui.define([
 	Line.prototype._getAccessibilityLabel = function (oGraph) {
 		const aSentenceParts = [];
 		const sConnectionType = this.getConnectionType();
-		const sConnectionTypeText = oGraph.getConnectionTypeMapping()[sConnectionType];
+		const oMapping = oGraph.getConnectionTypeMapping();
+		// In RTL mode, left and right sides of nodes are semantically swapped
+		const bRTL = this.getParent()._bIsRtl;
+		const sResolvedType = bRTL ? (Utils.mRTLSwap[sConnectionType] || sConnectionType) : sConnectionType;
+		const sConnectionTypeText = oMapping[sResolvedType];
 		const sFromNodeTitle = this.getFromNode().getTitle();
 		const sFromNodeText = sFromNodeTitle ? sFromNodeTitle : this.getFromNode().getAltText();
 		const sToNodeTitle = this.getToNode().getTitle();

package/src/sap/suite/ui/commons/networkgraph/Node.js

@@ -1001,10 +1001,10 @@ sap.ui.define([
 			}, false);
 
 			let { style: sBorderColor, class: sBorderClass } = this._getStatusStyle({
-				"border-color": ElementBase.ColorType.Border,
+				"outline-color": ElementBase.ColorType.Border,
 				"background-color": this.getSelected() ? ElementBase.ColorType.SelectedBackground : "",
-				"border-width": ElementBase.ColorType.BorderWidth,
-				"border-style": ElementBase.ColorType.BorderStyle
+				"outline-width": ElementBase.ColorType.BorderWidth,
+				"outline-style": ElementBase.ColorType.BorderStyle
 			}, false);
 
 			mOptions.renderManager.openStart("div", sId + "-wrapperwithbuttons");
@@ -2754,9 +2754,71 @@ sap.ui.define([
 			aSentenceParts.push(oResourceBundle.getText("NETWORK_GRAPH_NAVIGATION_SHIFT_TAB_TO_INCOMING"));
 		}
 
+		const { aIncomingConnectors, aOutgoingConnectors } = this._getAltNavigationConnectors();
+		if (aIncomingConnectors.length >= 2 || aOutgoingConnectors.length >= 2) {
+			aSentenceParts.push(oResourceBundle.getText("NETWORK_GRAPH_NAVIGATION_ALT_CONNECTORS"));
+		}
+
 		return `${sLabel}. ${aSentenceParts.join(". ")}.`;
 	};
 
+	Node.prototype._getAltNavigationConnectors = function () {
+		const iThisX = this.getX();
+		const fnDir = (oNode) => oNode?.getX() < iThisX ? "left" : "right";
+		const fnActive = (oLine) => oLine.getVisible() && !oLine.isHidden() && !oLine._isIgnored();
+
+		// Incoming: all valid lines, sorted top-to-bottom by source node Y, then by node key for stability
+		const aIncomingConnectors = this.getParentLines()
+			.filter((oLine) => fnActive(oLine) && oLine.getFromNode())
+			.sort((a, b) => {
+				const iY = a.getFromNode().getY() - b.getFromNode().getY();
+				return iY !== 0 ? iY : a.getFromNode().getKey().localeCompare(b.getFromNode().getKey());
+			})
+			.map((oLine) => ({ line: oLine, type: "incoming", direction: fnDir(oLine.getFromNode()) }));
+
+		// Outgoing: all valid lines, sorted top-to-bottom by target node Y, then by node key for stability
+		const aOutgoingConnectors = this.getChildLines()
+			.filter((oLine) => fnActive(oLine) && oLine.getToNode())
+			.sort((a, b) => {
+				const iY = a.getToNode().getY() - b.getToNode().getY();
+				return iY !== 0 ? iY : a.getToNode().getKey().localeCompare(b.getToNode().getKey());
+			})
+			.map((oLine) => ({ line: oLine, type: "outgoing", direction: fnDir(oLine.getToNode()) }));
+
+		const aConnectors = ["left", "right"].flatMap((sDir) => [
+			...aIncomingConnectors.filter((o) => o.direction === sDir),
+			...aOutgoingConnectors.filter((o) => o.direction === sDir)
+		]);
+
+		return { aIncomingConnectors, aOutgoingConnectors, aConnectors };
+	};
+
+	Node.prototype._getAltConnectorsAnnouncement = function (aConnectors) {
+		const oGraph = this.getParent();
+		const oMapping = oGraph.getConnectionTypeMapping();
+		const bRTL = oGraph._bIsRtl;
+		return aConnectors.map((oConnector, i) => {
+			const oLine = oConnector.line;
+			const sConnectionType = oLine.getConnectionType();
+			const sResolvedType = bRTL ? (Utils.mRTLSwap[sConnectionType] || sConnectionType) : sConnectionType;
+			const sConnectionTypeText = oMapping[sResolvedType] || sResolvedType;
+			const sFromNodeTitle = oLine.getFromNode().getTitle() || oLine.getFromNode().getAltText();
+			const sToNodeTitle = oLine.getToNode().getTitle() || oLine.getToNode().getAltText();
+			// Determine the physical port side from connection type (Left key = left port, Right key = right port)
+			const sSide = oConnector.type === "outgoing"
+				? (sResolvedType.startsWith("Left") ? "left" : "right")
+				: (sResolvedType.endsWith("Left") ? "left" : "right");
+			return oResourceBundle.getText("NETWORK_GRAPH_NAVIGATION_ALT_CONNECTOR_ANNOUNCE", [
+				oConnector.type,
+				sSide,
+				sConnectionTypeText,
+				sFromNodeTitle,
+				sToNodeTitle,
+				i + 1
+			]);
+		}).join(". ");
+	};
+
 	Node.prototype._setStatusColors = function(sType) {
 		var fnSetAttrColor = function(item, sStatus) {
 			if (sStatus && item) {
@@ -2818,10 +2880,10 @@ sap.ui.define([
 					$titleText = this.$().find(".sapSuiteUiCommonsNetworkGraphDivNodeTitleText");
 
 				if(SemanticColorType.hasOwnProperty(sBackgroundColor)){
-					$wrapper.addClass(Utils.SEMANTIC_CLASS_NAME.BORDER + sBackgroundColor);
+					$wrapper.addClass(Utils.SEMANTIC_CLASS_NAME.OUTLINE + sBackgroundColor);
 				} else {
 					/** @deprecated As of 1.120 */
-					$wrapper.css("border-color", sBorderColor);
+					$wrapper.css("outline-color", sBorderColor);
 				}
 
 				let sFocusColor = this._getColor(ElementBase.ColorType[sType + "Focus"])

package/src/sap/suite/ui/commons/networkgraph/Utils.js

@@ -24,6 +24,8 @@ sap.ui.define(["sap/base/Log"], function (Log) {
 		'BACKGROUND-COLOR': 'backgroundSemanticColor',
 		BORDER: 'borderSemanticColor',
 		'BORDER-COLOR': 'borderSemanticColor',
+		OUTLINE: 'outlineSemanticColor',
+		'OUTLINE-COLOR': 'outlineSemanticColor',
 		TEXT: 'textSemanticColor',
 		FILL: 'fillSemanticColor',
 		STROKE: 'strokeSemanticColor',
@@ -312,5 +314,13 @@ sap.ui.define(["sap/base/Log"], function (Log) {
 		}, delay);
 	};
 
+	// RTL swap map for connection types: mirrors Left↔Right side labels.
+	Utils.mRTLSwap = {
+		"LeftToLeft": "RightToRight",
+		"LeftToRight": "RightToLeft",
+		"RightToLeft": "LeftToRight",
+		"RightToRight": "LeftToLeft"
+	};
+
 	return Utils;
 }, true);

package/src/sap/suite/ui/commons/networkgraph/util/ConnectionPathUtils.js

@@ -21,6 +21,31 @@ sap.ui.define([
      * @since 1.144
      */
     var ConnectionPathUtils = {
+        /**
+         * Gets the effective connection type for path calculation based on RTL mode.
+         * In RTL mode, semantic directions are reversed since nodes are already mirrored.
+         *
+         * @param {string} sConnectionType - The configured connection type
+         * @param {boolean} bIsRTL - Whether RTL mode is enabled
+         * @returns {string} The effective connection type to use for calculations
+         * @private
+         */
+        _getEffectiveConnectionType: function (sConnectionType, bIsRTL) {
+            if (!bIsRTL) {
+                return sConnectionType;
+            }
+
+            // In RTL mode, semantic directions are reversed (nodes are already mirrored)
+            const rtlMapping = {
+                [ConnectionType.RightToLeft]: ConnectionType.LeftToRight,
+                [ConnectionType.LeftToRight]: ConnectionType.RightToLeft,
+                [ConnectionType.LeftToLeft]: ConnectionType.RightToRight,
+                [ConnectionType.RightToRight]: ConnectionType.LeftToLeft
+            };
+
+            return rtlMapping[sConnectionType] || sConnectionType;
+        },
+
         /**
          * Normalizes lines in a network graph by calculating path coordinates
          * between source and target nodes based on connection types.
@@ -40,20 +65,25 @@ sap.ui.define([
             // Enable multiple directed arrows feature when using ConnectionPathUtils
             oGraph._enableMultipleDirectedArrows = true;
 
+            // Detect RTL mode from graph
+            const bIsRTL = oGraph._bIsRtl || false;
+
             // Iterate over all lines in the graph
             oGraph.getLines().forEach((oLine) => {
-                const connectionType = oLine.getConnectionType(); // Get the connection type, if not configured at Line level then the default is Right to Left from source to target.
+                const configuredConnectionType = oLine.getConnectionType(); // Get the connection type, if not configured at Line level then the default is Right to Left from source to target.
+                // In RTL mode, use effective connection type (semantically reversed)
+                const effectiveConnectionType = this._getEffectiveConnectionType(configuredConnectionType, bIsRTL);
                 const oSourceNode = oLine.getFromNode();
                 const oTargetNode = oLine.getToNode();
                 // Get anchor coordinates for source and target nodes, usually the center of the respective sides
-                const oSourceAnchor = this._getNodeAnchorCoordinates(oLine.getFromNode(), connectionType, "source");
-                const oTargetAnchor = this._getNodeAnchorCoordinates(oLine.getToNode(), connectionType, "target");
+                const oSourceAnchor = this._getNodeAnchorCoordinates(oLine.getFromNode(), effectiveConnectionType, "source");
+                const oTargetAnchor = this._getNodeAnchorCoordinates(oLine.getToNode(), effectiveConnectionType, "target");
                 const mParams = {
                     sourceAnchor: oSourceAnchor,
                     targetAnchor: oTargetAnchor,
                     sourceNode: oSourceNode,
                     targetNode: oTargetNode,
-                    sConnectionType: connectionType,
+                    sConnectionType: effectiveConnectionType,
                     gridSize: config.gridSize,
                     minEdgeLength: config.minEdgeLength
                 };