@sapui5/sap.suite.ui.commons 1.145.1 → 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

@@ -191,16 +191,19 @@ sap.ui.define([
 				}
 			}
 		},
-		renderer: function (oRM, oControl) {
-			// NOTE: this render is considered to be called only for single item invalidation
-			// whole graph has different render path
-			var sHtml = oControl._render({
-				renderManager: oRM
-			});
-			this.oRm = oRM;
+		renderer: {
+			apiVersion: 2,
+			render (oRM, oControl) {
+				// NOTE: this render is considered to be called only for single item invalidation
+				// whole graph has different render path
+				var sHtml = oControl._render({
+					renderManager: oRM
+				});
+				this.oRm = oRM;
 
-			if (sHtml) {
-				oRM.unsafeHtml(sHtml);
+				if (sHtml) {
+					oRM.unsafeHtml(sHtml);
+				}
 			}
 		},
 		onAfterRendering: function () {
@@ -880,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();
@@ -1181,7 +1188,7 @@ sap.ui.define([
 			}
 		} else {
 			/** @deprecated As of 1.120 */
-			{	
+			{
 				$arrow.css("fill", sBackgroundColor);
 				$arrow.css("stroke", sBorderColor);
 				this.$("path").css("stroke", sBorderColor);
@@ -1902,6 +1909,9 @@ sap.ui.define([
 			fRemainingDistance,
 			i;
 
+		// Threshold to detect if arrow is too close to a vertex/bend (10px)
+		var fVertexThreshold = 10;
+
 		if (sDirection === "forward") {
 			// Travel from source towards target
 			for (i = 0; i < iLastIndex; i++) {
@@ -1953,7 +1963,95 @@ sap.ui.define([
 			fRatio = 1 - fRatio; // Reverse the ratio for backward direction
 		}
 
-		// Calculate the exact coordinates that are 44px away from the anchor
+		// Check if arrow position is too close to a vertex (bend point)
+		var fDistanceToStart = fRatio * fSegmentLength;
+		var fDistanceToEnd = (1 - fRatio) * fSegmentLength;
+		var fAdjustedSegmentLength;
+
+		// Strategy: When arrow is too close to a bend, prefer moving AWAY from the anchor
+		// to avoid overlap with node/port. This means:
+		// - For "forward" direction (from source): prefer moving to next segment (away from source)
+		// - For "backward" direction (from target): prefer moving to previous segment (away from target)
+
+		if (sDirection === "forward") {
+			// Arrow traveling from source: prefer moving forward (away from source) when near bend
+			if (fDistanceToEnd < fVertexThreshold && iSegmentIndex + 1 < iLastIndex) {
+				// Too close to end of segment - move to next segment (preferred)
+				fAdjustedSegmentLength = Math.sqrt(
+					Math.pow(oCoords[iSegmentIndex + 2].getX() - oCoords[iSegmentIndex + 1].getX(), 2) +
+					Math.pow(oCoords[iSegmentIndex + 2].getY() - oCoords[iSegmentIndex + 1].getY(), 2)
+				);
+
+				if (fAdjustedSegmentLength > fVertexThreshold) {
+					// Move arrow to start of next segment plus threshold
+					iSegmentIndex = iSegmentIndex + 1;
+					fRatio = fVertexThreshold / fAdjustedSegmentLength;
+					fSegmentLength = fAdjustedSegmentLength;
+				} else {
+					// Next segment too short, stay on current segment away from vertex
+					fRatio = Math.max(0, (fSegmentLength - fVertexThreshold) / fSegmentLength);
+				}
+			} else if (fDistanceToStart < fVertexThreshold) {
+				// Too close to start of segment - only move back if critically close to source anchor
+				// This is less preferred as it moves closer to the source node/port
+				if (fDistanceToStart < 5 && iSegmentIndex > 0) {
+					// Only if extremely close (< 5px) and previous segment exists
+					fAdjustedSegmentLength = Math.sqrt(
+						Math.pow(oCoords[iSegmentIndex].getX() - oCoords[iSegmentIndex - 1].getX(), 2) +
+						Math.pow(oCoords[iSegmentIndex].getY() - oCoords[iSegmentIndex - 1].getY(), 2)
+					);
+
+					if (fAdjustedSegmentLength > fVertexThreshold) {
+						iSegmentIndex = iSegmentIndex - 1;
+						fRatio = (fAdjustedSegmentLength - fVertexThreshold) / fAdjustedSegmentLength;
+						fSegmentLength = fAdjustedSegmentLength;
+					}
+				} else {
+					// Stay on current segment, move away from start vertex
+					fRatio = Math.min(1, fVertexThreshold / fSegmentLength);
+				}
+			}
+		} else if (sDirection === "backward") {
+			// Arrow traveling from target: prefer moving backward (away from target) when near bend
+			if (fDistanceToStart < fVertexThreshold && iSegmentIndex > 0) {
+				// Too close to start of segment - move to previous segment (preferred)
+				fAdjustedSegmentLength = Math.sqrt(
+					Math.pow(oCoords[iSegmentIndex].getX() - oCoords[iSegmentIndex - 1].getX(), 2) +
+					Math.pow(oCoords[iSegmentIndex].getY() - oCoords[iSegmentIndex - 1].getY(), 2)
+				);
+
+				if (fAdjustedSegmentLength > fVertexThreshold) {
+					// Move arrow to end of previous segment minus threshold
+					iSegmentIndex = iSegmentIndex - 1;
+					fRatio = (fAdjustedSegmentLength - fVertexThreshold) / fAdjustedSegmentLength;
+					fSegmentLength = fAdjustedSegmentLength;
+				} else {
+					// Previous segment too short, stay on current segment away from vertex
+					fRatio = Math.min(1, fVertexThreshold / fSegmentLength);
+				}
+			} else if (fDistanceToEnd < fVertexThreshold) {
+				// Too close to end of segment - only move forward if critically close to target anchor
+				// This is less preferred as it moves closer to the target node/port
+				if (fDistanceToEnd < 5 && iSegmentIndex + 1 < iLastIndex) {
+					// Only if extremely close (< 5px) and next segment exists
+					fAdjustedSegmentLength = Math.sqrt(
+						Math.pow(oCoords[iSegmentIndex + 2].getX() - oCoords[iSegmentIndex + 1].getX(), 2) +
+						Math.pow(oCoords[iSegmentIndex + 2].getY() - oCoords[iSegmentIndex + 1].getY(), 2)
+					);
+
+					if (fAdjustedSegmentLength > fVertexThreshold) {
+						iSegmentIndex = iSegmentIndex + 1;
+						fRatio = fVertexThreshold / fAdjustedSegmentLength;
+						fSegmentLength = fAdjustedSegmentLength;
+					}
+				} else {
+					// Stay on current segment, move away from end vertex
+					fRatio = Math.max(0, (fSegmentLength - fVertexThreshold) / fSegmentLength);
+				}
+			}
+		}
+
+		// Calculate the exact coordinates with adjusted position
 		var fExactX = oCoords[iSegmentIndex].getX() + (oCoords[iSegmentIndex + 1].getX() - oCoords[iSegmentIndex].getX()) * fRatio;
 		var fExactY = oCoords[iSegmentIndex].getY() + (oCoords[iSegmentIndex + 1].getY() - oCoords[iSegmentIndex].getY()) * fRatio;
 

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"])