fix(ui5-dynamic-page): fix header role (#10317)

Co-authored-by: PetyaMarkovaBogdanova <petya.markova@sap.com>
SAP · Dec 9, 2024 · 00823cf · 00823cf
1 parent e53bd79
commit 00823cf
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 6 deletions.
diff --git a/packages/fiori/src/DynamicPage.hbs b/packages/fiori/src/DynamicPage.hbs
@@ -5,7 +5,6 @@
 			id="{{_id}}-header"
 			aria-label="{{_headerLabel}}"
 			aria-expanded="{{_headerExpanded}}"
-			role="region"
 			@ui5-_toggle-title={{onToggleTitle}}
 		>
 			<slot name="titleArea"></slot>
@@ -17,7 +16,7 @@
 				{{> header-actions}}
 			{{/if}}
 		</header>
-		
+
 		{{#if headerInContent}}
 			<slot tabindex="{{headerTabIndex}}" ?aria-hidden="{{headerAriaHidden}}" name="headerArea"></slot>
 		{{/if}}

diff --git a/packages/fiori/src/DynamicPageHeader.hbs b/packages/fiori/src/DynamicPageHeader.hbs
@@ -1,3 +1,3 @@
-<div class="ui5-dynamic-page-header-root">
+<div class="ui5-dynamic-page-header-root" role="region">
     <slot></slot>
 </div>
diff --git a/packages/fiori/test/specs/DynamicPage.spec.js b/packages/fiori/test/specs/DynamicPage.spec.js
@@ -406,6 +406,7 @@ describe("ARIA attributes", () => {
         const title = await browser.$("#page ui5-dynamic-page-title");
         const titleFocusArea = await title.shadow$(".ui5-dynamic-page-title-focus-area");
         const headerWrapper = await page.shadow$(".ui5-dynamic-page-title-header-wrapper");
+        const headerRoot = await page.$("ui5-dynamic-page-header").shadow$(".ui5-dynamic-page-header-root");
         const headerActions = await page.shadow$("ui5-dynamic-page-header-actions");
         const expandButton = await headerActions.shadow$("ui5-button.ui5-dynamic-page-header-action-expand");
         const pinButton = await headerActions.shadow$("ui5-toggle-button.ui5-dynamic-page-header-action-pin");
@@ -418,7 +419,7 @@ describe("ARIA attributes", () => {
             "aria-label value is correct");
         assert.strictEqual(await headerWrapper.getAttribute("aria-expanded"), "true",
             "aria-expanded value is correct");
-        assert.strictEqual(await headerWrapper.getAttribute("role"), "region",
+        assert.strictEqual(await headerRoot.getAttribute("role"), "region",
             "header role is correct");
 
         assert.strictEqual(await titleFocusArea.getAttribute("aria-expanded"), "true",
@@ -453,8 +454,6 @@ describe("ARIA attributes", () => {
             "aria-label value is correct");
         assert.strictEqual(await headerWrapper.getAttribute("aria-expanded"), "false",
             "aria-expanded value is correct");
-        assert.strictEqual(await headerWrapper.getAttribute("role"), "region",
-            "role is correct");
 
         assert.strictEqual(await titleFocusArea.getAttribute("aria-expanded"), "false",
             "aria-expanded value is correct");