From 039f63b78ffff01aa8de1f2dbcaa5e72a8f410a4 Mon Sep 17 00:00:00 2001
From: yanaminkova <yana.minkova@sap.com>
Date: Fri, 8 May 2026 11:13:49 +0300
Subject: [PATCH 1/8] feat(ui5-dynamic-page): add accessibilityAttributes
 property

---
 .../fiori/cypress/specs/DynamicPage.cy.tsx    | 75 +++++++++++++++++++
 packages/fiori/src/DynamicPage.ts             | 39 +++++++++-
 packages/fiori/src/DynamicPageHeader.ts       |  9 +++
 packages/fiori/src/DynamicPageTemplate.tsx    | 57 +++++++++-----
 packages/fiori/test/pages/DynamicPage.html    | 11 +++
 5 files changed, 172 insertions(+), 19 deletions(-)

diff --git a/packages/fiori/cypress/specs/DynamicPage.cy.tsx b/packages/fiori/cypress/specs/DynamicPage.cy.tsx
index 9fc6b28a869f..40a711d0c86d 100644
--- a/packages/fiori/cypress/specs/DynamicPage.cy.tsx
+++ b/packages/fiori/cypress/specs/DynamicPage.cy.tsx
@@ -1121,4 +1121,79 @@ describe("ARIA attributes", () => {
 			.find(".ui5-dynamic-page-header-root")
 			.should("have.attr", "aria-label", "Header Expanded");
 	});
+
+	it("supports customizing header role and label via accessibilityAttributes", () => {
+		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" }}>Content</div>
+			</DynamicPage>
+		);
+
+		cy.get("[ui5-dynamic-page]").invoke("prop", "accessibilityAttributes", {
+			header: { role: "none", name: "Custom Header" },
+		});
+
+		cy.get("[ui5-dynamic-page]")
+			.shadow()
+			.find(".ui5-dynamic-page-title-header-wrapper")
+			.should("have.attr", "role", "none")
+			.should("have.attr", "aria-label", "Custom Header");
+	});
+
+	it("supports customizing headerContent label via accessibilityAttributes", () => {
+		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" }}>Content</div>
+			</DynamicPage>
+		);
+
+		cy.get("[ui5-dynamic-page]").invoke("prop", "accessibilityAttributes", {
+			headerContent: { name: "Custom Region Label" },
+		});
+
+		cy.get("[ui5-dynamic-page-header]")
+			.shadow()
+			.find(".ui5-dynamic-page-header-root")
+			.should("have.attr", "aria-label", "Custom Region Label");
+	});
+
+	it("supports customizing content and footer roles via accessibilityAttributes", () => {
+		cy.mount(
+			<DynamicPage style={{ height: "600px" }}>
+				<DynamicPageTitle slot="titleArea">
+					<div slot="heading">Page Title</div>
+				</DynamicPageTitle>
+				<div style={{ height: "1000px" }}>Content</div>
+			</DynamicPage>
+		);
+
+		cy.get("[ui5-dynamic-page]").invoke("prop", "accessibilityAttributes", {
+			content: { role: "main", name: "Page Content" },
+			footer: { role: "contentinfo", name: "Page Footer" },
+		});
+
+		cy.get("[ui5-dynamic-page]")
+			.shadow()
+			.find(".ui5-dynamic-page-content")
+			.should("have.attr", "role", "main")
+			.should("have.attr", "aria-label", "Page Content");
+
+		cy.get("[ui5-dynamic-page]")
+			.shadow()
+			.find(".ui5-dynamic-page-footer")
+			.should("have.attr", "role", "contentinfo")
+			.should("have.attr", "aria-label", "Page Footer");
+	});
 });
\ No newline at end of file
diff --git a/packages/fiori/src/DynamicPage.ts b/packages/fiori/src/DynamicPage.ts
index c3aab7f13465..68dfebdd0fcc 100644
--- a/packages/fiori/src/DynamicPage.ts
+++ b/packages/fiori/src/DynamicPage.ts
@@ -10,6 +10,7 @@ import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
 import InvisibleMessageMode from "@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { AriaLandmarkRole } from "@ui5/webcomponents-base";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 
 import debounce from "@ui5/webcomponents-base/dist/util/debounce.js";
