fix: Various aria and React warnings

app/components/Sidebar/components/CollectionLink.js

@@ -177,8 +177,6 @@ function CollectionLink({
               icon={
                 <CollectionIcon collection={collection} expanded={expanded} />
               }
-              iconColor={collection.color}
-              expanded={expanded}
               showActions={menuOpen || expanded}
               isActiveDrop={isOver && canDrop}
               label={

app/components/Sidebar/components/DropToImport.js

@@ -14,7 +14,6 @@ type Props = {|
   collectionId: string,
   documentId?: string,
   disabled: boolean,
-  staticContext: Object,
 |};
 
 function DropToImport({ disabled, children, collectionId, documentId }: Props) {
@@ -56,7 +55,7 @@ function DropToImport({ disabled, children, collectionId, documentId }: Props) {
       }) => (
         <DropzoneContainer
           {...getRootProps()}
-          {...{ isDragActive }}
+          $isDragActive={isDragActive}
           tabIndex="-1"
         >
           <input {...getInputProps()} />
@@ -71,8 +70,8 @@ function DropToImport({ disabled, children, collectionId, documentId }: Props) {
 const DropzoneContainer = styled.div`
   border-radius: 4px;
 
-  ${({ isDragActive, theme }) =>
-    isDragActive &&
+  ${({ $isDragActive, theme }) =>
+    $isDragActive &&
     css`
       background: ${theme.slateDark};
       a {

app/components/Sidebar/components/SidebarLink.js

@@ -1,12 +1,10 @@
 // @flow
 import { transparentize } from "polished";
 import * as React from "react";
-import { withRouter, type RouterHistory, type Match } from "react-router-dom";
-import styled, { withTheme } from "styled-components";
+import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import EventBoundary from "components/EventBoundary";
 import NavLink from "./NavLink";
-import { type Theme } from "types";
 
 type Props = {|
   to?: string | Object,
@@ -20,12 +18,8 @@ type Props = {|
   label?: React.Node,
   menu?: React.Node,
   showActions?: boolean,
-  iconColor?: string,
   active?: boolean,
   isActiveDrop?: boolean,
-  history: RouterHistory,
-  match: Match,
-  theme: Theme,
   exact?: boolean,
   depth?: number,
   scrollIntoViewIfNeeded?: boolean,
@@ -47,18 +41,16 @@ function SidebarLink(
     isActiveDrop,
     menu,
     showActions,
-    theme,
     exact,
     href,
     depth,
-    history,
-    match,
     className,
     scrollIntoViewIfNeeded,
     ...rest
   }: Props,
   ref
 ) {
+  const theme = useTheme();
   const style = React.useMemo(
     () => ({
       paddingLeft: `${(depth || 0) * 16 + 12}px`,
@@ -191,4 +183,4 @@ const Label = styled.div`
   }
 `;
 
-export default withRouter(withTheme(React.forwardRef(SidebarLink)));
+export default React.forwardRef<Props, HTMLAnchorElement>(SidebarLink);

app/components/Sidebar/components/Toggle.js

@@ -1,5 +1,6 @@
 // @flow
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import Arrow from "components/Arrow";
@@ -12,9 +13,16 @@ type Props = {
 
 const Toggle = React.forwardRef<Props, HTMLButtonElement>(
   ({ direction = "left", onClick, style }: Props, ref) => {
+    const { t } = useTranslation();
+
     return (
       <Positioner style={style}>
-        <ToggleButton ref={ref} $direction={direction} onClick={onClick}>
+        <ToggleButton
+          ref={ref}
+          $direction={direction}
+          onClick={onClick}
+          aria-label={t("Toggle sidebar")}
+        >
           <Arrow />
         </ToggleButton>
       </Positioner>