fix(ui5-shellbar): ensure avatar click event is triggered correctly (#12055)

Fixes: #11920

Author: plamenivanov91

packages/fiori/cypress/specs/ShellBar.cy.tsx

@@ -321,6 +321,37 @@ describe("Responsiveness", () => {
 });
 
 describe("Slots", () => {
+	describe("Profile slot", () => {
+		it("forwards click from shellbar profile button to slotted avatar (mount pattern)", () => {
+			const clickSpy = cy.spy().as("avatarClickSpy");
+			const profileClickSpy = cy.spy().as("profileClickSpy");
+
+			cy.mount(
+				<div>
+					<ShellBar id="test-shellbar">
+						<Avatar
+							id="test-avatar"
+							slot="profile"
+							interactive
+							initials="XY"
+						/>
+					</ShellBar>
+				</div>
+			);
+
+			cy.get("#test-avatar").then($el => {
+				$el[0].addEventListener("ui5-click", clickSpy);
+			});
+			cy.get("#test-shellbar").then($el => {
+				$el[0].addEventListener("ui5-profile-click", profileClickSpy);
+			});
+
+			cy.get("#test-shellbar").shadow().find(".ui5-shellbar-image-button").realClick();
+			cy.get("@profileClickSpy").should("have.been.calledOnce");
+			cy.get("@avatarClickSpy").should("have.been.calledOnce");
+		});
+	});
+
 	describe("Content slot", () => {
 		it("Test separators visibility", () => {
 			function assertStartSeparatorVisibility(expectedExist: boolean) {
@@ -763,7 +794,7 @@ describe("Events", () => {
 			cy.get("@shellbar")
 				.shadow()
 				.find("[data-profile-btn]")
-				.click();
+    			.click({ force: true });
 
 			cy.get("@profileClick")
 				.should("have.been.calledOnce");
@@ -985,7 +1016,7 @@ describe("Events", () => {
 			cy.get("@shellbar")
 				.shadow()
 				.find("[data-profile-btn]")
-				.click();
+   				.click({ force: true });
 
 			cy.get("@profileClick")
 				.should("have.been.calledOnce");

packages/fiori/src/themes/ShellBar.css

@@ -114,7 +114,6 @@ slot[name="profile"] {
 	height: 2rem;
 	min-width: 0;
 	min-height: 2rem;
-	pointer-events: none;
 	font-size: var(--_ui5_avatar_fontsize_XS);
 	font-weight: normal;
 }

packages/main/src/themes/Button.css

@@ -117,6 +117,7 @@
 	content: "";
 	position: absolute;
 	box-sizing: border-box;
+	pointer-events: none;
 	left: 0.0625rem;
 	top: 0.0625rem;
 	right: 0.0625rem;