@@ -32,6 +33,14 @@ import {
 
 import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 
+type DynamicPageAccessibilityAttributes = {
+	root?: { role?: AriaLandmarkRole; name?: string };
+	header?: { role?: AriaLandmarkRole; name?: string };
+	headerContent?: { name?: string };
+	content?: { role?: AriaLandmarkRole; name?: string };
+	footer?: { role?: AriaLandmarkRole; name?: string };
+};
+
 const SCROLL_DEBOUNCE_RATE = 5; // ms
 const SCROLL_THRESHOLD = 10; // px
 /**
@@ -184,6 +193,23 @@ class DynamicPage extends UI5Element {
 	@slot({ type: HTMLElement })
 	footerArea!: Slot<HTMLElement>;
 
+	/**
+	 * Defines the accessibility attributes for DynamicPage sections.
+	 *
+	 * Accepted fields per section — `root`, `header`, `content`, `footer`:
+	 * - `role` {AriaLandmarkRole} - Overrides the ARIA landmark role. Set `header.role = "none"` to remove the banner landmark when a ShellBar is already present on the page.
+	 * - `name` {string} - Sets `aria-label` on the section.
+	 *
+	 * Accepted fields for `headerContent`:
+	 * - `name` {string} - Sets `aria-label` on the DynamicPageHeader region (overrides the default "Header Expanded"/"Header Snapped" text).
+	 *
+	 * @public
+	 * @since 2.23.0
+	 * @default {}
+	 */
+	@property({ type: Object })
+	accessibilityAttributes: DynamicPageAccessibilityAttributes = {};
+
 	@i18n("@ui5/webcomponents-fiori")
 	static i18nBundle: I18nBundle;
 
@@ -213,6 +239,7 @@ class DynamicPage extends UI5Element {
 		}
 		if (this.dynamicPageHeader) {
 			this.dynamicPageHeader._snapped = this._headerSnapped;
+			this.dynamicPageHeader._accessibleName = this.accessibilityAttributes.headerContent?.name;
 		}
 	}
 
@@ -281,9 +308,17 @@ class DynamicPage extends UI5Element {
 	}
 
 	get headerAriaLabel() {
-		return this.hasHeading ? this._headerLabel : undefined;
+		return this.accessibilityAttributes.header?.name || (this.hasHeading ? this._headerLabel : undefined);
 	}
 
+	get _headerRole() { return this.accessibilityAttributes.header?.role; }
+	get _rootRole() { return this.accessibilityAttributes.root?.role; }
+	get _rootAriaLabel() { return this.accessibilityAttributes.root?.name; }
+	get _contentRole() { return this.accessibilityAttributes.content?.role; }
+	get _contentAriaLabel() { return this.accessibilityAttributes.content?.name; }
+	get _footerRole() { return this.accessibilityAttributes.footer?.role; }
+	get _footerAriaLabel() { return this.accessibilityAttributes.footer?.name; }
+
 	get _hidePinButton() {
 		return this.hidePinButton || isPhone();
 	}
