mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-22 01:05:42 +03:00
Code Issues Projects Releases Packages Wiki Activity

Fix spotlight opening in TAC (#12315)

Browse source 
* Fix spotlight opening in TAC

* Add tests

* Remove `RovingTabIndexProvider`
This commit is contained in:
Florian Duros 2024-03-08 11:18:30 +01:00 committed by GitHub
parent 70365c891b
commit ddbc6439ce
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 95 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
playwright/e2e/spaces/threads-activity-centre/threadsActivityCentre.spec.ts
View file

@ -17,6 +17,7 @@
*/
import { expect, test } from ".";
import { CommandOrControl } from "../../utils";
test.describe("Threads Activity Centre", () => {
test.use({
@ -118,4 +119,19 @@ test.describe("Threads Activity Centre", () => {
]);
await expect(util.getTacPanel()).toMatchScreenshot("tac-panel-notification-unread.png");
});
test("should block the Spotlight to open when the TAC is opened", async ({ util, page }) => {
const toggleSpotlight = () => page.keyboard.press(`${CommandOrControl}+k`);
// Sanity check
// Open and close the spotlight
await toggleSpotlight();
await expect(page.locator(".mx_SpotlightDialog")).toBeVisible();
await toggleSpotlight();
await util.openTac();
// The spotlight should not be opened
await toggleSpotlight();
await expect(page.locator(".mx_SpotlightDialog")).not.toBeVisible();
});
});

4
res/css/structures/_ThreadsActivityCentre.pcss
View file

@ -16,6 +16,10 @@
* /
*/
.mx_ThreadsActivityCentre_container {
display: flex;
}
.mx_ThreadsActivityCentreButton {
border-radius: 8px;
margin: 18px auto auto auto;

17
src/components/views/spaces/threads-activity-centre/ThreadsActivityCentre.tsx
View file

@ -32,6 +32,8 @@ import { useUnreadThreadRooms } from "./useUnreadThreadRooms";
import { StatelessNotificationBadge } from "../../rooms/NotificationBadge/StatelessNotificationBadge";
import { NotificationLevel } from "../../../../stores/notifications/NotificationLevel";
import PosthogTrackers from "../../../../PosthogTrackers";
import { getKeyBindingsManager } from "../../../../KeyBindingsManager";
import { KeyBindingAction } from "../../../../accessibility/KeyboardShortcuts";
interface ThreadsActivityCentreProps {
/**
@ -49,6 +51,20 @@ export function ThreadsActivityCentre({ displayButtonLabel }: ThreadsActivityCen
const roomsAndNotifications = useUnreadThreadRooms(open);
return (
<div
className="mx_ThreadsActivityCentre_container"
onKeyDown={(evt) => {
// Do nothing if the TAC is closed
if (!open) return;
const action = getKeyBindingsManager().getNavigationAction(evt);
// Block spotlight opening
if (action === KeyBindingAction.FilterRooms) {
evt.stopPropagation();
}
}}
>
<Menu
align="end"
open={open}
@ -84,6 +100,7 @@ export function ThreadsActivityCentre({ displayButtonLabel }: ThreadsActivityCen
)}
</div>
</Menu>
</div>
);
}

27
test/components/views/spaces/ThreadsActivityCentre-test.tsx
View file

@ -180,4 +180,31 @@ describe("ThreadsActivityCentre", () => {
expect(screen.getByRole("menu")).toMatchSnapshot();
});
it("should block Ctrl/CMD + k shortcut", async () => {
cli.getVisibleRooms = jest.fn().mockReturnValue([roomWithHighlight]);
const keyDownHandler = jest.fn();
render(
<div
onKeyDown={(evt) => {
keyDownHandler(evt.key, evt.ctrlKey);
}}
>
<MatrixClientContext.Provider value={cli}>
<ThreadsActivityCentre />
</MatrixClientContext.Provider>
</div>,
{ wrapper: TooltipProvider },
);
await userEvent.click(getTACButton());
// CTRL/CMD + k should be blocked
await userEvent.keyboard("{Control>}k{/Control}");
expect(keyDownHandler).not.toHaveBeenCalledWith("k", true);
// Sanity test
await userEvent.keyboard("{Control>}a{/Control}");
expect(keyDownHandler).toHaveBeenCalledWith("a", true);
});
});