filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-29 16:54:09 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(Jumpers): accessibility changes

Browse Source
This commit is contained in:
Aminejv 2022-01-02 19:09:11 +01:00
parent a21ce0baad
commit f0f177c983
8 changed files with 196 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/core/Onboarding/Upload.js
View File

@ -188,7 +188,7 @@ function ExtensionOnboarding({ isMobile }) {
<ModalPortal>
<MobileJumper.AnimatePresence>
{isMobile ? (
<MobileJumper.Root withDismissButton={false}>
<MobileJumper.Root>
<MobileJumper.Header>{header}</MobileJumper.Header>
<MobileJumper.Content style={{ padding: 0, marginTop: 28 }}>
{body}
@ -198,7 +198,7 @@ function ExtensionOnboarding({ isMobile }) {
) : null}
</MobileJumper.AnimatePresence>
{!isMobile ? (
<Jumper.Root withDismissButton={false}>
<Jumper.Root>
<Jumper.Header>{header}</Jumper.Header>
<Jumper.Item style={{ flexGrow: 1, paddingLeft: 0, paddingRight: 0, paddingBottom: 0 }}>
{body}

28
components/core/Upload/Jumper.js
View File

@ -13,9 +13,9 @@ import { css } from "@emotion/react";
import { useUploadContext } from "~/components/core/Upload/Provider";
import { useUploadStore } from "~/components/core/Upload/store";
import { useUploadOnboardingContext } from "~/components/core/Onboarding/Upload";
import { useCheckIfExtensionIsInstalled, useLocalStorage } from "~/common/hooks";
import DownloadExtensionButton from "~/components/core/Extension/DownloadExtensionButton";
import { useCheckIfExtensionIsInstalled, useLocalStorage } from "~/common/hooks";
const STYLES_EXTENSION_BAR = (theme) => css`
${Styles.HORIZONTAL_CONTAINER_CENTERED};
@ -43,13 +43,12 @@ function ExtensionBar() {
<System.P2 color="textBlack">Save from anywhere on the Web</System.P2>
<div css={Styles.HORIZONTAL_CONTAINER_CENTERED}>
<DownloadExtensionButton style={{ minHeight: 24, borderRadius: "8px" }} />
<button
css={Styles.BUTTON_RESET}
<System.ButtonPrimitive
style={{ marginLeft: 16, color: Constants.semantic.textGray }}
onClick={hideExtensionBar}
>
<SVG.Dismiss width={16} style={{ display: "block" }} />
</button>
</System.ButtonPrimitive>
</div>
</Jumper.Item>
);
@ -160,13 +159,27 @@ export function UploadJumper({ data }) {
const onboardingContext = useUploadOnboardingContext();
const { handleUpload } = useFileUpload({ data, onUpload: onboardingContext?.goToNextStep });
const handleSelectFileKeyDown = (e) => {
if (e.key === "Enter" || e.key === " ") {
e.target.click();
e.preventDefault();
}
};
return (
<Jumper.AnimatePresence>
{isUploadJumperVisible ? (
<Jumper.Root onClose={() => (onboardingContext.goToNextStep(), hideUploadJumper())}>
<Jumper.Root
role="dialog"
aria-modal="true"
aria-labelledby="upload-jumper"
onClose={() => (onboardingContext.goToNextStep(), hideUploadJumper())}
>
<Jumper.Header>
<System.H5 color="textBlack">Upload</System.H5>
<System.H5 color="textBlack" id="upload-jumper">
Upload
</System.H5>
<Jumper.Dismiss />
</Jumper.Header>
<Jumper.Divider />
<ExtensionBar />
@ -193,6 +206,8 @@ export function UploadJumper({ data }) {
<System.ButtonTertiary
type="label"
htmlFor="file"
tabindex={0}
onKeyDown={handleSelectFileKeyDown}
style={{
marginTop: 23,
maxWidth: 122,
@ -223,6 +238,7 @@ export function MobileUploadJumper({ data }) {
<MobileJumper.Root onClose={() => (onboardingContext.goToNextStep(), hideUploadJumper())}>
<MobileJumper.Header>
<System.H5 color="textBlack">Upload</System.H5>
<MobileJumper.Dismiss />
</MobileJumper.Header>
<MobileJumper.Divider color="borderGrayLight" />
<MobileJumper.Content style={{ padding: 0 }}>

6
components/system/components/FullHeightLayout.js
View File

@ -13,7 +13,7 @@ const STYLES_FULL_HEIGHT = css`
height: var(--full-height);
`;
export function FullHeightLayout({ children, css, as = "div", ...props }) {
export const FullHeightLayout = React.forwardRef(({ children, css, as = "div", ...props }, ref) => {
useIsomorphicLayoutEffect(() => {
if (typeof window === "undefined") return;
updateCssVarFullHeight();
@ -24,8 +24,8 @@ export function FullHeightLayout({ children, css, as = "div", ...props }) {
const Component = as;
return (
<Component css={[STYLES_FULL_HEIGHT, css]} {...props}>
<Component css={[STYLES_FULL_HEIGHT, css]} ref={ref} {...props}>
{children}
</Component>
);
}
});

46
components/system/components/GlobalCarousel/jumpers/EditChannels.js
View File

@ -19,7 +19,6 @@ import { useEventListener } from "~/common/hooks";
const STYLES_CHANNEL_BUTTON = (theme) => css`
position: relative;
${Styles.BUTTON_RESET};
padding: 5px 12px 7px;
border: 1px solid ${theme.semantic.borderGrayLight4};
border-radius: 12px;
@ -34,14 +33,14 @@ const STYLES_CHANNEL_BUTTON_SELECTED = (theme) => css`
function ChannelButton({ children, isSelected, css, ...props }) {
return (
<button
<System.ButtonPrimitive
{...props}
css={[STYLES_CHANNEL_BUTTON, isSelected && STYLES_CHANNEL_BUTTON_SELECTED, css]}
>
<System.P2 nbrOflines={1} as="span">
{children}
</System.P2>
</button>
</System.ButtonPrimitive>
);
}
@ -65,7 +64,7 @@ function ChannelKeyboardShortcut({ searchResults, searchQuery, onAddFileToChanne
const selectedChannel = [...publicChannels, ...privateChannels][0];
useEventListener({
type: "keyup",
type: "keydown",
handler: (e) => {
if (e.key === "Enter") {
onAddFileToChannel(selectedChannel, selectedChannel.doesContainFile);
@ -97,18 +96,26 @@ const STYLES_SEARCH_TAGS_INPUT = (theme) => css`
background-color: transparent;
${theme.semantic.textGray};
box-shadow: none;
height: 43px;
height: 52px;
padding: 0px;
::placeholder {
color: ${theme.semantic.textGray};
}
`;
const STYLES_SEARCH_TAGS_INPUT_WRAPPER = (theme) => css`
color: ${theme.semantic.textGray};
width: 100%;
margin: 1px;
`;
function ChannelInput({ value, searchResults, onChange, onAddFileToChannel, ...props }) {
const { publicChannels, privateChannels } = searchResults;
const showShortcut = publicChannels.length + privateChannels.length === 1;
return (
<div css={[STYLES_SEARCH_TAGS_INPUT_WRAPPER, Styles.CONTAINER_CENTERED]}>
<SVG.Hash width={16} />
<div style={{ position: "relative", width: "100%" }}>
<System.Input
full
@ -129,6 +136,7 @@ function ChannelInput({ value, searchResults, onChange, onAddFileToChannel, ...p
) : null}
</div>
</div>
</div>
);
}
@ -357,10 +365,6 @@ const useChannelsSearch = ({ privateChannels, publicChannels }) => {
];
};
const STYLES_EDIT_CHANNELS_HEADER = (theme) => css`
color: ${theme.semantic.textGray};
`;
export function EditChannels({ file, viewer, isOpen, onClose, ...props }) {
const [channels, { handleAddFileToChannel, handleCreateChannel }] = useChannels({
viewer,
@ -386,11 +390,7 @@ export function EditChannels({ file, viewer, isOpen, onClose, ...props }) {
<Jumper.AnimatePresence>
{isOpen ? (
<Jumper.Root onClose={() => (onClose(), clearQuery())} {...props}>
<Jumper.Header
css={[STYLES_EDIT_CHANNELS_HEADER, Styles.CONTAINER_CENTERED]}
style={{ paddingTop: 0, paddingBottom: 0 }}
>
<SVG.Hash width={16} />
<Jumper.Header style={{ paddingTop: 0, paddingBottom: 0 }}>
<ChannelInput
value={searchQuery}
onChange={handleQueryChange}
@ -398,6 +398,7 @@ export function EditChannels({ file, viewer, isOpen, onClose, ...props }) {
autoFocus
onAddFileToChannel={handleAddFileToChannel}
/>
<Jumper.Dismiss />
</Jumper.Header>
<Jumper.Divider />
<Jumper.Item>
@ -462,18 +463,15 @@ export function EditChannelsMobile({ file, viewer, isOpen, onClose }) {
<MobileJumper.AnimatePresence>
{isOpen ? (
<MobileJumper.Root onClose={onClose}>
<MobileJumper.Header
style={{ paddingTop: 0, paddingBottom: 0 }}
css={STYLES_EDIT_CHANNELS_HEADER}
>
<SVG.Hash width={16} />
<MobileJumper.Header style={{ paddingTop: 0, paddingBottom: 0 }}>
<ChannelInput
value={searchQuery}
onChange={handleQueryChange}
searchResults={searchResults}
onAddFileToChannel={handleAddFileToChannel}
autoFocus={viewer?.slates?.length === 0}
autoFocus
/>
<MobileJumper.Dismiss />
</MobileJumper.Header>
<System.Divider height={1} color="borderGrayLight4" />
<div style={{ padding: "13px 16px 11px" }}>
@ -502,13 +500,9 @@ export function EditChannelsMobile({ file, viewer, isOpen, onClose }) {
</div>
</MobileJumper.Content>
<MobileJumper.Footer css={Styles.HORIZONTAL_CONTAINER_CENTERED}>
<button
type="button"
css={Styles.BUTTON_RESET}
onClick={() => (onClose(), clearQuery())}
>
<System.ButtonPrimitive type="button" onClick={() => (onClose(), clearQuery())}>
<SVG.Hash width={16} height={16} style={{ color: Constants.system.blue }} />
</button>
</System.ButtonPrimitive>
</MobileJumper.Footer>
</MobileJumper.Root>
) : null}

8
components/system/components/GlobalCarousel/jumpers/EditInfo.js
View File

@ -78,6 +78,7 @@ function UpdateFileForm({ file, isMobile, onClose }) {
<Field
full
inputCss={STYLES_EDIT_INFO_INPUT}
autoFocus
style={{ marginTop: 6 }}
{...getFieldProps("title")}
/>
@ -97,14 +98,13 @@ function UpdateFileForm({ file, isMobile, onClose }) {
{isMobile ? (
<MobileJumper.Footer css={Styles.HORIZONTAL_CONTAINER_CENTERED}>
<button
<System.ButtonPrimitive
type="button"
css={Styles.BUTTON_RESET}
style={{ width: 32, height: 32 }}
onClick={onClose}
>
<SVG.Edit width={16} height={16} style={{ color: Constants.system.blue }} />
</button>
</System.ButtonPrimitive>
<div css={Styles.HORIZONTAL_CONTAINER_CENTERED} style={{ marginLeft: "auto" }}>
<System.ButtonSecondary
type="button"
@ -167,6 +167,7 @@ export function EditInfo({ file, isOpen, onClose }) {
<Jumper.Root onClose={onClose}>
<Jumper.Header>
<System.H5 color="textBlack">Edit info</System.H5>
<Jumper.Dismiss />
</Jumper.Header>
<Jumper.Divider />
<Jumper.Item>
@ -189,6 +190,7 @@ export function EditInfoMobile({ file, isOpen, onClose }) {
<System.H5 as="p" color="textBlack">
Edit Info
</System.H5>
<MobileJumper.Dismiss />
</MobileJumper.Header>
<System.Divider height={1} color="borderGrayLight4" />
<div style={{ padding: "13px 16px 11px" }}>

6
components/system/components/GlobalCarousel/jumpers/FileDescription.js
View File

@ -13,6 +13,7 @@ export function FileDescription({ file, isOpen, onClose }) {
{isOpen ? (
<Jumper.Root onClose={onClose}>
<Jumper.Header>
<div>
<System.H3 as="h1" nbrOflines={1} title={file.name || file.filename}>
{file.name || file.filename}
</System.H3>
@ -20,9 +21,10 @@ export function FileDescription({ file, isOpen, onClose }) {
<div style={{ marginTop: 5 }} css={Styles.HORIZONTAL_CONTAINER_CENTERED}>
<LinkIcon file={file} width={12} height={12} />
<System.P2
as="p"
as="a"
nbrOflines={1}
href={file.url}
target="_blank"
css={Styles.LINK}
style={{ marginLeft: 5 }}
>
@ -30,6 +32,8 @@ export function FileDescription({ file, isOpen, onClose }) {
</System.P2>
</div>
</Show>
</div>
<Jumper.Dismiss autoFocus />
</Jumper.Header>
<Jumper.Divider />
<Jumper.Item>

36
components/system/components/GlobalCarousel/jumpers/MoreInfo.js
View File

@ -1,3 +1,4 @@
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
import * as React from "react";
import * as Styles from "~/common/styles";
import * as System from "~/components/system";
@ -18,6 +19,7 @@ import { Show } from "~/components/utility/Show";
import { css } from "@emotion/react";
import { useEventListener } from "~/common/hooks";
import { AnimatePresence, motion } from "framer-motion";
import { FocusRing } from "~/components/core/FocusRing";
const useCoverImgDrop = ({ onUpload, enabled, ref }) => {
const [isDropping, setDroppingState] = React.useState(false);
@ -168,8 +170,17 @@ function CoverImageUpload({ file, viewer, isMobile, isFileOwner }) {
};
return (
<FocusRing within>
<label
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
tabIndex={isFileOwner || isUploadingCoverImg ? 0 : -1}
ref={coverImgDropzoneRef}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.target.click();
e.preventDefault();
}
}}
style={{
marginTop: 14,
cursor: !isUploadingCoverImg && isFileOwner ? "pointer" : "unset",
@ -182,13 +193,6 @@ function CoverImageUpload({ file, viewer, isMobile, isFileOwner }) {
<LoaderSpinner style={{ height: 16, width: 16 }} />
) : (
<div>
<input
css={STYLES_FILE_HIDDEN}
type="file"
id="file"
disabled={!isFileOwner || isUploadingCoverImg}
onChange={handleInputChange}
/>
<div
style={{
display: "block",
@ -215,6 +219,14 @@ function CoverImageUpload({ file, viewer, isMobile, isFileOwner }) {
>
{isFileOwner ? (
<>
<input
css={STYLES_FILE_HIDDEN}
type="file"
id="file"
disabled={isUploadingCoverImg}
onChange={handleInputChange}
tabIndex="-1"
/>
<SVG.UploadCloud width={16} />
<System.P3 style={{ maxWidth: 140, textAlign: "center", marginTop: 8 }}>
{isMobile
@ -245,6 +257,7 @@ function CoverImageUpload({ file, viewer, isMobile, isFileOwner }) {
</AnimatePresence>
</div>
</label>
</FocusRing>
);
}
@ -356,11 +369,12 @@ export function MoreInfo({ external, viewer, isOwner, file, isOpen, onClose }) {
<Jumper.Root onClose={onClose}>
<Jumper.Header>
<System.H5 color="textBlack">More info</System.H5>
<Jumper.Dismiss autoFocus />
</Jumper.Header>
<Jumper.Divider />
<Jumper.Item
css={Styles.HORIZONTAL_CONTAINER}
style={{ flexGrow: 1, paddingTop: 0, paddingBottom: 0 }}
style={{ paddingTop: 0, paddingBottom: 0 }}
>
<CoverImageUpload file={file} viewer={viewer} isFileOwner={isFileOwner} />
<System.Divider
@ -388,6 +402,7 @@ export function MoreInfoMobile({ external, viewer, isOwner, file, isOpen, onClos
<System.H5 as="p" color="textBlack">
More Info
</System.H5>
<MobileJumper.Dismiss />
</MobileJumper.Header>
<System.Divider height={1} color="borderGrayLight4" />
<div style={{ padding: "13px 16px 11px" }}>
@ -399,14 +414,13 @@ export function MoreInfoMobile({ external, viewer, isOwner, file, isOpen, onClos
<FileMetadata file={file} style={{ marginTop: 22 }} />
</MobileJumper.Content>
<MobileJumper.Footer css={Styles.HORIZONTAL_CONTAINER_CENTERED}>
<button
<System.ButtonPrimitive
type="button"
css={Styles.BUTTON_RESET}
style={{ width: 32, height: 32 }}
onClick={onClose}
>
<SVG.InfoCircle width={16} height={16} style={{ color: Constants.system.blue }} />
</button>
</System.ButtonPrimitive>
</MobileJumper.Footer>
</MobileJumper.Root>
) : null}

28
components/system/components/GlobalCarousel/jumpers/Share.js
View File

@ -15,7 +15,6 @@ import { LoaderSpinner } from "~/components/system/components/Loaders";
/* -----------------------------------------------------------------------------------------------*/
const STYLES_SHARING_BUTTON = (theme) => css`
${Styles.BUTTON_RESET};
${Styles.HORIZONTAL_CONTAINER_CENTERED};
padding: 9px 8px 11px;
border-radius: 12px;
@ -59,26 +58,26 @@ function FileSharingButtons({ file, data, viewer }) {
return (
<>
<button css={STYLES_SHARING_BUTTON} onClick={handleTwitterSharing}>
<System.ButtonPrimitive css={STYLES_SHARING_BUTTON} onClick={handleTwitterSharing} autoFocus>
<SVG.Twitter width={16} />
<System.P2 style={{ marginLeft: 12 }}>Share via Twitter</System.P2>
</button>
<button css={STYLES_SHARING_BUTTON} onClick={handleEmailSharing}>
</System.ButtonPrimitive>
<System.ButtonPrimitive css={STYLES_SHARING_BUTTON} onClick={handleEmailSharing}>
<SVG.Mail width={16} />
<System.P2 style={{ marginLeft: 12 }}>Share via email </System.P2>
</button>
<button css={STYLES_SHARING_BUTTON} onClick={handleLinkCopy}>
</System.ButtonPrimitive>
<System.ButtonPrimitive css={STYLES_SHARING_BUTTON} onClick={handleLinkCopy}>
<SVG.Link width={16} />
<System.P2 style={{ marginLeft: 12 }}>
{copyState.isLinkCopied ? "Copied" : "Copy public link"}
</System.P2>
</button>
<button css={STYLES_SHARING_BUTTON} onClick={handleCidCopy}>
</System.ButtonPrimitive>
<System.ButtonPrimitive css={STYLES_SHARING_BUTTON} onClick={handleCidCopy}>
<SVG.Hexagon width={16} />
<System.P2 style={{ marginLeft: 12 }}>
{copyState.isCidCopied ? "Copied" : "Copy CID "}
</System.P2>
</button>
</System.ButtonPrimitive>
<DownloadButton file={file} viewer={viewer} />
</>
);
@ -111,14 +110,14 @@ function DownloadButton({ file, viewer, ...props }) {
return !file.isLink ? (
<div ref={downloadRef}>
<button css={STYLES_SHARING_BUTTON} onClick={handleDownload} {...props}>
<System.ButtonPrimitive css={STYLES_SHARING_BUTTON} onClick={handleDownload} {...props}>
{isDownloading ? (
<LoaderSpinner style={{ height: 16, width: 16 }} />
) : (
<SVG.Download width={16} />
)}
<System.P2 style={{ marginLeft: 12 }}>Download file</System.P2>
</button>
</System.ButtonPrimitive>
</div>
) : null;
}
@ -145,6 +144,7 @@ export function Share({ file, data, viewer, isOpen, onClose }) {
<Jumper.Root onClose={onClose}>
<Jumper.Header>
<System.H5 color="textBlack">Share</System.H5>
<Jumper.Dismiss />
</Jumper.Header>
<Jumper.Divider />
<Jumper.Item>
@ -181,6 +181,7 @@ export function ShareMobile({ file, data, viewer, isOpen, onClose }) {
<System.H5 as="p" color="textBlack">
Share
</System.H5>
<MobileJumper.Dismiss />
</MobileJumper.Header>
<System.Divider height={1} color="borderGrayLight4" />
<div style={{ padding: "13px 16px 11px" }}>
@ -191,14 +192,13 @@ export function ShareMobile({ file, data, viewer, isOpen, onClose }) {
<FileSharingButtons file={file} data={data} viewer={viewer} />
</MobileJumper.Content>
<MobileJumper.Footer css={Styles.HORIZONTAL_CONTAINER_CENTERED}>
<button
<System.ButtonPrimitive
type="button"
css={Styles.BUTTON_RESET}
style={{ width: 32, height: 32 }}
onClick={onClose}
>
<SVG.Share width={16} height={16} style={{ color: Constants.system.blue }} />
</button>
</System.ButtonPrimitive>
<a
css={[Styles.LINK, Styles.HORIZONTAL_CONTAINER_CENTERED]}
style={{ marginLeft: "auto", color: Constants.semantic.textGrayDark }}