Correctly handle link interactions on extension cards (#10406)

react-common/components/controls/Card.tsx

@@ -25,6 +25,26 @@ export const Card = (props: CardProps) => {
         tabIndex
     } = props;
 
+
+    const handleLinkOrTriggerClick = (e: React.MouseEvent | React.KeyboardEvent) => {
+        if (e.target && (e.target as HTMLElement).tagName == "A") {
+            return;
+        }
+        e.preventDefault();
+        onClick();
+    }
+
+    const handleClick = (e: React.MouseEvent) => {
+        handleLinkOrTriggerClick(e);
+    }
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+        const charCode = (typeof e.which == "number") ? e.which : e.keyCode;
+        if (charCode === /*enter*/13 || charCode === /*space*/32) {
+            handleLinkOrTriggerClick(e);
+        }
+    }
+
     return <div
         id={id}
         className={classList("common-card", className)}
@@ -33,9 +53,9 @@ export const Card = (props: CardProps) => {
         aria-labelledby={ariaLabelledBy}
         aria-hidden={ariaHidden}
         aria-label={ariaLabel}
-        onClick={onClick}
+        onClick={handleClick}
         tabIndex={tabIndex}
-        onKeyDown={fireClickOnEnter}>
+        onKeyDown={handleKeyDown}>
             <div className="common-card-body">
                 {children}
             </div>