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/button/LinkButton.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 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.
@@ -14,45 +14,24 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { FC, HTMLAttributes } from "react";
-import { Link } from "react-router-dom";
-import classNames from "classnames";
-import * as H from "history";
+import { ComponentPropsWithoutRef, forwardRef } from "react";
+import { Button } from "@vector-im/compound-web";
+import { LocationDescriptor } from "history";
 
-import {
-  variantToClassName,
-  sizeToClassName,
-  ButtonVariant,
-  ButtonSize,
-} from "./Button";
+import { useLink } from "./Link";
 
-interface Props extends HTMLAttributes<HTMLAnchorElement> {
-  children: JSX.Element | string;
-  to: H.LocationDescriptor | ((location: H.Location) => H.LocationDescriptor);
-  size?: ButtonSize;
-  variant?: ButtonVariant;
-  className?: string;
-}
+type Props = Omit<
+  ComponentPropsWithoutRef<typeof Button<"a">>,
+  "as" | "href"
+> & { to: LocationDescriptor };
 
-export const LinkButton: FC<Props> = ({
-  children,
-  to,
-  size,
-  variant,
-  className,
-  ...rest
-}) => {
-  return (
-    <Link
-      className={classNames(
-        variantToClassName[variant || "secondary"],
-        size ? sizeToClassName[size] : [],
-        className,
-      )}
-      to={to}
-      {...rest}
-    >
-      {children}
-    </Link>
-  );
-};
+/**
+ * A version of Compound's button component that acts as a link and integrates
+ * with our router setup.
+ */
+export const LinkButton = forwardRef<HTMLAnchorElement, Props>(
+  function LinkButton({ to, ...props }, ref) {
+    const [path, onClick] = useLink(to);
+    return <Button as="a" ref={ref} {...props} href={path} onClick={onClick} />;
+  },
+);