imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix TAC opening with keyboard (#12285)

Browse source 
* Fix TAC opening with keyboard

* Use compound tooltip and icon button

* Revert "Fix TAC opening with keyboard"

This reverts commit 5a1e5d0c

* Add missing aria-label

* Update tests

* Add tests

* Fix visual regression

* Fix remaining tooltip

* Fix ref typing

* Fix typing
This commit is contained in:
Florian Duros 2024-02-29 15:07:46 +01:00 • committed by GitHub
parent 5bd0afce30
commit 29b79ef351
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 65 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -16,10 +16,11 @@
* /
*/
import React from "react";
import React, { ComponentProps } from "react";
import { getByText, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { NotificationCountType, PendingEventOrdering, Room } from "matrix-js-sdk/src/matrix";
import { TooltipProvider } from "@vector-im/compound-web";
import { ThreadsActivityCentre } from "../../../../src/components/views/spaces/threads-activity-centre";
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
@ -37,12 +38,16 @@ describe("ThreadsActivityCentre", () => {
return screen.getByRole("menu");
};
const renderTAC = () => {
const getTACDescription = () => {
return screen.getByText("Threads");
};
const renderTAC = (props?: ComponentProps<typeof ThreadsActivityCentre>) => {
render(
<MatrixClientContext.Provider value={cli}>
<ThreadsActivityCentre />
);
<ThreadsActivityCentre {...props} />
</MatrixClientContext.Provider>,
{ wrapper: TooltipProvider },
);
};
@ -105,6 +110,12 @@ describe("ThreadsActivityCentre", () => {
expect(getTACButton()).toBeInTheDocument();
});
it("should render the threads activity centre button and the display label", async () => {
renderTAC({ displayButtonLabel: true });
expect(getTACButton()).toBeInTheDocument();
expect(getTACDescription()).toBeInTheDocument();
});
it("should render the threads activity centre menu when the button is clicked", async () => {
renderTAC();
await userEvent.click(getTACButton());

8
test/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
View file

@ -2,7 +2,7 @@
exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] = `
<div
aria-labelledby="radix-12"
aria-labelledby="radix-20"
aria-orientation="vertical"
class="_menu_1x5h1_17"
data-align="end"
@ -11,7 +11,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
data-side="right"
data-state="open"
dir="ltr"
id="radix-13"
id="radix-21"
role="menu"
style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
tabindex="-1"
@ -127,7 +127,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
exports[`ThreadsActivityCentre should match snapshot when empty 1`] = `
<div
aria-labelledby="radix-18"
aria-labelledby="radix-28"
aria-orientation="vertical"
class="_menu_1x5h1_17"
data-align="end"
@ -136,7 +136,7 @@ exports[`ThreadsActivityCentre should match snapshot when empty 1`] = `
data-side="right"
data-state="open"
dir="ltr"
id="radix-19"
id="radix-29"
role="menu"
style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
tabindex="-1"