From f0f177c98343d009cf8f609765df0777b8049279 Mon Sep 17 00:00:00 2001 From: Aminejv Date: Sun, 2 Jan 2022 19:09:11 +0100 Subject: [PATCH] feat(Jumpers): accessibility changes --- components/core/Onboarding/Upload.js | 4 +- components/core/Upload/Jumper.js | 28 ++- .../system/components/FullHeightLayout.js | 6 +- .../GlobalCarousel/jumpers/EditChannels.js | 82 ++++----- .../GlobalCarousel/jumpers/EditInfo.js | 8 +- .../GlobalCarousel/jumpers/FileDescription.js | 38 ++-- .../GlobalCarousel/jumpers/MoreInfo.js | 168 ++++++++++-------- .../GlobalCarousel/jumpers/Share.js | 28 +-- 8 files changed, 196 insertions(+), 166 deletions(-) diff --git a/components/core/Onboarding/Upload.js b/components/core/Onboarding/Upload.js index cdcddf15..317c80a1 100644 --- a/components/core/Onboarding/Upload.js +++ b/components/core/Onboarding/Upload.js @@ -188,7 +188,7 @@ function ExtensionOnboarding({ isMobile }) { {isMobile ? ( - + {header} {body} @@ -198,7 +198,7 @@ function ExtensionOnboarding({ isMobile }) { ) : null} {!isMobile ? ( - + {header} {body} diff --git a/components/core/Upload/Jumper.js b/components/core/Upload/Jumper.js index 349425fc..b0a4a87e 100644 --- a/components/core/Upload/Jumper.js +++ b/components/core/Upload/Jumper.js @@ -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() { Save from anywhere on the Web
- +
); @@ -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 ( {isUploadJumperVisible ? ( - (onboardingContext.goToNextStep(), hideUploadJumper())}> + (onboardingContext.goToNextStep(), hideUploadJumper())} + > - Upload + + Upload + + @@ -193,6 +206,8 @@ export function UploadJumper({ data }) { (onboardingContext.goToNextStep(), hideUploadJumper())}> Upload + diff --git a/components/system/components/FullHeightLayout.js b/components/system/components/FullHeightLayout.js index 9269c9a6..1d01a697 100644 --- a/components/system/components/FullHeightLayout.js +++ b/components/system/components/FullHeightLayout.js @@ -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 ( - + {children} ); -} +}); diff --git a/components/system/components/GlobalCarousel/jumpers/EditChannels.js b/components/system/components/GlobalCarousel/jumpers/EditChannels.js index 1e10d6be..379440f7 100644 --- a/components/system/components/GlobalCarousel/jumpers/EditChannels.js +++ b/components/system/components/GlobalCarousel/jumpers/EditChannels.js @@ -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 ( - + ); } @@ -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,36 +96,45 @@ 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 ( -
- -
- {showShortcut ? ( - - ) : null} +
+ +
+ +
+ {showShortcut ? ( + + ) : null} +
); @@ -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 }) { {isOpen ? ( (onClose(), clearQuery())} {...props}> - - + + @@ -462,18 +463,15 @@ export function EditChannelsMobile({ file, viewer, isOpen, onClose }) { {isOpen ? ( - - + +
@@ -502,13 +500,9 @@ export function EditChannelsMobile({ file, viewer, isOpen, onClose }) {
- + ) : null} diff --git a/components/system/components/GlobalCarousel/jumpers/EditInfo.js b/components/system/components/GlobalCarousel/jumpers/EditInfo.js index a7c5729c..b954b350 100644 --- a/components/system/components/GlobalCarousel/jumpers/EditInfo.js +++ b/components/system/components/GlobalCarousel/jumpers/EditInfo.js @@ -78,6 +78,7 @@ function UpdateFileForm({ file, isMobile, onClose }) { @@ -97,14 +98,13 @@ function UpdateFileForm({ file, isMobile, onClose }) { {isMobile ? ( - +
Edit info + @@ -189,6 +190,7 @@ export function EditInfoMobile({ file, isOpen, onClose }) { Edit Info +
diff --git a/components/system/components/GlobalCarousel/jumpers/FileDescription.js b/components/system/components/GlobalCarousel/jumpers/FileDescription.js index ba4b92c5..7e736037 100644 --- a/components/system/components/GlobalCarousel/jumpers/FileDescription.js +++ b/components/system/components/GlobalCarousel/jumpers/FileDescription.js @@ -13,23 +13,27 @@ export function FileDescription({ file, isOpen, onClose }) { {isOpen ? ( - - {file.name || file.filename} - - -
- - - {file.url} - -
- +
+ + {file.name || file.filename} + + +
+ + + {file.url} + +
+ +
+ diff --git a/components/system/components/GlobalCarousel/jumpers/MoreInfo.js b/components/system/components/GlobalCarousel/jumpers/MoreInfo.js index a3c298dc..91e96013 100644 --- a/components/system/components/GlobalCarousel/jumpers/MoreInfo.js +++ b/components/system/components/GlobalCarousel/jumpers/MoreInfo.js @@ -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,83 +170,94 @@ function CoverImageUpload({ file, viewer, isMobile, isFileOwner }) { }; return ( -