@@ -480,3 +515,5 @@ class DynamicPage extends UI5Element {
 DynamicPage.define();
 
 export default DynamicPage;
+
+export type { DynamicPageAccessibilityAttributes };
diff --git a/packages/fiori/src/DynamicPageHeader.ts b/packages/fiori/src/DynamicPageHeader.ts
index 0bb6b4fc1e47..0daab2bc3eda 100644
--- a/packages/fiori/src/DynamicPageHeader.ts
+++ b/packages/fiori/src/DynamicPageHeader.ts
@@ -75,6 +75,12 @@ class DynamicPageHeader extends UI5Element {
 	@property({ type: Boolean })
 	_snapped = false;
 
+	/**
+	 * @private
+	 */
+	@property()
+	_accessibleName?: string;
+
 	@i18n("@ui5/webcomponents-fiori")
 	static i18nBundle: I18nBundle;
 
@@ -83,6 +89,9 @@ class DynamicPageHeader extends UI5Element {
 	 * @internal
 	 */
 	get _headerRegionAriaLabel(): string {
+		if (this._accessibleName) {
+			return this._accessibleName;
+		}
 		const defaultText = this._snapped
 			? DYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER
 			: DYNAMIC_PAGE_ARIA_LABEL_EXPANDED_HEADER;
diff --git a/packages/fiori/src/DynamicPageTemplate.tsx b/packages/fiori/src/DynamicPageTemplate.tsx
index 91c1e81f320c..c24820292cc8 100644
--- a/packages/fiori/src/DynamicPageTemplate.tsx
+++ b/packages/fiori/src/DynamicPageTemplate.tsx
@@ -3,26 +3,11 @@ import DynamicPageHeaderActions from "./DynamicPageHeaderActions.js";
 
 export default function DynamicPageTemplate(this: DynamicPage) {
 	return (
-		<div class="ui5-dynamic-page-root">
+		<div class="ui5-dynamic-page-root" role={this._rootRole} aria-label={this._rootAriaLabel}>
 			<div class="ui5-dynamic-page-scroll-container"
 				onScroll={this.snapOnScroll}
 			>
-				<header
-					class="ui5-dynamic-page-title-header-wrapper"
-					id={`${this._id}-header`}
-					aria-label={this.headerAriaLabel}
-					onui5-toggle-title={this.onToggleTitle}
-				>
-					<slot name="titleArea"></slot>
-					{this.headerInTitle &&
-						<slot tabIndex={this.headerTabIndex}
-							aria-hidden={this.headerAriaHidden}
-							name="headerArea"
-						></slot>
-					}
-
-					{this.actionsInTitle && headerActions.call(this)}
-				</header>
+				{titleHeaderWrapper.call(this)}
 
 				{this.headerInContent &&
 					<slot tabIndex={this.headerTabIndex}
@@ -36,6 +21,8 @@ export default function DynamicPageTemplate(this: DynamicPage) {
 				<div
 					part="content"
 					class="ui5-dynamic-page-content"
+					role={this._contentRole}
+					aria-label={this._contentAriaLabel}
 					onFocusIn={this.onContentFocusIn}
 					onFocusOut={this.onContentFocusOut}
 				>
@@ -48,13 +35,47 @@ export default function DynamicPageTemplate(this: DynamicPage) {
 				</div>
 			</div>
 
-			<div class="ui5-dynamic-page-footer" part="footer">
+			<div class="ui5-dynamic-page-footer" part="footer" role={this._footerRole} aria-label={this._footerAriaLabel}>
 				<slot name="footerArea"></slot>
 			</div>
 		</div>
 	);
 }
 
+function titleHeaderWrapper(this: DynamicPage) {
+	const commonProps = {
+		class: "ui5-dynamic-page-title-header-wrapper",
+		id: `${this._id}-header`,
+		"aria-label": this.headerAriaLabel,
+		"onui5-toggle-title": this.onToggleTitle,
+	};
+
+	return this._headerRole ? (
+		<div {...commonProps} role={this._headerRole}>
+			{titleHeaderContent.call(this)}
+		</div>
+	) : (
+		<header {...commonProps}>
+			{titleHeaderContent.call(this)}
+		</header>
+	);
+}
+
+function titleHeaderContent(this: DynamicPage) {
+	return (
+		<>
+			<slot name="titleArea"></slot>
+			{this.headerInTitle &&
+				<slot tabIndex={this.headerTabIndex}
+					aria-hidden={this.headerAriaHidden}
+					name="headerArea"
+				></slot>
+			}
+			{this.actionsInTitle && headerActions.call(this)}
+		</>
+	);
+}
+
 function headerActions(this: DynamicPage) {
 	if (!this.hasSnappedTitleOnMobile && this.hasHeading) {
 		return (
diff --git a/packages/fiori/test/pages/DynamicPage.html b/packages/fiori/test/pages/DynamicPage.html
index 7012c33409dd..189c412de512 100644
--- a/packages/fiori/test/pages/DynamicPage.html
+++ b/packages/fiori/test/pages/DynamicPage.html
@@ -20,6 +20,10 @@
     </head>
 
     <body>
+        <ui5-shellbar id="shellbar" primary-title="My App" secondary-title="Special Running Shoe">
+            <ui5-avatar slot="profile" icon="employee" color-scheme="Accent6"></ui5-avatar>
+        </ui5-shellbar>
+
         <ui5-dynamic-page id="page" show-footer>
             <ui5-dynamic-page-title slot="titleArea">
                 <ui5-breadcrumbs slot="breadcrumbs">
@@ -183,6 +187,13 @@
             const cancelEdit = document.querySelector("#cancel-edit");
             const saveEdit = document.querySelector("#save-edit");
 
+            // ShellBar already provides the banner landmark, so remove it from
+            // DynamicPage to avoid duplicate banner regions flagged by Axe.
+            dynamicPage.accessibilityAttributes = {
+                header: { role: "none" },
+                content: { role: "main" },
+            };
+
             editButton.addEventListener("click", () => {
                 dynamicPage.setAttribute("show-footer", true);
             });

From 16e6ace5f11211250ca739ec7a74e3e9dc5e23d4 Mon Sep 17 00:00:00 2001
From: yanaminkova <yana.minkova@sap.com>
Date: Fri, 8 May 2026 12:27:27 +0300
Subject: [PATCH 2/8] feat(ui5-dynamic-page): fix lint error

---
 packages/fiori/src/DynamicPageTemplate.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/fiori/src/DynamicPageTemplate.tsx b/packages/fiori/src/DynamicPageTemplate.tsx
index c24820292cc8..cf87b7d4f00c 100644
--- a/packages/fiori/src/DynamicPageTemplate.tsx
+++ b/packages/fiori/src/DynamicPageTemplate.tsx
@@ -44,7 +44,7 @@ export default function DynamicPageTemplate(this: DynamicPage) {
 
 function titleHeaderWrapper(this: DynamicPage) {
 	const commonProps = {
-		class: "ui5-dynamic-page-title-header-wrapper",
+		"class": "ui5-dynamic-page-title-header-wrapper",
 		id: `${this._id}-header`,
 		"aria-label": this.headerAriaLabel,
 		"onui5-toggle-title": this.onToggleTitle,

From ac830b31306202dddfd0f26f0b6541aaac6ba5a1 Mon Sep 17 00:00:00 2001
From: yanaminkova <yana.minkova@sap.com>
Date: Mon, 11 May 2026 09:23:52 +0300
Subject: [PATCH 3/8] feat(ui5-dynamic-page): update sample

---
 packages/fiori/test/pages/DynamicPage.html | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/fiori/test/pages/DynamicPage.html b/packages/fiori/test/pages/DynamicPage.html
index 189c412de512..62cf6858fe54 100644
--- a/packages/fiori/test/pages/DynamicPage.html
+++ b/packages/fiori/test/pages/DynamicPage.html
@@ -20,10 +20,6 @@
     </head>
 
     <body>
-        <ui5-shellbar id="shellbar" primary-title="My App" secondary-title="Special Running Shoe">
-            <ui5-avatar slot="profile" icon="employee" color-scheme="Accent6"></ui5-avatar>
-        </ui5-shellbar>
-
         <ui5-dynamic-page id="page" show-footer>
             <ui5-dynamic-page-title slot="titleArea">
                 <ui5-breadcrumbs slot="breadcrumbs">

From 73366383ff903410656280edffcf2fe44577b554 Mon Sep 17 00:00:00 2001
From: yanaminkova <yana.minkova@sap.com>
Date: Mon, 11 May 2026 09:24:35 +0300
Subject: [PATCH 4/8] feat(ui5-dynamic-page): update sample

---
 packages/fiori/test/pages/DynamicPage.html | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/fiori/test/pages/DynamicPage.html b/packages/fiori/test/pages/DynamicPage.html
index 62cf6858fe54..ffd3316ac67b 100644
--- a/packages/fiori/test/pages/DynamicPage.html
+++ b/packages/fiori/test/pages/DynamicPage.html
@@ -183,8 +183,6 @@
             const cancelEdit = document.querySelector("#cancel-edit");
             const saveEdit = document.querySelector("#save-edit");
 
-            // ShellBar already provides the banner landmark, so remove it from
-            // DynamicPage to avoid duplicate banner regions flagged by Axe.
             dynamicPage.accessibilityAttributes = {
                 header: { role: "none" },
                 content: { role: "main" },

From 0f81e09f442ed15679cd69a381f7932602174893 Mon Sep 17 00:00:00 2001
From: yanaminkova <yana.minkova@sap.com>
Date: Mon, 11 May 2026 10:55:18 +0300
Subject: [PATCH 5/8] feat(ui5-dynamic-page): fix lint error

---
 packages/fiori/src/DynamicPage.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/fiori/src/DynamicPage.ts b/packages/fiori/src/DynamicPage.ts
index 68dfebdd0fcc..8bb1a0eb0fe9 100644
--- a/packages/fiori/src/DynamicPage.ts
+++ b/packages/fiori/src/DynamicPage.ts
@@ -197,11 +197,11 @@ class DynamicPage extends UI5Element {
 	 * Defines the accessibility attributes for DynamicPage sections.
 	 *
 	 * Accepted fields per section — `root`, `header`, `content`, `footer`:
-	 * - `role` {AriaLandmarkRole} - Overrides the ARIA landmark role. Set `header.role = "none"` to remove the banner landmark when a ShellBar is already present on the page.
-	 * - `name` {string} - Sets `aria-label` on the section.
+	 * - `role`: Overrides the ARIA landmark role. Accepts the following string values: `"none"`, `"banner"`, `"main"`, `"region"`, `"navigation"`, `"search"`, `"complementary"`, `"form"`, `"contentinfo"`.
+	 * - `name`: Sets `aria-label` on the section. Accepts any string.
 	 *
 	 * Accepted fields for `headerContent`:
-	 * - `name` {string} - Sets `aria-label` on the DynamicPageHeader region (overrides the default "Header Expanded"/"Header Snapped" text).
+	 * - `name`: Sets `aria-label` on the DynamicPageHeader region (overrides the default "Header Expanded"/"Header Snapped" text). Accepts any string.
 	 *
 	 * @public
 	 * @since 2.23.0

From 260fa0ec05200725f3154d7e875d44b9c2f66bab Mon Sep 17 00:00:00 2001
From: yanaminkova <yana.minkova@sap.com>
Date: Tue, 19 May 2026 13:21:56 +0300
Subject: [PATCH 6/8] feat(ui5-dynamic-page): fix comments from code review

---
 .../fiori/cypress/specs/DynamicPage.cy.tsx    | 35 +++++++++---
 packages/fiori/src/DynamicPage.ts             | 54 ++++++++++++-------
 packages/fiori/src/DynamicPageHeader.ts       | 11 ++--
 packages/fiori/src/DynamicPageTemplate.tsx    | 51 ++++++------------
 packages/fiori/test/pages/DynamicPage.html    |  4 --
 5 files changed, 86 insertions(+), 69 deletions(-)

diff --git a/packages/fiori/cypress/specs/DynamicPage.cy.tsx b/packages/fiori/cypress/specs/DynamicPage.cy.tsx
index 40a711d0c86d..0b9b78554eb5 100644
--- a/packages/fiori/cypress/specs/DynamicPage.cy.tsx
+++ b/packages/fiori/cypress/specs/DynamicPage.cy.tsx
@@ -165,7 +165,7 @@ describe("DynamicPage", () => {
 
 		cy.get("[ui5-dynamic-page]")
 			.shadow()
-			.find("header.ui5-dynamic-page-title-header-wrapper > slot[name=headerArea]")
+			.find("div.ui5-dynamic-page-title-header-wrapper > slot[name=headerArea]")
 			.should("not.exist");
 
 		cy.get("[ui5-dynamic-page]")
@@ -178,7 +178,7 @@ describe("DynamicPage", () => {
 
 		cy.get("[ui5-dynamic-page]")
 			.shadow()
-			.find("header.ui5-dynamic-page-title-header-wrapper > slot[name=headerArea]")
+			.find("div.ui5-dynamic-page-title-header-wrapper > slot[name=headerArea]")
 			.should("exist");
 
 		cy.get("[ui5-dynamic-page]")
@@ -1146,7 +1146,26 @@ describe("ARIA attributes", () => {
 			.should("have.attr", "aria-label", "Custom Header");
 	});
 
-	it("supports customizing headerContent label via accessibilityAttributes", () => {
+	it("supports customizing headerContent label via accessibleName on DynamicPageHeader", () => {
+		cy.mount(
+			<DynamicPage style={{ height: "600px" }}>
+				<DynamicPageTitle slot="titleArea">
+					<div slot="heading">Page Title</div>
+				</DynamicPageTitle>
+				<DynamicPageHeader slot="headerArea" accessibleName="Custom Region Label">
+					<div>Header Content</div>
+				</DynamicPageHeader>
+				<div style={{ height: "1000px" }}>Content</div>
+			</DynamicPage>
+		);
+
+		cy.get("[ui5-dynamic-page-header]")
+			.shadow()
+			.find(".ui5-dynamic-page-header-root")
+			.should("have.attr", "aria-label", "Custom Region Label");
+	});
+
+	it("renders default banner role when only header.name is set", () => {
 		cy.mount(
 			<DynamicPage style={{ height: "600px" }}>
 				<DynamicPageTitle slot="titleArea">
@@ -1160,13 +1179,15 @@ describe("ARIA attributes", () => {
 		);
 
 		cy.get("[ui5-dynamic-page]").invoke("prop", "accessibilityAttributes", {
-			headerContent: { name: "Custom Region Label" },
+			header: { name: "Custom Header Label" },
 		});
 
-		cy.get("[ui5-dynamic-page-header]")
+		cy.get("[ui5-dynamic-page]")
 			.shadow()
-			.find(".ui5-dynamic-page-header-root")
-			.should("have.attr", "aria-label", "Custom Region Label");
+			.find("div.ui5-dynamic-page-title-header-wrapper")
+			.should("exist")
+			.should("have.attr", "role", "banner")
+			.should("have.attr", "aria-label", "Custom Header Label");
 	});
 
 	it("supports customizing content and footer roles via accessibilityAttributes", () => {
diff --git a/packages/fiori/src/DynamicPage.ts b/packages/fiori/src/DynamicPage.ts
index 8bb1a0eb0fe9..e96a14905a60 100644
--- a/packages/fiori/src/DynamicPage.ts
+++ b/packages/fiori/src/DynamicPage.ts
@@ -33,12 +33,16 @@ import {
 
 import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 
+type DynamicPageHeaderRoles  = Extract<AriaLandmarkRole, "none" | "banner" | "region">;
+type DynamicPageContentRoles = Extract<AriaLandmarkRole, "none" | "main" | "region" | "form">;
+type DynamicPageFooterRoles  = Extract<AriaLandmarkRole, "none" | "contentinfo" | "region">;
+type DynamicPageRootRoles    = Extract<AriaLandmarkRole, "none" | "main" | "region">;
+
 type DynamicPageAccessibilityAttributes = {
-	root?: { role?: AriaLandmarkRole; name?: string };
-	header?: { role?: AriaLandmarkRole; name?: string };
-	headerContent?: { name?: string };
-	content?: { role?: AriaLandmarkRole; name?: string };
-	footer?: { role?: AriaLandmarkRole; name?: string };
+	root?:    { role?: DynamicPageRootRoles;    name?: string };
+	header?:  { role?: DynamicPageHeaderRoles;  name?: string };
+	content?: { role?: DynamicPageContentRoles; name?: string };
+	footer?:  { role?: DynamicPageFooterRoles;  name?: string };
 };
 
 const SCROLL_DEBOUNCE_RATE = 5; // ms
@@ -194,19 +198,32 @@ class DynamicPage extends UI5Element {
 	footerArea!: Slot<HTMLElement>;
 
 	/**
-	 * Defines the accessibility attributes for DynamicPage sections.
-	 *
-	 * Accepted fields per section — `root`, `header`, `content`, `footer`:
-	 * - `role`: Overrides the ARIA landmark role. Accepts the following string values: `"none"`, `"banner"`, `"main"`, `"region"`, `"navigation"`, `"search"`, `"complementary"`, `"form"`, `"contentinfo"`.
-	 * - `name`: Sets `aria-label` on the section. Accepts any string.
-	 *
-	 * Accepted fields for `headerContent`:
-	 * - `name`: Sets `aria-label` on the DynamicPageHeader region (overrides the default "Header Expanded"/"Header Snapped" text). Accepts any string.
-	 *
-	 * @public
-	 * @since 2.23.0
-	 * @default {}
-	 */
+	* Defines additional accessibility attributes on different areas of the component.
+	*
+	* The accessibilityAttributes object has the following fields,
+	* where each field is an object supporting one or more accessibility attributes:
+	*
+	*  - **root**: `root.role` and `root.name`.
+	*  - **header**: `header.role` and `header.name`.
+	*  - **content**: `content.role` and `content.name`.
+	*  - **footer**: `footer.role` and `footer.name`.
+	*
+	* The accessibility attributes support the following values:
+	*
+	* - **role**: Defines the accessible ARIA landmark role of the area.
+	* Accepts the following values per section:
+	* `root` — `none`, `main`, `region`;
+	* `header` — `none`, `banner`, `region`;
+	* `content` — `none`, `main`, `region`, `form`;
+	* `footer` — `none`, `contentinfo`, `region`.
+	*
+	* - **name**: Defines the accessible ARIA name of the area.
+	* Accepts any string.
+	*
+	* @default {}
+	* @public
+	* @since 2.23.0
+	*/
 	@property({ type: Object })
 	accessibilityAttributes: DynamicPageAccessibilityAttributes = {};
 
@@ -239,7 +256,6 @@ class DynamicPage extends UI5Element {
 		}
 		if (this.dynamicPageHeader) {
 			this.dynamicPageHeader._snapped = this._headerSnapped;
-			this.dynamicPageHeader._accessibleName = this.accessibilityAttributes.headerContent?.name;
 		}
 	}
 
diff --git a/packages/fiori/src/DynamicPageHeader.ts b/packages/fiori/src/DynamicPageHeader.ts
index 0daab2bc3eda..58c9b103bf83 100644
--- a/packages/fiori/src/DynamicPageHeader.ts
+++ b/packages/fiori/src/DynamicPageHeader.ts
@@ -76,10 +76,13 @@ class DynamicPageHeader extends UI5Element {
 	_snapped = false;
 
 	/**
-	 * @private
+	 * Defines the accessible ARIA label for the header region.
+	 * Overrides the default "Header Expanded" / "Header Snapped" text.
+	 * @public
+	 * @since 2.23.0
 	 */
 	@property()
-	_accessibleName?: string;
+	accessibleName?: string;
 
 	@i18n("@ui5/webcomponents-fiori")
 	static i18nBundle: I18nBundle;
@@ -89,8 +92,8 @@ class DynamicPageHeader extends UI5Element {
 	 * @internal
 	 */
 	get _headerRegionAriaLabel(): string {
-		if (this._accessibleName) {
-			return this._accessibleName;
+		if (this.accessibleName) {
+			return this.accessibleName;
 		}
 		const defaultText = this._snapped
 			? DYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER
diff --git a/packages/fiori/src/DynamicPageTemplate.tsx b/packages/fiori/src/DynamicPageTemplate.tsx
index cf87b7d4f00c..6ae5e33c3187 100644
--- a/packages/fiori/src/DynamicPageTemplate.tsx
+++ b/packages/fiori/src/DynamicPageTemplate.tsx
@@ -7,7 +7,22 @@ export default function DynamicPageTemplate(this: DynamicPage) {
 			<div class="ui5-dynamic-page-scroll-container"
 				onScroll={this.snapOnScroll}
 			>
-				{titleHeaderWrapper.call(this)}
+				<div
+					class="ui5-dynamic-page-title-header-wrapper"
+					id={`${this._id}-header`}
+					role={this._headerRole || "banner"}
+					aria-label={this.headerAriaLabel}
+					onui5-toggle-title={this.onToggleTitle}
+				>
+					<slot name="titleArea"></slot>
+					{this.headerInTitle &&
+						<slot tabIndex={this.headerTabIndex}
+							aria-hidden={this.headerAriaHidden}
+							name="headerArea"
+						></slot>
+					}
+					{this.actionsInTitle && headerActions.call(this)}
+				</div>
 
 				{this.headerInContent &&
 					<slot tabIndex={this.headerTabIndex}
@@ -42,40 +57,6 @@ export default function DynamicPageTemplate(this: DynamicPage) {
 	);
 }
 
-function titleHeaderWrapper(this: DynamicPage) {
-	const commonProps = {
-		"class": "ui5-dynamic-page-title-header-wrapper",
-		id: `${this._id}-header`,
-		"aria-label": this.headerAriaLabel,
-		"onui5-toggle-title": this.onToggleTitle,
-	};
-
-	return this._headerRole ? (
-		<div {...commonProps} role={this._headerRole}>
-			{titleHeaderContent.call(this)}
-		</div>
-	) : (
-		<header {...commonProps}>
-			{titleHeaderContent.call(this)}
-		</header>
-	);
-}
-
-function titleHeaderContent(this: DynamicPage) {
-	return (
-		<>
-			<slot name="titleArea"></slot>
-			{this.headerInTitle &&
-				<slot tabIndex={this.headerTabIndex}
-					aria-hidden={this.headerAriaHidden}
-					name="headerArea"
-				></slot>
-			}
-			{this.actionsInTitle && headerActions.call(this)}
-		</>
-	);
-}
-
 function headerActions(this: DynamicPage) {
 	if (!this.hasSnappedTitleOnMobile && this.hasHeading) {
 		return (
diff --git a/packages/fiori/test/pages/DynamicPage.html b/packages/fiori/test/pages/DynamicPage.html
index ffd3316ac67b..d819a3f62a1e 100644
--- a/packages/fiori/test/pages/DynamicPage.html
+++ b/packages/fiori/test/pages/DynamicPage.html
@@ -183,10 +183,6 @@
             const cancelEdit = document.querySelector("#cancel-edit");
             const saveEdit = document.querySelector("#save-edit");
 
-            dynamicPage.accessibilityAttributes = {
-                header: { role: "none" },
-                content: { role: "main" },
-            };
 
             editButton.addEventListener("click", () => {
                 dynamicPage.setAttribute("show-footer", true);

From 3beb1f1c1132ad2454906f4e7b2c4a39e0d4903d Mon Sep 17 00:00:00 2001
From: yanaminkova <yana.minkova@sap.com>
Date: Tue, 19 May 2026 13:32:45 +0300
Subject: [PATCH 7/8] feat(ui5-dynamic-page): fix lint errors

---
 packages/fiori/src/DynamicPage.ts       | 27 +++++++++++++++++--------
 packages/fiori/src/DynamicPageHeader.ts |  1 +
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/packages/fiori/src/DynamicPage.ts b/packages/fiori/src/DynamicPage.ts
index e96a14905a60..f8a9a978ac3c 100644
--- a/packages/fiori/src/DynamicPage.ts
+++ b/packages/fiori/src/DynamicPage.ts
@@ -33,16 +33,27 @@ import {
 
 import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 
-type DynamicPageHeaderRoles  = Extract<AriaLandmarkRole, "none" | "banner" | "region">;
+type DynamicPageHeaderRoles = Extract<AriaLandmarkRole, "none" | "banner" | "region">;
 type DynamicPageContentRoles = Extract<AriaLandmarkRole, "none" | "main" | "region" | "form">;
-type DynamicPageFooterRoles  = Extract<AriaLandmarkRole, "none" | "contentinfo" | "region">;
-type DynamicPageRootRoles    = Extract<AriaLandmarkRole, "none" | "main" | "region">;
-
+type DynamicPageFooterRoles = Extract<AriaLandmarkRole, "none" | "contentinfo" | "region">;
+type DynamicPageRootRoles = Extract<AriaLandmarkRole, "none" | "main" | "region">;
 type DynamicPageAccessibilityAttributes = {
-	root?:    { role?: DynamicPageRootRoles;    name?: string };
-	header?:  { role?: DynamicPageHeaderRoles;  name?: string };
-	content?: { role?: DynamicPageContentRoles; name?: string };
-	footer?:  { role?: DynamicPageFooterRoles;  name?: string };
+	root?: {
+		role?: DynamicPageRootRoles,
+		name?: string,
+	},
+	header?: {
+		role?: DynamicPageHeaderRoles,
+		name?: string,
+	},
+	content?: {
+		role?: DynamicPageContentRoles,
+		name?: string,
+	},
+	footer?: {
+		role?: DynamicPageFooterRoles,
+		name?: string,
+	},
 };
 
 const SCROLL_DEBOUNCE_RATE = 5; // ms
diff --git a/packages/fiori/src/DynamicPageHeader.ts b/packages/fiori/src/DynamicPageHeader.ts
index 58c9b103bf83..b43e315d0dc6 100644
--- a/packages/fiori/src/DynamicPageHeader.ts
+++ b/packages/fiori/src/DynamicPageHeader.ts
@@ -79,6 +79,7 @@ class DynamicPageHeader extends UI5Element {
 	 * Defines the accessible ARIA label for the header region.
 	 * Overrides the default "Header Expanded" / "Header Snapped" text.
 	 * @public
+	 * @default undefined
 	 * @since 2.23.0
 	 */
 	@property()

From b82b7d5021be61e5329aca22b89aeb6f22b4fcba Mon Sep 17 00:00:00 2001
From: yanaminkova <yana.minkova@sap.com>
Date: Mon, 8 Jun 2026 10:40:57 +0300
Subject: [PATCH 8/8] feat(ui5-dynamic-page): update since tag

---
 packages/fiori/src/DynamicPage.ts       | 2 +-
 packages/fiori/src/DynamicPageHeader.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/fiori/src/DynamicPage.ts b/packages/fiori/src/DynamicPage.ts
index 39a57a36786f..582f1b63f75f 100644
--- a/packages/fiori/src/DynamicPage.ts
+++ b/packages/fiori/src/DynamicPage.ts
@@ -233,7 +233,7 @@ class DynamicPage extends UI5Element {
 	*
 	* @default {}
 	* @public
-	* @since 2.23.0
+	* @since 2.24.0
 	*/
 	@property({ type: Object })
 	accessibilityAttributes: DynamicPageAccessibilityAttributes = {};
diff --git a/packages/fiori/src/DynamicPageHeader.ts b/packages/fiori/src/DynamicPageHeader.ts
index b43e315d0dc6..09bb51277bd3 100644
--- a/packages/fiori/src/DynamicPageHeader.ts
+++ b/packages/fiori/src/DynamicPageHeader.ts
@@ -80,7 +80,7 @@ class DynamicPageHeader extends UI5Element {
 	 * Overrides the default "Header Expanded" / "Header Snapped" text.
 	 * @public
 	 * @default undefined
-	 * @since 2.23.0
+	 * @since 2.24.0
 	 */
 	@property()
 	accessibleName?: string;