+
+ 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}
>