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

@@ -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");
+	});
+});

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() {

packages/main/src/CardHeaderTemplate.tsx

@@ -12,15 +12,14 @@ 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}
 		>
 			<div
 				class="ui5-card-header-focusable-element"
 				aria-labelledby={this.ariaLabelledBy}
+				aria-roledescription={this.ariaRoleDescription}
 				role={this.ariaRoleFocusableElement}
 				data-sap-focus-ref
 				tabindex={0}