feat(Jumpers): accessibility changes

2024-11-26 04:19:49 +03:00 · 2022-01-02 19:09:11 +01:00 · 2022-01-02 19:09:11 +01:00 · f0f177c983
commit f0f177c983
parent a21ce0baad
8 changed files with 196 additions and 166 deletions
--- a/components/core/Onboarding/Upload.js
+++ b/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}
--- 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() {
      <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 }}>
--- 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 (
-    <Component css={[STYLES_FULL_HEIGHT, css]} {...props}>
+    <Component css={[STYLES_FULL_HEIGHT, css]} ref={ref} {...props}>
      {children}
    </Component>
  );
-}
+});
--- 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 (
-    <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,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 (
-    <div style={{ position: "relative", width: "100%" }}>
-      <System.Input
-        full
-        value={value}
-        onChange={onChange}
-        name="search"
-        placeholder="Search or create a new tag"
-        inputCss={STYLES_SEARCH_TAGS_INPUT}
-        {...props}
-      />
-      <div style={{ position: "absolute", top: "50%", transform: "translateY(-50%)", right: 20 }}>
-        {showShortcut ? (
-          <ChannelKeyboardShortcut
-            searchQuery={value}
-            searchResults={searchResults}
-            onAddFileToChannel={onAddFileToChannel}
-          />
-        ) : null}
+    <div css={[STYLES_SEARCH_TAGS_INPUT_WRAPPER, Styles.CONTAINER_CENTERED]}>
+      <SVG.Hash width={16} />
+      <div style={{ position: "relative", width: "100%" }}>
+        <System.Input
+          full
+          value={value}
+          onChange={onChange}
+          name="search"
+          placeholder="Search or create a new tag"
+          inputCss={STYLES_SEARCH_TAGS_INPUT}
+          {...props}
+        />
+        <div style={{ position: "absolute", top: "50%", transform: "translateY(-50%)", right: 20 }}>
+          {showShortcut ? (
+            <ChannelKeyboardShortcut
+              searchQuery={value}
+              searchResults={searchResults}
+              onAddFileToChannel={onAddFileToChannel}
+            />
+          ) : 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}
--- 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 }) {
            <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" }}>
--- 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 ? (
        <Jumper.Root onClose={onClose}>
          <Jumper.Header>
-            <System.H3 as="h1" nbrOflines={1} title={file.name || file.filename}>
-              {file.name || file.filename}
-            </System.H3>
-            <Show when={file.isLink}>
-              <div style={{ marginTop: 5 }} css={Styles.HORIZONTAL_CONTAINER_CENTERED}>
-                <LinkIcon file={file} width={12} height={12} />
-                <System.P2
-                  as="p"
-                  nbrOflines={1}
-                  href={file.url}
-                  css={Styles.LINK}
-                  style={{ marginLeft: 5 }}
-                >
-                  {file.url}
-                </System.P2>
-              </div>
-            </Show>
+            <div>
+              <System.H3 as="h1" nbrOflines={1} title={file.name || file.filename}>
+                {file.name || file.filename}
+              </System.H3>
+              <Show when={file.isLink}>
+                <div style={{ marginTop: 5 }} css={Styles.HORIZONTAL_CONTAINER_CENTERED}>
+                  <LinkIcon file={file} width={12} height={12} />
+                  <System.P2
+                    as="a"
+                    nbrOflines={1}
+                    href={file.url}
+                    target="_blank"
+                    css={Styles.LINK}
+                    style={{ marginLeft: 5 }}
+                  >
+                    {file.url}
+                  </System.P2>
+                </div>
+              </Show>
+            </div>
+            <Jumper.Dismiss autoFocus />
          </Jumper.Header>
          <Jumper.Divider />
          <Jumper.Item>
--- 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 (
-    <label
-      ref={coverImgDropzoneRef}
-      style={{
-        marginTop: 14,
-        cursor: !isUploadingCoverImg && isFileOwner ? "pointer" : "unset",
-      }}
-    >
-      <div css={Styles.HORIZONTAL_CONTAINER_CENTERED} style={{ justifyContent: "space-between" }}>
-        <System.H6 color="textGray">Preview image</System.H6>
-        <Show when={isFileOwner}>
-          {isUploadingCoverImg ? (
-            <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",
-                  color: System.Constants.semantic.textBlack,
-                }}
-              >
-                <SVG.UploadCloud style={{ display: "block" }} width={16} height={16} />
+    <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",
+        }}
+      >
+        <div css={Styles.HORIZONTAL_CONTAINER_CENTERED} style={{ justifyContent: "space-between" }}>
+          <System.H6 color="textGray">Preview image</System.H6>
+          <Show when={isFileOwner}>
+            {isUploadingCoverImg ? (
+              <LoaderSpinner style={{ height: 16, width: 16 }} />
+            ) : (
+              <div>
+                <div
+                  style={{
+                    display: "block",
+                    color: System.Constants.semantic.textBlack,
+                  }}
+                >
+                  <SVG.UploadCloud style={{ display: "block" }} width={16} height={16} />
+                </div>
              </div>
+            )}
+          </Show>
+        </div>
+        <div style={{ position: "relative" }}>
+          {coverImage ? (
+            <>
+              <div css={STYLES_IMAGE_PREVIEW}>
+                <img src={Strings.getURLfromCID(coverImage.cid)} alt="" />
+              </div>
+            </>
+          ) : (
+            <div
+              css={[STYLES_IMAGE_PREVIEW, Styles.CONTAINER_CENTERED]}
+              style={{ flexDirection: "column" }}
+            >
+              {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
+                      ? "Select an image as object preview"
+                      : "Drop or select an image as object preview"}
+                  </System.P3>
+                </>
+              ) : (
+                <System.P3 style={{ maxWidth: 140, textAlign: "center", marginTop: 8 }}>
+                  No preview image
+                </System.P3>
+              )}
            </div>
          )}
