fix(ui5-panel): recognizable panel heading (#5628)

SAP · Aug 8, 2022 · 6f1b250 · 6f1b250
1 parent dc73fe2
commit 6f1b250
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 49 deletions.
diff --git a/packages/main/src/Panel.hbs b/packages/main/src/Panel.hbs
@@ -8,55 +8,59 @@
 	{{#if hasHeaderOrHeaderText}}
 		{{! header: either header or h1 with header text}}
 		<div
-			@click="{{_headerClick}}"
-			@keydown="{{_headerKeyDown}}"
-			@keyup="{{_headerKeyUp}}"
-			class="ui5-panel-header"
-			tabindex="{{headerTabIndex}}"
-			role="{{accInfo.role}}"
-			aria-expanded="{{accInfo.ariaExpanded}}"
-			aria-controls="{{accInfo.ariaControls}}"
-			aria-labelledby="{{accInfo.ariaLabelledby}}"
-			part="header"
+			class="ui5-panel-heading-wrapper"
+			role="{{headingWrapperRole}}"
+			aria-level="{{headingWrapperAriaLevel}}"
 		>
-			{{#unless fixed}}
-				<div class="ui5-panel-header-button-root">
-					{{#if _hasHeader}}
-						<ui5-button
-							design="Transparent"
-							class="ui5-panel-header-button ui5-panel-header-button-with-icon"
-							@click="{{_toggleButtonClick}}"
-							.accessibilityAttributes={{accInfo.button.accessibilityAttributes}}
-							tooltip="{{accInfo.button.title}}"
-							accessible-name="{{accInfo.button.ariaLabelButton}}"
-						>
-							<div class="ui5-panel-header-icon-wrapper">
-								<ui5-icon class="ui5-panel-header-icon {{classes.headerBtn}}" name="slim-arrow-right"></ui5-icon>
-							</div>
-						</ui5-button>
-					{{else}}
-						<ui5-icon
-							class="ui5-panel-header-button ui5-panel-header-icon {{classes.headerBtn}}"
-							name="slim-arrow-right"
-							show-tooltip
-							accessible-name="{{toggleButtonTitle}}"
-						></ui5-icon>
-					{{/if}}
-				</div>
-			{{/unless}}
+			<div
+				@click="{{_headerClick}}"
+				@keydown="{{_headerKeyDown}}"
+				@keyup="{{_headerKeyUp}}"
+				class="ui5-panel-header"
+				tabindex="{{headerTabIndex}}"
+				role="{{accInfo.role}}"
+				aria-expanded="{{accInfo.ariaExpanded}}"
+				aria-controls="{{accInfo.ariaControls}}"
+				aria-labelledby="{{accInfo.ariaLabelledby}}"
+				part="header"
+			>
+				{{#unless fixed}}
+					<div class="ui5-panel-header-button-root">
+						{{#if _hasHeader}}
+							<ui5-button
+								design="Transparent"
+								class="ui5-panel-header-button ui5-panel-header-button-with-icon"
+								@click="{{_toggleButtonClick}}"
+								.accessibilityAttributes={{accInfo.button.accessibilityAttributes}}
+								tooltip="{{accInfo.button.title}}"
+								accessible-name="{{accInfo.button.ariaLabelButton}}"
+							>
+								<div class="ui5-panel-header-icon-wrapper">
+									<ui5-icon class="ui5-panel-header-icon {{classes.headerBtn}}" name="slim-arrow-right"></ui5-icon>
+								</div>
+							</ui5-button>
+						{{else}}
+							<ui5-icon
+								class="ui5-panel-header-button ui5-panel-header-icon {{classes.headerBtn}}"
+								name="slim-arrow-right"
+								show-tooltip
+								accessible-name="{{toggleButtonTitle}}"
+							></ui5-icon>
+						{{/if}}
+					</div>
+				{{/unless}}
 
-			{{#if _hasHeader}}
-				<slot name="header"></slot>
-			{{else}}
-				<div
-					id="{{_id}}-header-title"
-					role="heading"
-					aria-level="{{headerAriaLevel}}"
-					class="ui5-panel-header-title"
-				>
-					{{headerText}}
-				</div>
-			{{/if}}
+				{{#if _hasHeader}}
+					<slot name="header"></slot>
+				{{else}}
+					<div
+						id="{{_id}}-header-title"
+						class="ui5-panel-header-title"
+					>
+						{{headerText}}
+					</div>
+				{{/if}}
+			</div>
 		</div>
 	{{/if}}
 

diff --git a/packages/main/src/Panel.js b/packages/main/src/Panel.js
@@ -441,6 +441,14 @@ class Panel extends UI5Element {
 		return (this.header.length || this.fixed) ? "-1" : "0";
 	}
 
+	get headingWrapperAriaLevel() {
+		return !this._hasHeader ? this.headerAriaLevel : undefined;
+	}
+
+	get headingWrapperRole() {
+		return !this._hasHeader ? "heading" : undefined;
+	}
+
 	get nonFixedInternalHeader() {
 		return !this._hasHeader && !this.fixed;
 	}

diff --git a/packages/main/test/specs/Panel.spec.js b/packages/main/test/specs/Panel.spec.js
@@ -129,7 +129,7 @@ describe("Panel general interaction", () => {
 		it("tests whether aria attributes are set correctly with native header", async () => {
 			const panelRoot = await browser.$("#panel1").shadow$(".ui5-panel-root");
 			const header = await browser.$("#panel1").shadow$(".ui5-panel-header");
-			const title = await browser.$("#panel1").shadow$(".ui5-panel-header-title");
+			const heading = await browser.$("#panel1").shadow$(".ui5-panel-heading-wrapper");
 			const button = await browser.$("#panel1").shadow$(".ui5-panel-header-button");
 			let resourceBundleText = null;
 
@@ -148,7 +148,8 @@ describe("Panel general interaction", () => {
 			assert.ok(await header.getAttribute("role"), "role should be set on the header");
 			assert.ok(await button.getAttribute("accessible-name"), resourceBundleText, "icon has correct aria-label set");
 
-			assert.strictEqual(await title.getAttribute("aria-level"), "3", "title aria-level is set to 3 correctly");
+			assert.strictEqual(await heading.getAttribute("aria-level"), "3", "title aria-level is set to 3 correctly");
+			assert.strictEqual(await heading.getAttribute("role"), "heading", "heading role is set correctly");
 		});
 
 		it("tests aria label attributes", async () => {
@@ -186,9 +187,12 @@ describe("Panel general interaction", () => {
 			const panelRoot = await browser.$("#panel2").shadow$(".ui5-panel-root");
 			const button = await browser.$("#panel2").shadow$(".ui5-panel-header-button").shadow$(".ui5-button-root");
 			const header = await browser.$("#panel2").shadow$(".ui5-panel-header");
+			const heading = await browser.$("#panel2").shadow$(".ui5-panel-heading-wrapper");
 
 			assert.notOk(await header.getAttribute("aria-expanded"), "aria-expanded shouldn't be set on the header");
 			assert.notOk(await header.getAttribute("aria-controls"), "aria-controls shouldn't be set on the header");
+			assert.notOk(await heading.getAttribute("aria-level"), "aria-level should not be set when a header slot is used");
+			assert.notOk(await heading.getAttribute("role"), "heading role should not be set when a header slot is used");
 
 			assert.ok(await button.getAttribute("aria-expanded"), "aria-expanded should be set on the button");
 			assert.ok(await button.getAttribute("aria-controls"), "aria-controls should be set on the button");