Convert VisuallyHidden from reakit to radix-ui (#9305)

* Convert VisuallyHidden from reakit to radix-ui

- Replace reakit VisuallyHidden imports with @radix-ui/react-visually-hidden
- Update all usage from <VisuallyHidden> to <VisuallyHidden.Root>
- Affects 6 files: Input.tsx, InputSelect.tsx, SuggestionsMenu.tsx, CollectionMenu.tsx, DocumentMenu.tsx, CommentForm.tsx

* lint

---------

Co-authored-by: codegen-sh[bot] <131295404+codegen-sh[bot]@users.noreply.github.com>
Co-authored-by: Tom Moor <tom@getoutline.com>

app/components/Input.tsx

@@ -1,6 +1,6 @@
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import * as React from "react";
 import { mergeRefs } from "react-merge-refs";
-import { VisuallyHidden } from "reakit/VisuallyHidden";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { s, ellipsis } from "@shared/styles";
@@ -221,7 +221,7 @@ function Input(
       <label>
         {label &&
           (labelHidden ? (
-            <VisuallyHidden>{wrappedLabel}</VisuallyHidden>
+            <VisuallyHidden.Root>{wrappedLabel}</VisuallyHidden.Root>
           ) : (
             wrappedLabel
           ))}

app/components/InputSelect.tsx

@@ -1,3 +1,4 @@
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import {
   Select,
   SelectOption,
@@ -7,7 +8,6 @@ import {
 } from "@renderlesskit/react";
 import { CheckmarkIcon } from "outline-icons";
 import * as React from "react";
-import { VisuallyHidden } from "reakit/VisuallyHidden";
 import styled, { css } from "styled-components";
 import { s } from "@shared/styles";
 import Button, { Props as ButtonProps, Inner } from "~/components/Button";
@@ -213,7 +213,7 @@ const InputSelect = (props: Props, ref: React.RefObject<InputSelectRef>) => {
       <Wrapper short={short}>
         {label &&
           (labelHidden ? (
-            <VisuallyHidden>{wrappedLabel}</VisuallyHidden>
+            <VisuallyHidden.Root>{wrappedLabel}</VisuallyHidden.Root>
           ) : (
             wrappedLabel
           ))}

app/editor/components/SuggestionsMenu.tsx

@@ -1,9 +1,9 @@
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import commandScore from "command-score";
 import capitalize from "lodash/capitalize";
 import orderBy from "lodash/orderBy";
 import * as React from "react";
 import { Trans, useTranslation } from "react-i18next";
-import { VisuallyHidden } from "reakit/VisuallyHidden";
 import { toast } from "sonner";
 import styled from "styled-components";
 import insertFiles from "@shared/editor/commands/insertFiles";
@@ -672,7 +672,7 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
               </List>
             )}
             {uploadFile && (
-              <VisuallyHidden>
+              <VisuallyHidden.Root>
                 <label>
                   <Trans>Import document</Trans>
                   <input
@@ -682,7 +682,7 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
                     multiple
                   />
                 </label>
-              </VisuallyHidden>
+              </VisuallyHidden.Root>
             )}
           </>
         )}

app/menus/CollectionMenu.tsx

@@ -1,3 +1,4 @@
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import { observer } from "mobx-react";
 import {
   NewDocumentIcon,
@@ -12,7 +13,6 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 import { MenuButton, MenuButtonHTMLProps } from "reakit/Menu";
-import { VisuallyHidden } from "reakit/VisuallyHidden";
 import { toast } from "sonner";
 import { SubscriptionType } from "@shared/types";
 import { getEventFiles } from "@shared/utils/files";
@@ -282,7 +282,7 @@ function CollectionMenu({
 
   return (
     <>
-      <VisuallyHidden>
+      <VisuallyHidden.Root>
         <label>
           {t("Import document")}
           <input
@@ -294,7 +294,7 @@ function CollectionMenu({
             tabIndex={-1}
           />
         </label>
-      </VisuallyHidden>
+      </VisuallyHidden.Root>
       {label ? (
         <MenuButton {...menu} onPointerEnter={handlePointerEnter}>
           {label}

app/menus/DocumentMenu.tsx

@@ -1,3 +1,4 @@
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import capitalize from "lodash/capitalize";
 import isEmpty from "lodash/isEmpty";
 import noop from "lodash/noop";
@@ -13,7 +14,6 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 import { MenuButton, MenuButtonHTMLProps } from "reakit/Menu";
-import { VisuallyHidden } from "reakit/VisuallyHidden";
 import { toast } from "sonner";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
@@ -469,7 +469,7 @@ function DocumentMenu({
 
   return (
     <>
-      <VisuallyHidden>
+      <VisuallyHidden.Root>
         <label>
           {t("Import document")}
           <input
@@ -481,7 +481,7 @@ function DocumentMenu({
             tabIndex={-1}
           />
         </label>
-      </VisuallyHidden>
+      </VisuallyHidden.Root>
       <MenuContext.Provider value={{ model: document, menuState }}>
         <MenuTrigger label={label} onTrigger={showMenu} />
         {isMenuVisible ? (

app/scenes/Document/components/CommentForm.tsx

@@ -1,10 +1,10 @@
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import { m } from "framer-motion";
 import { action } from "mobx";
 import { observer } from "mobx-react";
 import { ImageIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { VisuallyHidden } from "reakit";
 import { toast } from "sonner";
 import { useTheme } from "styled-components";
 import { v4 as uuidv4 } from "uuid";
@@ -266,7 +266,7 @@ function CommentForm({
       {...presence}
       {...rest}
     >
-      <VisuallyHidden>
+      <VisuallyHidden.Root>
         <input
           ref={file}
           type="file"
@@ -274,7 +274,7 @@ function CommentForm({
           accept={AttachmentValidation.imageContentTypes.join(", ")}
           tabIndex={-1}
         />
-      </VisuallyHidden>
+      </VisuallyHidden.Root>
       <Flex gap={8} align="flex-start" reverse={dir === "rtl"}>
         <Avatar model={user} size={24} style={{ marginTop: 8 }} />
         <Bubble