Replace remaining React ARIA components with Compound components (#2576)

* Fix issues detected by Knip

Including cleaning up some unused code and dependencies, using a React hook that we unintentionally stopped using, and also adding some previously undeclared dependencies.

* Replace remaining React ARIA components with Compound components

* fix button position

* disable scrollbars to resolve overlapping button

---------

Co-authored-by: Timo <toger5@hotmail.de>

src/home/CallList.module.css

@@ -42,8 +42,7 @@ limitations under the License.
   align-items: center;
 }
 
-.avatar,
-.copyButtonSpacer {
+.avatar {
   flex-shrink: 0;
 }
 
@@ -64,18 +63,6 @@ limitations under the License.
   margin-top: 8px;
 }
 
-.copyButtonSpacer,
-.copyButton {
-  width: 16px;
-  height: 16px;
-}
-
-.copyButton {
-  position: absolute;
-  top: 12px;
-  right: 12px;
-}
-
 .callList {
   display: flex;
   flex-wrap: wrap;

src/home/CallList.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2022-2024 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -20,10 +20,9 @@ import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { FC } from "react";
 
-import { CopyButton } from "../button";
 import { Avatar, Size } from "../Avatar";
 import styles from "./CallList.module.css";
-import { getAbsoluteRoomUrl, getRelativeRoomUrl } from "../utils/matrix";
+import { getRelativeRoomUrl } from "../utils/matrix";
 import { Body } from "../typography/Typography";
 import { GroupCallRoom } from "./useGroupCallRooms";
 import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
@@ -81,12 +80,6 @@ const CallTile: FC<CallTileProps> = ({ name, avatarUrl, room }) => {
         </div>
         <div className={styles.copyButtonSpacer} />
       </Link>
-      <CopyButton
-        className={styles.copyButton}
-        variant="icon"
-        // Todo add the viaServers to the created link
-        value={getAbsoluteRoomUrl(room.roomId, roomEncryptionSystem, room.name)}
-      />
     </div>
   );
 };

src/home/JoinExistingCallModal.tsx

@@ -14,19 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { PressEvent } from "@react-types/shared";
 import { useTranslation } from "react-i18next";
-import { FC } from "react";
+import { FC, MouseEvent } from "react";
+import { Button } from "@vector-im/compound-web";
 
 import { Modal } from "../Modal";
-import { Button } from "../button";
 import { FieldRow } from "../input/Input";
 import styles from "./JoinExistingCallModal.module.css";
 
 interface Props {
   open: boolean;
   onDismiss: () => void;
-  onJoin: (e: PressEvent) => void;
+  onJoin: (e: MouseEvent) => void;
 }
 
 export const JoinExistingCallModal: FC<Props> = ({
@@ -44,8 +43,8 @@ export const JoinExistingCallModal: FC<Props> = ({
     >
       <p>{t("join_existing_call_modal.text")}</p>
       <FieldRow rightAlign className={styles.buttons}>
-        <Button onPress={onDismiss}>{t("action.no")}</Button>
-        <Button onPress={onJoin} data-testid="home_joinExistingRoom">
+        <Button onClick={onDismiss}>{t("action.no")}</Button>
+        <Button onClick={onJoin} data-testid="home_joinExistingRoom">
           {t("join_existing_call_modal.join_button")}
         </Button>
       </FieldRow>

src/home/RegisteredView.tsx

@@ -20,6 +20,7 @@ import { MatrixClient } from "matrix-js-sdk/src/client";
 import { useTranslation } from "react-i18next";
 import { Heading } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/src/logger";
+import { Button } from "@vector-im/compound-web";
 
 import {
   createRoom,
@@ -32,7 +33,6 @@ import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
 import commonStyles from "./common.module.css";
 import styles from "./RegisteredView.module.css";
 import { FieldRow, InputField, ErrorMessage } from "../input/Input";
-import { Button } from "../button";
 import { CallList } from "./CallList";
 import { UserMenuContainer } from "../UserMenuContainer";
 import { JoinExistingCallModal } from "./JoinExistingCallModal";

src/home/UnauthenticatedView.tsx

@@ -18,14 +18,13 @@ import { FC, useCallback, useState, FormEventHandler } from "react";
 import { useHistory } from "react-router-dom";
 import { randomString } from "matrix-js-sdk/src/randomstring";
 import { Trans, useTranslation } from "react-i18next";
-import { Heading } from "@vector-im/compound-web";
+import { Button, Heading } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { useClient } from "../ClientContext";
 import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
 import { UserMenuContainer } from "../UserMenuContainer";
 import { FieldRow, InputField, ErrorMessage } from "../input/Input";
-import { Button } from "../button";
 import {
   createRoom,
   getRelativeRoomUrl,