fix(ui5-dynamic-page): expand header when focus enters title area while snapped

packages/fiori/cypress/specs/DynamicPage.cy.tsx

@@ -513,6 +513,41 @@ describe("DynamicPage", () => {
 			});
 		});
 	});
+
+	it("expands the header when focus moves into the title area while snapped", () => {
+		cy.mount(
+			<DynamicPage style={{ height: "500px" }}>
+				<DynamicPageTitle slot="titleArea">
+					<div slot="heading">Page Title</div>
+					<button data-testid="title-button">Title Action</button>
+				</DynamicPageTitle>
+				<DynamicPageHeader slot="headerArea">
+					<div style={{ height: "100px" }}>Header Content</div>
+				</DynamicPageHeader>
+				<div style={{ height: "1000px" }}>
+					Page content with enough height to enable scrolling
+				</div>
+			</DynamicPage>
+		);
+
+		// Scroll to snap the header
+		cy.get("[ui5-dynamic-page]")
+			.shadow()
+			.find(".ui5-dynamic-page-scroll-container")
+			.then(($container) => {
+				$container[0].scrollTop = 200;
+			});
+
+		cy.get("[ui5-dynamic-page]")
+			.should("have.prop", "headerSnapped", true);
+
+		// Focus an element inside the title area
+		cy.get("[data-testid='title-button']").focus();
+
+		// Header should now be expanded
+		cy.get("[ui5-dynamic-page]")
+			.should("have.prop", "headerSnapped", false);
+	});
 });
 
 describe("Scroll", () => {

packages/fiori/src/DynamicPage.ts

@@ -432,10 +432,14 @@ class DynamicPage extends UI5Element {
 		}
 	}
 
-	async onExpandClick() {
+	_doToggle() {
 		this.isToggled = true;
 		this._toggleHeader();
 		this.fireDecoratorEvent("title-toggle");
+	}
+
+	async onExpandClick() {
+		this._doToggle();
 		await renderFinished();
 		this.headerActions?.focusExpandButton();
 
@@ -462,9 +466,7 @@ class DynamicPage extends UI5Element {
 		if (!this.hasHeading) {
 			return;
 		}
-		this.isToggled = true;
-		this._toggleHeader();
-		this.fireDecoratorEvent("title-toggle");
+		this._doToggle();
 		await renderFinished();
 		this.dynamicPageTitle!.focus();
 	}
@@ -553,6 +555,18 @@ class DynamicPage extends UI5Element {
 		this.setScrollPadding({ start: 0, end: 0 });
 	}
 
+	async onTitleAreaFocusIn(e: FocusEvent) {
+		if (!this.hasHeading || !this._headerSnapped || this.headerPinned || this.showHeaderInStickArea) {
+			return;
+		}
+		if (this.headerActions?.contains(e.target as Node)) {
+			return;
+		}
+		this._doToggle();
+		await renderFinished();
+		announce(this._headerLabel, InvisibleMessageMode.Polite);
+	}
+
 	setScrollPadding(padding: { start: number, end: number }) {
 		this.scrollContainer?.style.setProperty("scroll-padding-top", `${padding.start}px`);
 		this.scrollContainer?.style.setProperty("scroll-padding-bottom", `${padding.end}px`);

packages/fiori/src/DynamicPageTemplate.tsx

@@ -13,6 +13,7 @@ export default function DynamicPageTemplate(this: DynamicPage) {
 					role={this._headerRole || "banner"}
 					aria-label={this.headerAriaLabel}
 					onui5-toggle-title={this.onToggleTitle}
+					onFocusIn={this.onTitleAreaFocusIn}
 				>
 					<slot name="titleArea"></slot>
 					{this.headerInTitle &&