feat(Jumpers): accessibility changes

components/core/Onboarding/Upload.js

@@ -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}

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() {
       <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
+        <System.ButtonPrimitive
-          css={Styles.BUTTON_RESET}
           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 }}>

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 (
-    <Component css={[STYLES_FULL_HEIGHT, css]} {...props}>
+    <Component css={[STYLES_FULL_HEIGHT, css]} ref={ref} {...props}>
       {children}
     </Component>
   );
-}
+});

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 (
-    <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
+          <Jumper.Header style={{ paddingTop: 0, paddingBottom: 0 }}>
-            css={[STYLES_EDIT_CHANNELS_HEADER, Styles.CONTAINER_CENTERED]}
-            style={{ paddingTop: 0, paddingBottom: 0 }}
-          >
-            <SVG.Hash width={16} />
             <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
+          <MobileJumper.Header style={{ paddingTop: 0, paddingBottom: 0 }}>
-            style={{ paddingTop: 0, paddingBottom: 0 }}
-            css={STYLES_EDIT_CHANNELS_HEADER}
-          >
-            <SVG.Hash width={16} />
             <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
+            <System.ButtonPrimitive type="button" onClick={() => (onClose(), clearQuery())}>
-              type="button"
-              css={Styles.BUTTON_RESET}
-              onClick={() => (onClose(), clearQuery())}
-            >
               <SVG.Hash width={16} height={16} style={{ color: Constants.system.blue }} />
-            </button>
+            </System.ButtonPrimitive>
           </MobileJumper.Footer>
         </MobileJumper.Root>
       ) : null}

components/system/components/GlobalCarousel/jumpers/EditInfo.js

@@ -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" }}>

components/system/components/GlobalCarousel/jumpers/FileDescription.js

@@ -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>

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,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}

components/system/components/GlobalCarousel/jumpers/Share.js

@@ -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>
+      </System.ButtonPrimitive>
-      <button css={STYLES_SHARING_BUTTON} onClick={handleEmailSharing}>
+      <System.ButtonPrimitive css={STYLES_SHARING_BUTTON} onClick={handleEmailSharing}>
         <SVG.Mail width={16} />
         <System.P2 style={{ marginLeft: 12 }}>Share via email </System.P2>
-      </button>
+      </System.ButtonPrimitive>
-      <button css={STYLES_SHARING_BUTTON} onClick={handleLinkCopy}>
+      <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>
+      </System.ButtonPrimitive>
-      <button css={STYLES_SHARING_BUTTON} onClick={handleCidCopy}>
+      <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 }}