fix: Various aria and React warnings
This commit is contained in:
parent
d443abfc57
commit
51971d2c9a
|
@ -11,6 +11,7 @@ type Props = {|
|
|||
size: number,
|
||||
icon?: React.Node,
|
||||
user?: User,
|
||||
alt?: string,
|
||||
onClick?: () => void,
|
||||
className?: string,
|
||||
|};
|
||||
|
|
|
@ -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";
|
||||
|
|
|
@ -177,8 +177,6 @@ function CollectionLink({
|
|||
icon={
|
||||
<CollectionIcon collection={collection} expanded={expanded} />
|
||||
}
|
||||
iconColor={collection.color}
|
||||
expanded={expanded}
|
||||
showActions={menuOpen || expanded}
|
||||
isActiveDrop={isOver && canDrop}
|
||||
label={
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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> {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);
|
||||
|
|
|
@ -116,7 +116,7 @@
|
|||
"mobx-react": "^6.3.1",
|
||||
"natural-sort": "^1.0.0",
|
||||
"nodemailer": "^6.4.16",
|
||||
"outline-icons": "^1.33.0",
|
||||
"outline-icons": "^1.33.1",
|
||||
"oy-vey": "^0.10.0",
|
||||
"passport": "^0.4.1",
|
||||
"passport-google-oauth2": "^0.2.0",
|
||||
|
|
|
@ -10900,10 +10900,10 @@ os-name@^3.1.0:
|
|||
macos-release "^2.2.0"
|
||||
windows-release "^3.1.0"
|
||||
|
||||
outline-icons@^1.26.1, outline-icons@^1.33.0:
|
||||
version "1.33.0"
|
||||
resolved "https://registry.yarnpkg.com/outline-icons/-/outline-icons-1.33.0.tgz#eb022b170977eb977ab531941f2976f95860a6df"
|
||||
integrity sha512-Ib2kEZ+2rlidyLJa9istA5k0GSV6731PXlKMJ2o4qzzO9h+AoxPeSmE7Rx3ZzrZDCYDMuruWcOLyNWjwu1/bLw==
|
||||
outline-icons@^1.26.1, outline-icons@^1.33.1:
|
||||
version "1.33.1"
|
||||
resolved "https://registry.yarnpkg.com/outline-icons/-/outline-icons-1.33.1.tgz#2abe0dbd8604d2740ad8a0cb1e3d5baea2a91d2e"
|
||||
integrity sha512-PRpk5cPZHhrc1o1oRwIaJTaXCtUA1Rc2L/ywLvdVmXOLoADBJT6ak7TV9/g75IFCive54oIx8JQ1tt5k0RtQPw==
|
||||
|
||||
oy-vey@^0.10.0:
|
||||
version "0.10.0"
|
||||
|
|
Reference in New Issue