Focus the thread panel when clicking on an item in the TAC (#12410)

* Focus the thread panel when clicking on an item in the TAC

actually the 'close' button in the threads panel as it's the only
interactive element: we can improve this later when we use landmarks
& generally have better a11y.

* Undo minor refactoring

as none of it is test3ed, it's not worth it.

* add unit test

* Add matrixchat tests

* Needs awaits

* ts-ignore

* Fix test (I think...)

* Remove unnecessary value set

* Not how assignments work

src/components/views/right_panel/BaseCard.tsx

@@ -35,6 +35,8 @@ interface IProps {
     onKeyDown?(ev: KeyboardEvent): void;
     cardState?: any;
     ref?: Ref<HTMLDivElement>;
+    // Ref for the 'close' button the the card
+    closeButtonRef?: Ref<HTMLDivElement>;
     children: ReactNode;
 }
 
@@ -54,7 +56,21 @@ export const Group: React.FC<IGroupProps> = ({ className, title, children }) =>
 };
 
 const BaseCard: React.FC<IProps> = forwardRef<HTMLDivElement, IProps>(
-    ({ closeLabel, onClose, onBack, className, header, footer, withoutScrollContainer, children, onKeyDown }, ref) => {
+    (
+        {
+            closeLabel,
+            onClose,
+            onBack,
+            className,
+            header,
+            footer,
+            withoutScrollContainer,
+            children,
+            onKeyDown,
+            closeButtonRef,
+        },
+        ref,
+    ) => {
         let backButton;
         const cardHistory = RightPanelStore.instance.roomPhaseHistory;
         if (cardHistory.length > 1) {
@@ -75,6 +91,7 @@ const BaseCard: React.FC<IProps> = forwardRef<HTMLDivElement, IProps>(
                     className="mx_BaseCard_close"
                     onClick={onClose}
                     title={closeLabel || _t("action|close")}
+                    ref={closeButtonRef}
                 />
             );
         }