From c9d7f3ffec9ce02d465de03a5a946144ba31f0d5 Mon Sep 17 00:00:00 2001
From: GerganaKremenska <gergana.georgieva01@sap.com>
Date: Wed, 22 Jan 2025 18:33:29 +0200
Subject: [PATCH] fix(ui5-card): fix accessibiity role position (#10437)

* fix(ui5-card): fix accessibiity role position

* fix(ui5-card): cypress tests added

* fix(ui5-card): optimized tests
---
 packages/main/cypress/specs/Card.cy.ts   | 51 ++++++++++++++++++++++++
 packages/main/src/CardHeader.ts          |  2 +-
 packages/main/src/CardHeaderTemplate.tsx |  3 +-
 3 files changed, 53 insertions(+), 3 deletions(-)
 create mode 100644 packages/main/cypress/specs/Card.cy.ts

diff --git a/packages/main/cypress/specs/Card.cy.ts b/packages/main/cypress/specs/Card.cy.ts
new file mode 100644
index 000000000000..de53ac7938fe
--- /dev/null
+++ b/packages/main/cypress/specs/Card.cy.ts
@@ -0,0 +1,51 @@
+import { html } from "lit";
+import "../../src/Card.js";
+import "../../src/CardHeader.js";
+
+const interactiveCardHeader = html` <ui5-card>
+	<ui5-card-header
+        id="cardHeader1"
+		slot="header"
+		additional-text="4 of 10"
+		title-text="Quick Links"
+		subtitle-text="Quick links sub title"
+		interactive
+	>
+	</ui5-card-header>
+</ui5-card>`;
+
+const cardHeader = html` <ui5-card>
+	<ui5-card-header
+        id="cardHeader2"
+		slot="header"
+		additional-text="4 of 10"
+		title-text="Quick Links"
+		subtitle-text="Quick links sub title"
+	>
+	</ui5-card-header>
+</ui5-card>`;
+
+describe("Card header", () => {
+	it("Tests that aria attribute are correct on interactive header", () => {
+		cy.mount(interactiveCardHeader);
+
+		// assert
+		cy.get("#cardHeader1")
+			.shadow()
+			.find(".ui5-card-header-focusable-element")
+			.should("have.attr", "role", "button")
+			.and("have.attr", "tabindex", "0")
+			.and("have.attr", "aria-roledescription", "Interactive Card Header");
+	});
+	it("Tests that aria attribute are correct on a header", () => {
+		cy.mount(cardHeader);
+
+		// assert
+		cy.get("#cardHeader2")
+			.shadow()
+			.find(".ui5-card-header-focusable-element")
+			.should("have.attr", "role", "group")
+			.and("have.attr", "tabindex", "0")
+			.and("have.attr", "aria-roledescription", "Card Header");
+	});
+});
diff --git a/packages/main/src/CardHeader.ts b/packages/main/src/CardHeader.ts
index 31e346e3a446..fbcf3f4cd7b6 100644
--- a/packages/main/src/CardHeader.ts
+++ b/packages/main/src/CardHeader.ts
@@ -140,7 +140,7 @@ class CardHeader extends UI5Element {
 	}
 
 	get ariaRoleFocusableElement() {
-		return this.interactive ? "button" : undefined;
+		return this.interactive ? "button" : "group";
 	}
 
 	get ariaCardAvatarLabel() {
diff --git a/packages/main/src/CardHeaderTemplate.tsx b/packages/main/src/CardHeaderTemplate.tsx
index 14a6bfdd58bf..072a338033c0 100644
--- a/packages/main/src/CardHeaderTemplate.tsx
+++ b/packages/main/src/CardHeaderTemplate.tsx
@@ -12,8 +12,6 @@ export default function CardHeaderTemplate(this: CardHeader) {
 				"ui5-card-header-ff": isFirefox(),
 			}}
 			part="root"
-			role="group"
-			aria-roledescription={this.ariaRoleDescription}
 			onClick={this._click}
 			onKeyDown={this._keydown}
 			onKeyUp={this._keyup}
@@ -21,6 +19,7 @@ export default function CardHeaderTemplate(this: CardHeader) {
 			<div
 				class="ui5-card-header-focusable-element"
 				aria-labelledby={this.ariaLabelledBy}
+				aria-roledescription={this.ariaRoleDescription}
 				role={this.ariaRoleFocusableElement}
 				data-sap-focus-ref
 				tabindex={0}