+
-
+ {titleHeaderWrapper.call(this)}
{this.headerInContent &&
@@ -48,13 +35,47 @@ 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 ? (
+
+ {titleHeaderContent.call(this)}
+
+ ) : (
+
+ {titleHeaderContent.call(this)}
+
+ );
+}
+
+function titleHeaderContent(this: DynamicPage) {
+ return (
+ <>
+
+ {this.headerInTitle &&
+
+ }
+ {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..ffd3316ac67b 100644
--- a/packages/fiori/test/pages/DynamicPage.html
+++ b/packages/fiori/test/pages/DynamicPage.html
@@ -183,6 +183,11 @@
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);
});