diff --git a/packages/fiori/cypress/specs/DynamicPage.cy.tsx b/packages/fiori/cypress/specs/DynamicPage.cy.tsx
index 7c744d9610ca..871843e8f71c 100644
--- a/packages/fiori/cypress/specs/DynamicPage.cy.tsx
+++ b/packages/fiori/cypress/specs/DynamicPage.cy.tsx
@@ -882,7 +882,8 @@ describe("ARIA attributes", () => {
cy.get("[ui5-dynamic-page-header]")
.shadow()
.find(".ui5-dynamic-page-header-root")
- .should("have.attr", "role", "region");
+ .should("have.attr", "role", "region")
+ .should("have.attr", "aria-label", "Header Expanded");
cy.get("[ui5-dynamic-page-title]")
.shadow()
@@ -939,6 +940,11 @@ describe("ARIA attributes", () => {
.find(".ui5-dynamic-page-title-header-wrapper")
.should("have.attr", "aria-label", "Header Snapped");
+ cy.get("[ui5-dynamic-page-header]")
+ .shadow()
+ .find(".ui5-dynamic-page-header-root")
+ .should("have.attr", "aria-label", "Header Snapped");
+
cy.get("[ui5-dynamic-page-title]")
.shadow()
.find(".ui5-dynamic-page-title-focus-area")
@@ -1013,4 +1019,25 @@ describe("ARIA attributes", () => {
.find(".ui5-dynamic-page-header-action-pin")
.should("have.attr", "tooltip", "Pin Header");
});
+
+ it("should use default aria-label based on header state", () => {
+ cy.mount(
+
+
+ Page Title
+
+
+ Header Content
+
+
+ Page content with enough height to enable scrolling
+
+
+ );
+
+ cy.get("[ui5-dynamic-page-header]")
+ .shadow()
+ .find(".ui5-dynamic-page-header-root")
+ .should("have.attr", "aria-label", "Header Expanded");
+ });
});
\ No newline at end of file
diff --git a/packages/fiori/src/DynamicPage.ts b/packages/fiori/src/DynamicPage.ts
index 0f2bd9af98f6..587367c267a5 100644
--- a/packages/fiori/src/DynamicPage.ts
+++ b/packages/fiori/src/DynamicPage.ts
@@ -209,6 +209,9 @@ class DynamicPage extends UI5Element {
this.dynamicPageTitle.hasSnappedTitleOnMobile = !!this.hasSnappedTitleOnMobile;
this.dynamicPageTitle.removeAttribute("hovered");
}
+ if (this.dynamicPageHeader) {
+ this.dynamicPageHeader._snapped = this._headerSnapped;
+ }
const titleHeight = this.dynamicPageTitle?.getBoundingClientRect().height || 0;
const headerHeight = this.dynamicPageHeader?.getBoundingClientRect().height || 0;
const footerHeight = this.showFooter ? this.footerWrapper?.getBoundingClientRect().height : 0;
diff --git a/packages/fiori/src/DynamicPageHeader.ts b/packages/fiori/src/DynamicPageHeader.ts
index 2cef4e4ae3be..df79933f366f 100644
--- a/packages/fiori/src/DynamicPageHeader.ts
+++ b/packages/fiori/src/DynamicPageHeader.ts
@@ -1,7 +1,10 @@
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
// Template
import DynamicPageHeaderTemplate from "./DynamicPageHeaderTemplate.js";
@@ -9,6 +12,12 @@ import DynamicPageHeaderTemplate from "./DynamicPageHeaderTemplate.js";
// Styles
import DynamicPageHeaderCss from "./generated/themes/DynamicPageHeader.css.js";
+// i18n
+import {
+ DYNAMIC_PAGE_ARIA_LABEL_EXPANDED_HEADER,
+ DYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER,
+} from "./generated/i18n/i18n-defaults.js";
+
/**
* @class
*
@@ -32,6 +41,10 @@ import DynamicPageHeaderCss from "./generated/themes/DynamicPageHeader.css.js";
* The responsive behavior of the `DynamicPageHeader` depends on the behavior of the
* content that is displayed.
*
+ * ### Accessibility
+ *
+ * The `DynamicPageHeader` provides an accessible label for the header region.
+ *
* @constructor
* @extends UI5Element
* @public
@@ -51,6 +64,30 @@ class DynamicPageHeader extends UI5Element {
*/
@slot({ "default": true, type: HTMLElement })
content!: HTMLElement[];
+
+ /**
+ * Defines if the header is snapped.
+ *
+ * @default false
+ * @private
+ */
+ @property({ type: Boolean })
+ _snapped = false;
+
+ @i18n("@ui5/webcomponents-fiori")
+ static i18nBundle: I18nBundle;
+
+ /**
+ * Returns the aria-label for the header region.
+ * @internal
+ */
+ get _headerRegionAriaLabel(): string {
+ const defaultText = this._snapped
+ ? DYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER
+ : DYNAMIC_PAGE_ARIA_LABEL_EXPANDED_HEADER;
+
+ return DynamicPageHeader.i18nBundle.getText(defaultText);
+ }
}
DynamicPageHeader.define();
diff --git a/packages/fiori/src/DynamicPageHeaderTemplate.tsx b/packages/fiori/src/DynamicPageHeaderTemplate.tsx
index 1e1b787ca3fd..d399abb02aaa 100644
--- a/packages/fiori/src/DynamicPageHeaderTemplate.tsx
+++ b/packages/fiori/src/DynamicPageHeaderTemplate.tsx
@@ -2,7 +2,7 @@ import type DynamicPageHeader from "./DynamicPageHeader.js";
export default function DynamicPageHeaderTemplate(this: DynamicPageHeader) {
return (
-