Spotlight: don't join a public room when clicking on it

playwright/e2e/spotlight/spotlight.spec.ts

@@ -159,7 +159,7 @@ test.describe("Spotlight", () => {
         await expect(resultLocator).toHaveCount(1);
         await expect(resultLocator.first()).toContainText(room2Name);
         await expect(resultLocator.first()).toContainText("Join");
-        await resultLocator.first().click();
+        await resultLocator.first().getByRole("button").click();
         expect(page.url()).toContain(room2Id);
         await expect(page.locator(".mx_RoomView_MessageList")).toHaveCount(1);
         await expect(roomHeaderName(page)).toContainText(room2Name);
@@ -174,7 +174,7 @@ test.describe("Spotlight", () => {
         await expect(resultLocator).toHaveCount(1);
         await expect(resultLocator.first()).toContainText(room3Name);
         await expect(resultLocator.first()).toContainText("View");
-        await resultLocator.first().click();
+        await resultLocator.first().getByRole("button").click();
         expect(page.url()).toContain(room3Id);
         await page.getByRole("button", { name: "Join the discussion" }).click();
         await expect(roomHeaderName(page)).toHaveText(room3Name);

src/components/views/dialogs/spotlight/Option.tsx

@@ -25,14 +25,29 @@ interface OptionProps {
     endAdornment?: ReactNode;
     id?: string;
     className?: string;
-    onClick: ((ev: ButtonEvent) => void) | null;
+    /* If onClick is provided an AccessibleButton is used otherwise a li is used */
+    onClick?: ((ev: ButtonEvent) => void) | null;
 }
 
-export const Option: React.FC<OptionProps> = ({ inputRef, children, endAdornment, className, ...props }) => {
+export const Option: React.FC<OptionProps> = ({ inputRef, children, endAdornment, className, onClick, ...props }) => {
     const [onFocus, isActive, ref] = useRovingTabIndex<HTMLLIElement>(inputRef);
-    return (
+
+    const content = (
+        <>
+            {children}
+            <div className="mx_SpotlightDialog_option--endAdornment">
+                <kbd className="mx_SpotlightDialog_enterPrompt" aria-hidden>
+                    ↵
+                </kbd>
+                {endAdornment}
+            </div>
+        </>
+    );
+
+    return onClick ? (
         <AccessibleButton
             {...props}
+            onClick={onClick}
             className={classNames(className, "mx_SpotlightDialog_option")}
             onFocus={onFocus}
             ref={ref}
@@ -41,13 +56,19 @@ export const Option: React.FC<OptionProps> = ({ inputRef, children, endAdornment
             role="option"
             element="li"
         >
-            {children}
-            <div className="mx_SpotlightDialog_option--endAdornment">
-                <kbd className="mx_SpotlightDialog_enterPrompt" aria-hidden>
-                    ↵
-                </kbd>
-                {endAdornment}
-            </div>
+            {content}
         </AccessibleButton>
+    ) : (
+        <li
+            {...props}
+            className={classNames(className, "mx_SpotlightDialog_option")}
+            onFocus={onFocus}
+            ref={ref}
+            tabIndex={-1}
+            aria-selected={isActive}
+            role="option"
+        >
+            {content}
+        </li>
     );
 };

src/components/views/dialogs/spotlight/SpotlightDialog.tsx

@@ -710,7 +710,6 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                         id={`mx_SpotlightDialog_button_result_${result.publicRoom.room_id}`}
                         className="mx_SpotlightDialog_result_multiline"
                         key={`${Section[result.section]}-${result.publicRoom.room_id}`}
-                        onClick={listener}
                         endAdornment={
                             <AccessibleButton
                                 kind={showViewButton ? "primary_outline" : "primary"}