Fix TAC opening with keyboard (#12285)

* 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

test/components/views/spaces/ThreadsActivityCentre-test.tsx

@@ -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());