diff --git a/playwright/e2e/knock/knock-into-room.spec.ts b/playwright/e2e/knock/knock-into-room.spec.ts index 5ee366fcf25..153dee829c7 100644 --- a/playwright/e2e/knock/knock-into-room.spec.ts +++ b/playwright/e2e/knock/knock-into-room.spec.ts @@ -291,7 +291,7 @@ test.describe("Knock Into Room", () => { const spotlightDialog = await app.openSpotlight(); await spotlightDialog.filter(Filter.PublicRooms); await expect(spotlightDialog.results.nth(0)).toContainText("Cybersecurity"); - await spotlightDialog.results.nth(0).click(); + await spotlightDialog.results.nth(0).getByRole("button").click(); const roomPreviewBar = page.locator(".mx_RoomPreviewBar"); await expect(roomPreviewBar.getByRole("heading", { name: "Ask to join?" })).toBeVisible(); diff --git a/playwright/e2e/spotlight/spotlight.spec.ts b/playwright/e2e/spotlight/spotlight.spec.ts index 5d10937b671..821afd4fd7a 100644 --- a/playwright/e2e/spotlight/spotlight.spec.ts +++ b/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); diff --git a/res/css/views/dialogs/_SpotlightDialog.pcss b/res/css/views/dialogs/_SpotlightDialog.pcss index 32c14bca9d0..85ac99beab7 100644 --- a/res/css/views/dialogs/_SpotlightDialog.pcss +++ b/res/css/views/dialogs/_SpotlightDialog.pcss @@ -267,6 +267,8 @@ limitations under the License. &.mx_SpotlightDialog_result_multiline { align-items: flex-start; + /* Override the default button cursor */ + cursor: default; .mx_AccessibleButton { padding: $spacing-4 $spacing-20; @@ -359,7 +361,10 @@ limitations under the License. background: $tertiary-content; } - &:hover::before, + &:hover::before { + background-color: var(--cpd-color-bg-subtle-secondary); + } + &[aria-selected="true"]::before { background-color: $secondary-content; } @@ -369,7 +374,10 @@ limitations under the License. mask-image: url("$(res)/img/element-icons/context-menu.svg"); } - &:hover, + &:hover { + background-color: var(--cpd-color-bg-subtle-secondary); + } + &[aria-selected="true"] { background-color: $system; diff --git a/src/components/views/dialogs/spotlight/SpotlightDialog.tsx b/src/components/views/dialogs/spotlight/SpotlightDialog.tsx index 2630c85872e..b6d84207502 100644 --- a/src/components/views/dialogs/spotlight/SpotlightDialog.tsx +++ b/src/components/views/dialogs/spotlight/SpotlightDialog.tsx @@ -87,6 +87,7 @@ import { useFeatureEnabled } from "../../../../hooks/useSettings"; import { filterBoolean } from "../../../../utils/arrays"; import { transformSearchTerm } from "../../../../utils/SearchInput"; import { Filter } from "./Filter"; +import { Key } from "../../../../Keyboard"; const MAX_RECENT_SEARCHES = 10; const SECTION_LIMIT = 50; // only show 50 results per section for performance reasons @@ -698,6 +699,16 @@ const SpotlightDialog: React.FC = ({ initialText = "", initialFilter = n ); }; + const keyboardListener = (ev: ButtonEvent): void => { + const event = ev as React.KeyboardEvent; + // We want to be able to interact with the content of the row without joining automatically a room + // But we want to keep the listener for keyboard action + // We check `event.detail` because of an unknown reason on some cases, `event.key` is undefined on an `Enter` key press + if (event.key === Key.ENTER || event.key === Key.SPACE || event.detail === 0) { + listener(ev); + } + }; + let buttonLabel; if (showViewButton) { buttonLabel = _t("action|view"); @@ -710,7 +721,7 @@ const SpotlightDialog: React.FC = ({ 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} + onClick={keyboardListener} endAdornment={