fix(ui5-avatar): disable click on disabled interactive (#11527)

* fix(ui5-avatar): disable click on disabled interactive

* fix(ui5-avatar): fix test

* fix(ui5-avatar): remove the tesy due to failing on server

* fix(ui5-avatar): remove legacy test, rewritten in cy

* fix(ui5-avatar): fix click event when badge is added

---------

Co-authored-by: PetyaMarkovaBogdanova <[email protected]>

Author: Petya Markova

packages/main/cypress/specs/Avatar.cy.tsx

@@ -1,4 +1,6 @@
 import Avatar from "../../src/Avatar.js";
+import Tag from "../../src/Tag.js";
+import Icon from "../../src/Icon.js";
 import "@ui5/webcomponents-icons/dist/supplier.js";
 
 describe("Accessibility", () => {
@@ -30,4 +32,24 @@ describe("Accessibility", () => {
 			.find("svg")
 			.should("have.attr", "aria-label", ACCESSIBLE_NAME);
 	});
+
+	it("doesn't fire ui5-click event, when disabled property is set", () => {
+		cy.mount(
+			<div>
+				<Avatar interactive disabled initials="JD" id="diabled-avatar" onClick={increment}>
+				<Tag slot="badge">
+					<Icon slot="icon" name="accelerated"></Icon>
+				</Tag>
+				</Avatar>
+				<input value="0" id="click-event" />
+			</div>
+		);
+
+		function increment() {
+			const input = document.getElementById("click-event") as HTMLInputElement;
+			input.value = "1";
+		}
+		cy.get("#diabled-avatar").realClick();
+		cy.get("#click-event").should("have.value", "0");
+	});
 });

packages/main/src/themes/Avatar.css

@@ -32,6 +32,7 @@
 
 :host([disabled]) {
 	opacity: var(--sapContent_DisabledOpacity);
+	pointer-events: none;
 }
 
 :host {
@@ -302,7 +303,6 @@
 
 /* Slotted Badge */
 ::slotted([slot="badge"]) {
-	pointer-events: initial;
 	position: absolute;
 	bottom: 0;
 	right: 0;
@@ -315,6 +315,10 @@
 	--_ui5-tag-height: 1.125rem;
 }
 
+:host(:not([disabled])) ::slotted([slot="badge"]) {
+	pointer-events: initial;
+}
+
 :host([_size="L"]) ::slotted([slot="badge"]),
 :host([size="L"]) ::slotted([slot="badge"]) {
 	width: 1.25rem;

packages/main/test/specs/Avatar.spec.js

@@ -75,15 +75,6 @@ describe("Avatar", () => {
 
 	});
 
-	it("tests clicking on interactive disabled avatar", async () => {
-
-		const avatarRoot = await browser.$("#interactive-disabled").shadow$(".ui5-avatar-root");
-		const input3 = await browser.$("#click-event");
-
-		await avatarRoot.click();
-		assert.strictEqual(await input3.getAttribute("value"), "0", "Mouse click event not thrown when avatar is interactive + disabled");
-	});
-
 	it("Tests noConflict 'ui5-click' event for interactive avatars", async () => {
 		const avatarRoot = await browser.$("#interactive-avatar").shadow$(".ui5-avatar-root");
 		const input = await browser.$("#click-event");