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 <[email protected]>
element-hq · Aug 28, 2024 · 0db51d9 · 0db51d9
1 parent 7bca541
commit 0db51d9
Show file tree

Hide file tree

Showing 62 changed files with 678 additions and 2,613 deletions.
diff --git a/package.json b/package.json
@@ -37,29 +37,7 @@
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-visually-hidden": "^1.0.3",
-    "@react-aria/button": "^3.3.4",
-    "@react-aria/focus": "^3.5.0",
-    "@react-aria/interactions": "^3.9.1",
-    "@react-aria/listbox": "^3.5.1",
-    "@react-aria/menu": "^3.3.0",
-    "@react-aria/overlays": "^3.7.3",
-    "@react-aria/select": "^3.6.0",
-    "@react-aria/tabs": "^3.1.0",
-    "@react-aria/tooltip": "^3.1.3",
-    "@react-aria/utils": "^3.10.0",
     "@react-spring/web": "^9.4.4",
-    "@react-stately/collections": "^3.3.4",
-    "@react-stately/list": "^3.5.1",
-    "@react-stately/menu": "^3.3.1",
-    "@react-stately/select": "^3.1.3",
-    "@react-stately/tabs": "^3.1.1",
-    "@react-stately/tooltip": "^3.0.5",
-    "@react-stately/tree": "^3.2.0",
-    "@react-types/dialog": "^3.5.5",
-    "@react-types/menu": "^3.6.1",
-    "@react-types/overlays": "^3.6.1",
-    "@react-types/shared": "^3.13.1",
-    "@react-types/tabs": "^3.1.1",
     "@sentry/react": "^8.0.0",
     "@sentry/vite-plugin": "^2.0.0",
     "@testing-library/dom": "^10.1.0",

diff --git a/public/locales/en-GB/app.json b/public/locales/en-GB/app.json
@@ -4,16 +4,17 @@
   },
   "action": {
     "close": "Close",
-    "copy": "Copy",
     "copy_link": "Copy link",
+    "edit": "Edit",
     "go": "Go",
     "invite": "Invite",
     "no": "No",
     "register": "Register",
     "remove": "Remove",
     "sign_in": "Sign in",
     "sign_out": "Sign out",
-    "submit": "Submit"
+    "submit": "Submit",
+    "upload_file": "Upload file"
   },
   "analytics_notice": "By participating in this beta, you consent to the collection of anonymous data, which we use to improve the product. You can find more information about which data we track in our <2>Privacy Policy</2> and our <5>Cookie Policy</5>.",
   "app_selection_modal": {
@@ -43,7 +44,6 @@
     "avatar": "Avatar",
     "back": "Back",
     "camera": "Camera",
-    "copied": "Copied!",
     "display_name": "Display name",
     "encrypted": "Encrypted",
     "error": "Error",
@@ -130,7 +130,6 @@
   "room_auth_view_eula_caption": "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>",
   "room_auth_view_join_button": "Join call now",
   "screenshare_button_label": "Share screen",
-  "select_input_unset_button": "Select an option",
   "settings": {
     "developer_settings_label": "Developer Settings",
     "developer_settings_label_description": "Expose developer settings in the settings window.",

diff --git a/renovate.json b/renovate.json
@@ -44,29 +44,5 @@
       "prHeader": "Please review modals on mobile for visual regressions."
     }
   ],
-  "semanticCommits": "disabled",
-  "ignoreDeps": [
-    "@react-aria/button",
-    "@react-aria/focus",
-    "@react-aria/interactions",
-    "@react-aria/listbox",
-    "@react-aria/menu",
-    "@react-aria/overlays",
-    "@react-aria/select",
-    "@react-aria/tabs",
-    "@react-aria/tooltip",
-    "@react-aria/utils",
-    "@react-stately/collections",
-    "@react-stately/list",
-    "@react-stately/menu",
-    "@react-stately/select",
-    "@react-stately/tabs",
-    "@react-stately/tooltip",
-    "@react-stately/tree",
-    "@react-types/dialog",
-    "@react-types/menu",
-    "@react-types/overlays",
-    "@react-types/shared",
-    "@react-types/tabs"
-  ]
+  "semanticCommits": "disabled"
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -22,7 +22,6 @@ import {
   useLocation,
 } from "react-router-dom";
 import * as Sentry from "@sentry/react";
