fix: Various aria and React warnings

app/components/Avatar/Avatar.js

@@ -11,6 +11,7 @@ type Props = {|
   size: number,
   icon?: React.Node,
   user?: User,
+  alt?: string,
   onClick?: () => void,
   className?: string,
 |};

app/components/InputSelect.js

@@ -128,12 +128,7 @@ const InputSelect = (props: Props) => {
             wrappedLabel
           ))}
 
-        <Select
-          {...select}
-          disabled={disabled}
-          aria-label={ariaLabel}
-          ref={buttonRef}
-        >
+        <Select {...select} disabled={disabled} ref={buttonRef}>
           {(props) => (
             <StyledButton
               neutral
@@ -149,7 +144,7 @@ const InputSelect = (props: Props) => {
             </StyledButton>
           )}
         </Select>
-        <SelectPopover {...select} {...popOver}>
+        <SelectPopover {...select} {...popOver} aria-label={ariaLabel}>
           {(props) => {
             const topAnchor = props.style.top === "0";
             const rightAnchor = props.placement === "bottom-end";

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>

app/scenes/Settings/components/ImageUpload.js

@@ -133,8 +133,8 @@ class ImageUpload extends React.Component<Props> {
         style={EMPTY_OBJECT}
         disablePreview
       >
-        {({ getRootProps, getInputProps, isDragActive }) => (
-          <div {...getRootProps()} {...{ isDragActive }}>
+        {({ getRootProps, getInputProps }) => (
+          <div {...getRootProps()}>
             <input {...getInputProps()} />
             {this.props.children}
           </div>

app/scenes/UserProfile.js

@@ -4,7 +4,7 @@ import { observer } from "mobx-react";
 import { EditIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { withRouter, type RouterHistory } from "react-router-dom";
+import { useHistory } from "react-router-dom";
 import styled from "styled-components";
 import { settings } from "shared/utils/routeHelpers";
 import User from "models/User";
@@ -21,7 +21,6 @@ import useStores from "hooks/useStores";
 
 type Props = {|
   user: User,
-  history: RouterHistory,
   onRequestClose: () => void,
 |};
 
@@ -29,6 +28,7 @@ function UserProfile(props: Props) {
   const { t } = useTranslation();
   const { documents } = useStores();
   const currentUser = useCurrentUser();
+  const history = useHistory();
   const { user, ...rest } = props;
 
   if (!user) return null;
@@ -38,7 +38,7 @@ function UserProfile(props: Props) {
     <Modal
       title={
         <Flex align="center">
-          <Avatar src={user.avatarUrl} size={38} />
+          <Avatar src={user.avatarUrl} size={38} alt={t("Profile picture")} />
           <span>&nbsp;{user.name}</span>
         </Flex>
       }
@@ -61,7 +61,7 @@ function UserProfile(props: Props) {
           {isCurrentUser && (
             <Edit>
               <Button
-                onClick={() => props.history.push(settings())}
+                onClick={() => history.push(settings())}
                 icon={<EditIcon />}
                 neutral
               >
@@ -104,4 +104,4 @@ const Meta = styled(HelpText)`
   margin-top: -12px;
 `;
 
-export default withRouter(observer(UserProfile));
+export default observer(UserProfile);