-        </Show>
-      </div>
-      <div style={{ position: "relative" }}>
-        {coverImage ? (
-          <>
-            <div css={STYLES_IMAGE_PREVIEW}>
-              <img src={Strings.getURLfromCID(coverImage.cid)} alt="" />
-            </div>
-          </>
-        ) : (
-          <div
-            css={[STYLES_IMAGE_PREVIEW, Styles.CONTAINER_CENTERED]}
-            style={{ flexDirection: "column" }}
-          >
-            {isFileOwner ? (
-              <>
-                <SVG.UploadCloud width={16} />
-                <System.P3 style={{ maxWidth: 140, textAlign: "center", marginTop: 8 }}>
-                  {isMobile
-                    ? "Select an image as object preview"
-                    : "Drop or select an image as object preview"}
-                </System.P3>
-              </>
-            ) : (
-              <System.P3 style={{ maxWidth: 140, textAlign: "center", marginTop: 8 }}>
-                No preview image
-              </System.P3>
-            )}
-          </div>
-        )}

-        <AnimatePresence>
-          {isDroppingCoverImg ? (
-            <motion.div
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 0.3, ease: "easeInOut" }}
-              css={STYLES_COVER_IMG_DROP}
-            >
-              <System.P3 color="textGrayDark">Drop the image to upload</System.P3>
-            </motion.div>
-          ) : null}
-        </AnimatePresence>
-      </div>
-    </label>
+          <AnimatePresence>
+            {isDroppingCoverImg ? (
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.3, ease: "easeInOut" }}
+                css={STYLES_COVER_IMG_DROP}
+              >
+                <System.P3 color="textGrayDark">Drop the image to upload</System.P3>
+              </motion.div>
+            ) : null}
+          </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}
--- a/components/system/components/GlobalCarousel/jumpers/Share.js
+++ b/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>
-      <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 }}