-import { OverlayProvider } from "@react-aria/overlays";
 import { History } from "history";
 import { TooltipProvider } from "@vector-im/compound-web";
 
@@ -92,23 +91,21 @@ export const App: FC<AppProps> = ({ history }) => {
                 <ClientProvider>
                   <MediaDevicesProvider>
                     <Sentry.ErrorBoundary fallback={errorPage}>
-                      <OverlayProvider>
-                        <DisconnectedBanner />
-                        <Switch>
-                          <SentryRoute exact path="/">
-                            <HomePage />
-                          </SentryRoute>
-                          <SentryRoute exact path="/login">
-                            <LoginPage />
-                          </SentryRoute>
-                          <SentryRoute exact path="/register">
-                            <RegisterPage />
-                          </SentryRoute>
-                          <SentryRoute path="*">
-                            <RoomPage />
-                          </SentryRoute>
-                        </Switch>
-                      </OverlayProvider>
+                      <DisconnectedBanner />
+                      <Switch>
+                        <SentryRoute exact path="/">
+                          <HomePage />
+                        </SentryRoute>
+                        <SentryRoute exact path="/login">
+                          <LoginPage />
+                        </SentryRoute>
+                        <SentryRoute exact path="/register">
+                          <RegisterPage />
+                        </SentryRoute>
+                        <SentryRoute path="*">
+                          <RoomPage />
+                        </SentryRoute>
+                      </Switch>
                     </Sentry.ErrorBoundary>
                   </MediaDevicesProvider>
                 </ClientProvider>

diff --git a/src/Banner.module.css b/src/Banner.module.css
diff --git a/src/FullScreenView.tsx b/src/FullScreenView.tsx
@@ -20,9 +20,10 @@ import classNames from "classnames";
 import { Trans, useTranslation } from "react-i18next";
 import * as Sentry from "@sentry/react";
 import { logger } from "matrix-js-sdk/src/logger";
+import { Button } from "@vector-im/compound-web";
 
 import { Header, HeaderLogo, LeftNav, RightNav } from "./Header";
-import { LinkButton, Button } from "./button";
+import { LinkButton } from "./button";
 import styles from "./FullScreenView.module.css";
 import { TranslatedError } from "./TranslatedError";
 import { Config } from "./config/Config";
@@ -81,21 +82,11 @@ export const ErrorView: FC<ErrorViewProps> = ({ error }) => {
       <RageshakeButton description={`***Error View***: ${error.message}`} />
       {!confineToRoom &&
         (location.pathname === "/" ? (
-          <Button
-            size="lg"
-            variant="default"
-            className={styles.homeLink}
-            onPress={onReload}
-          >
+          <Button className={styles.homeLink} onClick={onReload}>
             {t("return_home_button")}
           </Button>
         ) : (
-          <LinkButton
-            size="lg"
-            variant="default"
-            className={styles.homeLink}
-            to="/"
-          >
+          <LinkButton className={styles.homeLink} to="/">
             {t("return_home_button")}
           </LinkButton>
         ))}
@@ -122,12 +113,7 @@ export const CrashView: FC = () => {
       )}
 
       <RageshakeButton description="***Soft Crash***" />
-      <Button
-        size="lg"
-        variant="default"
-        className={styles.wideButton}
-        onPress={onReload}
-      >
+      <Button className={styles.wideButton} onClick={onReload}>
         {t("return_home_button")}
       </Button>
     </FullScreenView>

diff --git a/src/ListBox.module.css b/src/ListBox.module.css
diff --git a/src/ListBox.tsx b/src/ListBox.tsx