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>
2024-08-28 08:44:39 -04:00
parent 7bca541cb6
commit 0db51d9dfd
62 changed files with 668 additions and 2603 deletions
--- a/src/room/CallEndedView.module.css
+++ b/src/room/CallEndedView.module.css
@@ -42,9 +42,8 @@ limitations under the License.
 }

 .callEndedButton {
+  margin: auto;
  margin-top: 54px;
-  margin-left: 30px;
-  margin-right: 30px !important;
 }

 .submitButton {
--- a/src/room/CallEndedView.tsx
+++ b/src/room/CallEndedView.tsx
@@ -18,17 +18,19 @@ import { FC, FormEventHandler, ReactNode, useCallback, useState } from "react";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { Trans, useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
+import { Button } from "@vector-im/compound-web";

 import styles from "./CallEndedView.module.css";
 import feedbackStyle from "../input/FeedbackInput.module.css";
-import { Button, LinkButton } from "../button";
 import { useProfile } from "../profile/useProfile";
-import { Body, Link, Headline } from "../typography/Typography";
+import { Body, Headline } from "../typography/Typography";
 import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
 import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { FieldRow, InputField } from "../input/Input";
 import { StarRatingInput } from "../input/StarRatingInput";
 import { RageshakeButton } from "../settings/RageshakeButton";
+import { Link } from "../button/Link";
+import { LinkButton } from "../button";

 interface Props {
  client: MatrixClient;
@@ -95,12 +97,7 @@ export const CallEndedView: FC<Props> = ({
          calls
        </p>
      </Trans>
-      <LinkButton
-        className={styles.callEndedButton}
-        size="lg"
-        variant="default"
-        to="/register"
-      >
+      <LinkButton className={styles.callEndedButton} to="/register">
        {t("call_ended_view.create_account_button")}
      </LinkButton>
    </div>
@@ -136,8 +133,6 @@ export const CallEndedView: FC<Props> = ({
            <Button
              type="submit"
              className={styles.submitButton}
-              size="lg"
-              variant="default"
              data-testid="home_go"
            >
              {submitting ? t("submitting") : t("action.submit")}
@@ -159,7 +154,7 @@ export const CallEndedView: FC<Props> = ({
              </Trans>
            </Headline>
            <div className={styles.disconnectedButtons}>
-              <Button size="lg" variant="default" onClick={reconnect}>
+              <Button onClick={reconnect}>
                {t("call_ended_view.reconnect_button")}
              </Button>
              <div className={styles.rageshakeButton}>
@@ -169,9 +164,7 @@ export const CallEndedView: FC<Props> = ({
          </main>
          {!confineToRoom && (
            <Body className={styles.footer}>
-              <Link color="primary" to="/">
-                {t("return_home_button")}
-              </Link>
+              <Link to="/"> {t("return_home_button")} </Link>
            </Body>
          )}
        </>
@@ -198,9 +191,7 @@ export const CallEndedView: FC<Props> = ({
          </main>
          {!confineToRoom && (
            <Body className={styles.footer}>
-              <Link color="primary" to="/">
-                {t("call_ended_view.not_now_button")}
-              </Link>
+              <Link to="/"> {t("call_ended_view.not_now_button")} </Link>
            </Body>
          )}
        </>
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -19,7 +19,6 @@ import {
  RoomContext,
  useLocalParticipant,
 } from "@livekit/components-react";
-import { usePreventScroll } from "@react-aria/overlays";
 import { ConnectionState, Room } from "livekit-client";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import {
@@ -44,10 +43,10 @@ import LogoMark from "../icons/LogoMark.svg?react";
 import LogoType from "../icons/LogoType.svg?react";
 import type { IWidgetApiRequest } from "matrix-widget-api";
 import {
-  HangupButton,
+  EndCallButton,
  MicButton,
  VideoButton,
-  ScreenshareButton,
+  ShareScreenButton,
  SettingsButton,
 } from "../button";
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
@@ -175,7 +174,6 @@ export const InCallView: FC<InCallViewProps> = ({
  connState,
  onShareClick,
 }) => {
-  usePreventScroll();
  useWakeLock();

  useEffect(() => {
@@ -492,14 +490,14 @@ export const InCallView: FC<InCallViewProps> = ({
      <MicButton
        key="1"
        muted={!muteStates.audio.enabled}
-        onPress={toggleMicrophone}
+        onClick={toggleMicrophone}
        disabled={muteStates.audio.setEnabled === null}
        data-testid="incall_mute"
      />,
      <VideoButton
        key="2"
        muted={!muteStates.video.enabled}
-        onPress={toggleCamera}
+        onClick={toggleCamera}
        disabled={muteStates.video.setEnabled === null}
        data-testid="incall_videomute"
      />,
@@ -507,21 +505,21 @@ export const InCallView: FC<InCallViewProps> = ({
    if (!reducedControls) {
      if (canScreenshare && !hideScreensharing) {
        buttons.push(
-          <ScreenshareButton
+          <ShareScreenButton
            key="3"
            enabled={isScreenShareEnabled}
-            onPress={toggleScreensharing}
+            onClick={toggleScreensharing}
            data-testid="incall_screenshare"
          />,
        );
      }
-      buttons.push(<SettingsButton key="4" onPress={openSettings} />);
+      buttons.push(<SettingsButton key="4" onClick={openSettings} />);
    }

    buttons.push(
-      <HangupButton
+      <EndCallButton
        key="6"
-        onPress={function (): void {
+        onClick={function (): void {
          onLeave();
        }}
        data-testid="incall_leave"
--- a/src/room/LayoutToggle.module.css
+++ b/src/room/LayoutToggle.module.css
@@ -32,9 +32,9 @@ limitations under the License.
  inline-size: var(--cpd-space-11x);
  cursor: pointer;
  border-radius: var(--cpd-radius-pill-effect);
-  color: var(--cpd-color-icon-primary);
  background: var(--cpd-color-bg-action-secondary-rest);
  box-shadow: var(--small-drop-shadow);
+  transition: background-color 0.1s;
 }

 .toggle svg {
@@ -43,6 +43,7 @@ limitations under the License.
  padding: calc(2.5 * var(--cpd-space-1x));
  pointer-events: none;
  color: var(--cpd-color-icon-primary);
+  transition: color 0.1s;
 }

 .toggle svg:nth-child(2) {
@@ -61,7 +62,7 @@ limitations under the License.
 }

 .toggle input:active {
-  background: var(--cpd-color-bg-action-secondary-hovered);
+  background: var(--cpd-color-bg-action-secondary-pressed);
  box-shadow: none;
 }

@@ -80,7 +81,7 @@ limitations under the License.
 }

 .toggle input:checked:active {
-  background: var(--cpd-color-bg-action-primary-hovered);
+  background: var(--cpd-color-bg-action-primary-pressed);
 }

 .toggle input:first-child {
--- a/src/room/LobbyView.tsx
+++ b/src/room/LobbyView.tsx
@@ -17,7 +17,7 @@ limitations under the License.
 import { FC, useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";
-import { Button, Link } from "@vector-im/compound-web";
+import { Button } from "@vector-im/compound-web";
 import classNames from "classnames";
 import { useHistory } from "react-router-dom";

@@ -29,7 +29,7 @@ import { MatrixInfo, VideoPreview } from "./VideoPreview";
 import { MuteStates } from "./MuteStates";
 import { InviteButton } from "../button/InviteButton";
 import {
-  HangupButton,
+  EndCallButton,
  MicButton,
  SettingsButton,
  VideoButton,
@@ -37,6 +37,7 @@ import {
 import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
 import { useMediaQuery } from "../useMediaQuery";
 import { E2eeType } from "../e2ee/e2eeType";
+import { Link } from "../button/Link";

 interface Props {
  client: MatrixClient;
@@ -92,7 +93,7 @@ export const LobbyView: FC<Props> = ({

  const recentsButtonInFooter = useMediaQuery("(max-height: 500px)");
  const recentsButton = !confineToRoom && (
-    <Link className={styles.recents} href="#" onClick={onLeaveClick}>
+    <Link className={styles.recents} to="/">
      {t("lobby.leave_button")}
    </Link>
  );
@@ -140,16 +141,16 @@ export const LobbyView: FC<Props> = ({
          <div className={inCallStyles.buttons}>
            <MicButton
              muted={!muteStates.audio.enabled}
-              onPress={onAudioPress}
+              onClick={onAudioPress}
              disabled={muteStates.audio.setEnabled === null}
            />
            <VideoButton
              muted={!muteStates.video.enabled}
-              onPress={onVideoPress}
+              onClick={onVideoPress}
              disabled={muteStates.video.setEnabled === null}
            />
-            <SettingsButton onPress={openSettings} />
-            {!confineToRoom && <HangupButton onPress={onLeaveClick} />}
+            <SettingsButton onClick={openSettings} />
+            {!confineToRoom && <EndCallButton onClick={onLeaveClick} />}
          </div>
        </div>
      </div>
--- a/src/room/RageshakeRequestModal.tsx
+++ b/src/room/RageshakeRequestModal.tsx
@@ -16,9 +16,9 @@ limitations under the License.

 import { FC, useEffect } from "react";
 import { useTranslation } from "react-i18next";
+import { Button } from "@vector-im/compound-web";

 import { Modal, Props as ModalProps } from "../Modal";
-import { Button } from "../button";
 import { FieldRow, ErrorMessage } from "../input/Input";
 import { useSubmitRageshake } from "../settings/submit-rageshake";
 import { Body } from "../typography/Typography";
@@ -52,7 +52,7 @@ export const RageshakeRequestModal: FC<Props> = ({
      <Body>{t("rageshake_request_modal.body")}</Body>
      <FieldRow>
        <Button
-          onPress={(): void =>
+          onClick={(): void =>
            void submitRageshake({
              sendLogs: true,
              rageshakeRequestId,
--- a/src/room/RoomAuthView.tsx
+++ b/src/room/RoomAuthView.tsx
@@ -18,9 +18,9 @@ import { FC, useCallback, useState } from "react";
 import { useLocation } from "react-router-dom";
 import { Trans, useTranslation } from "react-i18next";
 import { logger } from "matrix-js-sdk/src/logger";
+import { Button } from "@vector-im/compound-web";

 import styles from "./RoomAuthView.module.css";
-import { Button } from "../button";
 import { Body, Caption, Link, Headline } from "../typography/Typography";
 import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
 import { FieldRow, InputField, ErrorMessage } from "../input/Input";