feat(ui5-card-header): implement ariaLevel property (#3878)

SAP · Sep 17, 2021 · b2b2ccd · b2b2ccd
1 parent 104ec37
commit b2b2ccd
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 3 deletions.
diff --git a/packages/main/src/CardHeader.hbs b/packages/main/src/CardHeader.hbs
@@ -6,7 +6,7 @@
 	@keyup="{{_headerKeyup}}"
 	role="{{ariaHeaderRole}}"
 	aria-labelledby="{{ariaLabelledByHeader}}"
-	aria-level="{{ariaLevel}}"
+	aria-level="{{_ariaLevel}}"
 	aria-roledescription="{{ariaCardHeaderRoleDescription}}"
 	tabindex="0"
 	id="{{_id}}--header"

diff --git a/packages/main/src/CardHeader.js b/packages/main/src/CardHeader.js
@@ -2,6 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import CardHeaderTemplate from "./generated/templates/CardHeaderTemplate.lit.js";
 import Icon from "./Icon.js";
 
@@ -92,6 +93,18 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Define the <code>aria-level</code> attribute of the component
+		 * <b>Note: </b> If the interactive property is set, <code>aria-level</code> attribute is not rendered at all.
+		 * @private
+		 * @type {Integer}
+		 * @defaultValue 3
+		 */
+		ariaLevel: {
+			type: Integer,
+			defaultValue: 3,
+		},
+
 		_headerActive: {
 			type: Boolean,
 			noAttribute: true,
@@ -179,8 +192,12 @@ class CardHeader extends UI5Element {
 		return this.interactive ? "button" : "heading";
 	}
 
-	get ariaLevel() {
-		return this.interactive ? undefined : "3";
+	get _ariaLevel() {
+		if (this.interactive) {
+			return undefined;
+		}
+
+		return this.ariaLevel;
 	}
 
 	get ariaCardHeaderRoleDescription() {

diff --git a/packages/main/test/specs/Card.spec.js b/packages/main/test/specs/Card.spec.js
@@ -57,6 +57,16 @@ describe("Card general interaction", () => {
 		assert.strictEqual(content.getAttribute("aria-label"), card.getProperty("_ariaCardContentLabel"));
 		assert.strictEqual(content.getAttribute("role"), "group");
 	});
+
+	it("tests aria-level property", () => {
+		const cardHeader = $("#card2").$("ui5-card-header");
+
+		// Default value
+		assert.strictEqual(cardHeader.shadow$(".ui5-card-header").getAttribute("aria-level"), "3");
+
+		cardHeader.setAttribute("aria-level", 4);
+		assert.strictEqual(cardHeader.shadow$(".ui5-card-header").getAttribute("aria-level"), "4");
+	});
 });
 
 describe("CardHeader", () => {