fix(ui5-dynamic-page): add dynamic aria-label based on header state

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(
+			<DynamicPage style={{ height: "600px" }}>
+				<DynamicPageTitle slot="titleArea">
+					<div slot="heading">Page Title</div>
+				</DynamicPageTitle>
+				<DynamicPageHeader slot="headerArea">
+					<div>Header Content</div>
+				</DynamicPageHeader>
+				<div style={{ height: "1000px" }}>
+					Page content with enough height to enable scrolling
+				</div>
+			</DynamicPage>
+		);
+
+		cy.get("[ui5-dynamic-page-header]")
+			.shadow()
+			.find(".ui5-dynamic-page-header-root")
+			.should("have.attr", "aria-label", "Header Expanded");
+	});
 });

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;

packages/fiori/src/DynamicPageHeader.ts

@@ -1,14 +1,23 @@
 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";
 
 // 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();

packages/fiori/src/DynamicPageHeaderTemplate.tsx

@@ -2,7 +2,7 @@ import type DynamicPageHeader from "./DynamicPageHeader.js";
 
 export default function DynamicPageHeaderTemplate(this: DynamicPageHeader) {
 	return (
-		<div class="ui5-dynamic-page-header-root" role="region">
+		<div class="ui5-dynamic-page-header-root" role="region" aria-label={this._headerRegionAriaLabel}>
 			<slot></slot>
 		</div>
 	);