diff --git a/packages/fiori/cypress/specs/DynamicPage.cy.tsx b/packages/fiori/cypress/specs/DynamicPage.cy.tsx index 9c6b189ed9175..1e01a6883be11 100644 --- a/packages/fiori/cypress/specs/DynamicPage.cy.tsx +++ b/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( + + +
Page Title
+ +
+ +
Header Content
+
+
+ Page content with enough height to enable scrolling +
+
+ ); + + // 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", () => { diff --git a/packages/fiori/src/DynamicPage.ts b/packages/fiori/src/DynamicPage.ts index 45f37d05cc30e..dd7a1094c7cd6 100644 --- a/packages/fiori/src/DynamicPage.ts +++ b/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`); diff --git a/packages/fiori/src/DynamicPageTemplate.tsx b/packages/fiori/src/DynamicPageTemplate.tsx index 6ae5e33c31871..2fb90cd966e4d 100644 --- a/packages/fiori/src/DynamicPageTemplate.tsx +++ b/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} > {this.headerInTitle &&