-improved logic with less hard coded values and redundant maintainable code

Author: plamenivanov91

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

@@ -13,6 +13,7 @@ import Select from "../../src/Select.js";
 import Option from "../../src/Option.js";
 import CheckBox from "../../src/CheckBox.js";
 import Bar from "../../src/Bar.js";
+import Link from "../../src/Link.js";
 
 function getGrowingWithScrollList(length: number, height: string = "100px") {
 	return (
@@ -729,6 +730,98 @@ describe("List Tests", () => {
 		cy.get("@itemClickStub").should("not.have.been.called");
 	});
 
+	it("fires item-click when nested ui5-link is clicked", () => {
+		cy.mount(
+			<List>
+				<ListItemCustom>
+					<div>
+						<span>First List Item</span>
+						<Link id="nested-link" href="#">Details</Link>
+					</div>
+				</ListItemCustom>
+			</List>
+		);
+
+		cy.get("[ui5-list]").then(($list) => {
+			$list[0].addEventListener("ui5-item-click", cy.stub().as("itemClickStub"));
+		});
+
+		cy.get("#nested-link").then(($link) => {
+			const linkClickStub = cy.stub().as("linkClickStub");
+			$link[0].addEventListener("click", linkClickStub);
+		});
+
+		cy.get("#nested-link").click();
+
+		cy.get("@linkClickStub").should("have.been.calledOnce");
+		cy.get("@itemClickStub").should("have.been.calledOnce");
+	});
+
+	it("does not fire item-click when nested disabled custom element is clicked", () => {
+		cy.mount(
+			<List>
+				<ListItemCustom>
+					<div>
+						<span>First List Item</span>
+						<div id="custom-host"></div>
+					</div>
+				</ListItemCustom>
+			</List>
+		);
+
+		cy.get("[ui5-list]").then(($list) => {
+			$list[0].addEventListener("ui5-item-click", cy.stub().as("itemClickStub"));
+		});
+
+		cy.get("#custom-host").then(($host) => {
+			const customAction = document.createElement("x-action");
+			customAction.id = "disabled-custom-action";
+			customAction.setAttribute("aria-disabled", "true");
+			customAction.textContent = "Disabled Action";
+			$host[0].appendChild(customAction);
+
+			const customClickStub = cy.stub().as("customClickStub");
+			customAction.addEventListener("click", customClickStub);
+		});
+
+		cy.get("#disabled-custom-action").click();
+
+		cy.get("@customClickStub").should("have.been.calledOnce");
+		cy.get("@itemClickStub").should("not.have.been.called");
+	});
+
+	it("fires item-click when nested custom element is not disabled", () => {
+		cy.mount(
+			<List>
+				<ListItemCustom>
+					<div>
+						<span>First List Item</span>
+						<div id="custom-host-enabled"></div>
+					</div>
+				</ListItemCustom>
+			</List>
+		);
+
+		cy.get("[ui5-list]").then(($list) => {
+			$list[0].addEventListener("ui5-item-click", cy.stub().as("itemClickStub"));
+		});
+
+		cy.get("#custom-host-enabled").then(($host) => {
+			const customAction = document.createElement("x-action");
+			customAction.id = "enabled-custom-action";
+			customAction.textContent = "Enabled Action";
+			$host[0].appendChild(customAction);
+
+			const customClickStub = cy.stub().as("customClickStub");
+			customAction.addEventListener("click", customClickStub);
+		});
+
+		cy.get("#enabled-custom-action").click();
+
+		cy.get("@customClickStub").should("have.been.calledOnce");
+		cy.get("@itemClickStub").should("have.been.calledOnce");
+	});
+
 	it("selectionChange events provides previousSelection item", () => {
 		cy.mount(
 			<div>

packages/main/src/ListItemBase.ts

@@ -173,24 +173,45 @@ class ListItemBase extends UI5Element implements ITabbable {
 
 	_isDisabledInteractiveContentClicked(e: MouseEvent): boolean {
 		const path = e.composedPath();
+		const focusDomRef = this.getFocusDomRef();
 
 		return path.some(target => {
 			if (!(target instanceof HTMLElement)) {
 				return false;
 			}
 
-			if (target.matches("button, input, select, textarea")) {
-				return (target as HTMLButtonElement | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement).disabled;
+			if (target === this || target === focusDomRef) {
+				return false;
 			}
 
-			if (target.matches("ui5-button, ui5-input, ui5-textarea, ui5-select, ui5-combobox, ui5-multi-combobox, ui5-switch, ui5-checkbox, ui5-radio-button, ui5-date-picker, ui5-daterange-picker, ui5-time-picker, ui5-step-input")) {
-				return !!(target as { disabled?: boolean }).disabled;
+			if (!this._isNativeInteractiveElement(target) && !this._isCustomInteractiveElement(target)) {
+				return false;
 			}
 
-			return false;
+			return this._isElementDisabled(target);
 		});
 	}
 
+	_isNativeInteractiveElement(target: HTMLElement): boolean {
+		return target.matches("button, input, select, textarea");
+	}
+
+	_isCustomInteractiveElement(target: HTMLElement): boolean {
+		const targetWithDisabled = target as HTMLElement & { disabled?: boolean };
+
+		return target.tagName.includes("-")
+			&& ("disabled" in targetWithDisabled || target.hasAttribute("aria-disabled"));
+	}
+
+	_isElementDisabled(target: HTMLElement): boolean {
+		const targetWithDisabled = target as HTMLElement & { disabled?: boolean };
+		if (typeof targetWithDisabled.disabled === "boolean") {
+			return targetWithDisabled.disabled;
+		}
+
+		return target.getAttribute("aria-disabled") === "true";
+	}
+
 	/**
 	 * Override from subcomponent, if needed
 	 */