fix(ui5-dynamic-page): improve focus visibility for keyboard navigation

packages/fiori/src/DynamicPage.ts

@@ -188,6 +188,7 @@ class DynamicPage extends UI5Element {
 	skipSnapOnScroll = false;
 	showHeaderInStickArea = false;
 	isToggled = false;
+	_focusInHandler?: (e: FocusEvent) => void;
 
 	@property({ type: Boolean })
 	_headerSnapped = false;
@@ -220,13 +221,46 @@ class DynamicPage extends UI5Element {
 			this.scrollContainer.style.setProperty("scroll-padding-block-end", `${footerHeight}px`);
 
 			if (this._headerSnapped) {
-			  this.scrollContainer.style.setProperty("scroll-padding-block-start", `${titleHeight}px`);
+				this.scrollContainer.style.setProperty("scroll-padding-block-start", `${titleHeight}px`);
 			} else {
-			  this.scrollContainer.style.setProperty("scroll-padding-block-start", `${headerHeight + titleHeight}px`);
+				this.scrollContainer.style.setProperty("scroll-padding-block-start", `${headerHeight + titleHeight}px`);
 			}
 		}
 	}
 
+	onAfterRendering() {
+		if (this.scrollContainer) {
+			if (this._focusInHandler) {
+				this.scrollContainer.removeEventListener("focusin", this._focusInHandler);
+			}
+
+			this._focusInHandler = (e: FocusEvent) => {
+				const target = e.target as HTMLElement;
+
+				if (!target || target === this.scrollContainer) {
+					return;
+				}
+
+				if (this.dynamicPageHeader?.contains(target) || this.dynamicPageTitle?.contains(target)) {
+					return;
+				}
+
+				requestAnimationFrame(() => {
+					target.scrollIntoView({ behavior: "smooth", block: "nearest" });
+				});
+			};
+
+			this.scrollContainer.addEventListener("focusin", this._focusInHandler);
+		}
+	}
+
+	onExitDOM() {
+		if (this.scrollContainer && this._focusInHandler) {
+			this.scrollContainer.removeEventListener("focusin", this._focusInHandler);
+			this._focusInHandler = undefined;
+		}
+	}
+
 	get dynamicPageTitle(): DynamicPageTitle | null {
 		return this.querySelector<DynamicPageTitle>("[ui5-dynamic-page-title]");
 	}