feat[frontend]: add file drag panel, improve accessibility

SharzyL · SharzyL · commit 7c4377a61c62 · 2025-04-28T22:11:56.000+08:00
diff --git a/frontend/components/DarkModeToggle.tsx b/frontend/components/DarkModeToggle.tsx
@@ -1,5 +1,5 @@
 import React, { JSX, useEffect } from "react"
-import { computerIcon, moonIcon, sunIcon } from "../icons.js"
+import { ComputerIcon, MoonIcon, SunIcon } from "../icons.js"
 import { Tooltip, TooltipProps } from "@heroui/react"
 
 export type DarkMode = "dark" | "light" | "system"
@@ -10,9 +10,9 @@ interface MyComponentProps extends TooltipProps {
 }
 
 const icons: { name: DarkMode; icon: JSX.Element }[] = [
-  { name: "system", icon: computerIcon },
-  { name: "dark", icon: moonIcon },
-  { name: "light", icon: sunIcon },
+  { name: "system", icon: <ComputerIcon className="size-6 inline" /> },
+  { name: "dark", icon: <MoonIcon className="size-6 inline" /> },
+  { name: "light", icon: <SunIcon className="size-6 inline" /> },
 ]
 
 export function defaultDarkMode(): DarkMode {
@@ -37,10 +37,12 @@ export function DarkModeToggle({ mode, onModeChange, ...rest }: MyComponentProps
   }, [mode])
 
   return (
-    <Tooltip content="Toggle Dark Mode" {...rest}>
+    <Tooltip content={`Toggle dark mode (${mode} mode now)`} {...rest}>
       <span
         className="absolute right-0"
         data-testid="pastebin-darkmode-toggle"
+        role="button"
+        aria-label="Toggle Dark Mode"
         onClick={() => {
           const curModeIdx = icons.findIndex(({ name }) => name === mode)
           onModeChange(icons[(curModeIdx + 1) % icons.length].name)
diff --git a/frontend/components/PasteEditor.tsx b/frontend/components/PasteEditor.tsx
@@ -1,6 +1,7 @@
 import { Button, Card, CardBody, CardProps, Tab, Tabs, Textarea } from "@heroui/react"
-import React from "react"
+import React, { useRef, useState, DragEvent } from "react"
 import { formatSize } from "../utils.js"
+import { XIcon } from "../icons.js"
 
 export type EditKind = "edit" | "file"
 
@@ -16,28 +17,40 @@ interface PasteEditorProps extends CardProps {
   onStateChange: (state: PasteEditState) => void
 }
 
-function displayFileInfo(file: File | null) {
-  if (file === null) {
-    return null
-  } else {
-    return (
-      <span className="ml-4">
-        <code>{file.name}</code> ({formatSize(file.size)})
-      </span>
-    )
+export function PasteEditor({ isPasteLoading, state, onStateChange, ...rest }: PasteEditorProps) {
+  const fileInput = useRef<HTMLInputElement>(null)
+  const [isDragged, setDragged] = useState<boolean>(false)
+
+  function setFile(file: File | null) {
+    onStateChange({ ...state, editKind: "file", file })
+  }
+
+  function onDrop(e: DragEvent) {
+    e.preventDefault()
+    const items = e.dataTransfer?.items
+    if (items) {
+      for (let i = 0; i < items.length; i++) {
+        if (items[i].kind === "file") {
+          console.log(items)
+          const file = items[i].getAsFile()!
+          setFile(file)
+          break
+        }
+      }
+    }
+    setDragged(false)
   }
-}
 
-export function PasteEditor({ isPasteLoading, state, onStateChange, ...rest }: PasteEditorProps) {
   return (
-    <Card {...rest}>
+    <Card aria-label="Pastebin editor panel" {...rest}>
       <CardBody>
         <Tabs
           variant="underlined"
           classNames={{
-            tabList: "ml-4 gap-6 w-full p-0 border-divider",
-            cursor: "w-full",
-            tab: "max-w-fit px-0 h-8",
+            tabList: "gap-2 w-full px-2 py-0 border-divider",
+            cursor: "w-[80%]",
+            tab: "max-w-fit px-2 h-8 px-2",
+            panel: "pb-1",
           }}
           selectedKey={state.editKind}
           onSelectionChange={(k) => {
@@ -54,7 +67,7 @@ export function PasteEditor({ isPasteLoading, state, onStateChange, ...rest }: P
               classNames={{
                 input: "resize-y min-h-[30em] font-mono",
               }}
-              name="c"
+              aria-label="paste-edit"
               disableAutosize
               disableAnimation
               value={state.editContent}
@@ -66,24 +79,47 @@ export function PasteEditor({ isPasteLoading, state, onStateChange, ...rest }: P
             ></Textarea>
           </Tab>
           <Tab key="file" title="File">
-            <Button radius="sm" color="primary" as="label">
+            <div
+              className={
+                "w-full h-[20rem] rounded-xl flex flex-col items-center justify-center cursor-pointer relative" +
+                (isDragged ? " bg-primary-100" : " bg-primary-50")
+              }
+              onDrop={onDrop}
+              onDragEnter={() => setDragged(true)}
+              onDragLeave={() => setDragged(false)}
+              onDragOver={() => setDragged(true)}
+              onClick={() => fileInput.current?.click()}
+            >
               <input
                 type="file"
+                aria-label="paste-file"
+                ref={fileInput}
                 className="w-0 h-0 overflow-hidden absolute inline"
-                onChange={(event) => {
-                  const files = event.target.files
+                onChange={(e) => {
+                  const files = e.target.files
                   if (files && files.length) {
-                    onStateChange({
-                      ...state,
-                      editKind: "file",
-                      file: files[0],
-                    })
+                    setFile(files[0])
                   }
                 }}
               />
-              Upload
-            </Button>
-            {displayFileInfo(state.file)}
+              <div className="text-2xl my-2 font-bold">Select File</div>
+              <p className="text-1xl text-foreground-500 relative">
+                <span>
+                  {state.file !== null
+                    ? `${state.file.name} (${formatSize(state.file.size)})`
+                    : "Click or drag & drop file here"}
+                </span>
+              </p>
+              {state.file && (
+                <XIcon
+                  className="h-6 inline absolute top-2 right-2 text-red-400"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    setFile(null)
+                  }}
+                />
+              )}
+            </div>
           </Tab>
         </Tabs>
       </CardBody>
diff --git a/frontend/components/PasteSettingPanel.tsx b/frontend/components/PasteSettingPanel.tsx
@@ -19,14 +19,16 @@ interface PasteSettingPanelProps extends CardProps {
 
 export function PanelSettingsPanel({ setting, onSettingChange, ...rest }: PasteSettingPanelProps) {
   return (
-    <Card {...rest}>
+    <Card aria-label="Pastebin setting panel" {...rest}>
       <CardHeader className="text-2xl">Settings</CardHeader>
       <Divider />
       <CardBody>
-        <div className="gap-4 mb-6 flex flex-row">
+        <div className="gap-4 mb-4 flex flex-row">
           <Input
             type="text"
             label="Expiration"
+            // to avoid duplicated name, see https://github.com/adobe/react-spectrum/discussions/8037
+            aria-labelledby=""
             className="basis-80"
             defaultValue="7d"
             value={setting.expiration}
@@ -39,6 +41,7 @@ export function PanelSettingsPanel({ setting, onSettingChange, ...rest }: PasteS
           <Input
             type="password"
             label="Password"
+            aria-labelledby=""
             value={setting.password}
             onValueChange={(p) => onSettingChange({ ...setting, password: p })}
             placeholder={"Generated randomly"}
diff --git a/frontend/components/UploadedPanel.tsx b/frontend/components/UploadedPanel.tsx
@@ -8,11 +8,11 @@ interface UploadedPanelProps extends CardProps {
 
 export function UploadedPanel({ pasteResponse, ...rest }: UploadedPanelProps) {
   const snippetClassNames = {
-    pre: "overflow-scroll leading-[2.5]",
-    base: "w-full py-2/3",
+    pre: "overflow-scroll leading-[2.5] font-sans",
+    base: "w-full py-1/3",
     copyButton: "relative ml-[-12pt] left-[5pt]",
   }
-  const firstColClassNames = "w-[7rem] whitespace-nowrap"
+  const firstColClassNames = "w-[8rem] mr-4 whitespace-nowrap"
   return (
     <Card {...rest}>
       <CardHeader className="text-2xl">Uploaded Paste</CardHeader>
@@ -32,7 +32,7 @@ export function UploadedPanel({ pasteResponse, ...rest }: UploadedPanelProps) {
             </tr>
             <tr>
               <td className={firstColClassNames}>Manage URL</td>
-              <td className="w-full overflow-hidden">
+              <td className="w-full">
                 <Skeleton isLoaded={pasteResponse !== null} className="rounded-2xl grow">
                   <Snippet hideSymbol variant="bordered" classNames={snippetClassNames}>
                     {pasteResponse?.manageUrl}
diff --git a/frontend/icons.tsx b/frontend/icons.tsx
@@ -1,11 +1,14 @@
-export const moonIcon = (
+import { HTMLAttributes } from "react"
+
+export const MoonIcon = (props: HTMLAttributes<SVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
     viewBox="0 0 24 24"
     strokeWidth={1.5}
     stroke="currentColor"
     className="size-6 inline"
+    {...props}
   >
     <path
       strokeLinecap="round"
@@ -15,14 +18,14 @@ export const moonIcon = (
   </svg>
 )
 
-export const sunIcon = (
+export const SunIcon = (props: HTMLAttributes<SVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
     viewBox="0 0 24 24"
     strokeWidth={1.5}
     stroke="currentColor"
-    className="size-6 inline"
+    {...props}
   >
     <path
       strokeLinecap="round"
@@ -32,14 +35,14 @@ export const sunIcon = (
   </svg>
 )
 
-export const computerIcon = (
+export const ComputerIcon = (props: HTMLAttributes<SVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
     viewBox="0 0 24 24"
     strokeWidth={1.5}
     stroke="currentColor"
-    className="size-6 inline"
+    {...props}
   >
     <path
       strokeLinecap="round"
@@ -48,3 +51,20 @@ export const computerIcon = (
     />
   </svg>
 )
+
+export const XIcon = (props: HTMLAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={1.5}
+    stroke="currentColor"
+    {...props}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+    />
+  </svg>
+)
diff --git a/frontend/pb.tsx b/frontend/pb.tsx
@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from "react"
 
-import { Button, Card, CardBody, Link, Tab, Tabs, Textarea } from "@heroui/react"
+import { Button, Link } from "@heroui/react"
 
 import { PasteResponse, parsePath, parseFilenameFromContentDisposition } from "../src/shared.js"
 
 import { DarkModeToggle, DarkMode, defaultDarkMode, shouldBeDark } from "./components/DarkModeToggle.js"
 import { ErrorModal } from "./components/ErrorModal.js"
-import { PanelSettingsPanel, PasteSetting, UploadKind } from "./components/PasteSettingPanel.js"
+import { PanelSettingsPanel, PasteSetting } from "./components/PasteSettingPanel.js"
 
 import { verifyExpiration, verifyManageUrl, verifyName, maxExpirationReadable, BaseUrl, APIUrl } from "./utils.js"
 
@@ -174,9 +174,10 @@ export function PasteBin() {
 
   const info = (
     <div className="mx-4 lg:mx-0">
-      <h1 className="text-3xl mt-8 mb-4 relative">
-        {INDEX_PAGE_TITLE} <DarkModeToggle mode={darkModeSelect} onModeChange={setDarkModeSelect} />
-      </h1>
+      <div className="mt-8 mb-4 relative">
+        <h1 className="text-3xl inline">{INDEX_PAGE_TITLE}</h1>
+        <DarkModeToggle mode={darkModeSelect} onModeChange={setDarkModeSelect} />
+      </div>
       <p className="my-2">This is an open source pastebin deployed on Cloudflare Workers. </p>
       <p className="my-2">
         <b>Usage</b>: paste any text here, submit, then share it with URL. (
diff --git a/frontend/test/index.spec.tsx b/frontend/test/index.spec.tsx
@@ -26,18 +26,30 @@ describe("Pastebin", () => {
     const title = screen.getByText("Pastebin Worker")
     expect(title).toBeInTheDocument()
 
-    const editor = screen.getByPlaceholderText("Edit your paste here")
+    const editor = screen.getByRole("textbox", { name: "paste-edit" })
     expect(editor).toBeInTheDocument()
-    await userEvent.type(editor, "something")
 
-    const submitter = screen.getByText("Upload")
+    const submitter = screen.getByRole("button", { name: "Upload" })
     expect(submitter).toBeInTheDocument()
+    expect(submitter).not.toBeEnabled()
+
+    await userEvent.type(editor, "something")
+
     expect(submitter).toBeEnabled()
     await userEvent.click(submitter)
 
     expect(screen.getByText(mockedPasteUpload.url)).toBeInTheDocument()
     expect(screen.getByText(mockedPasteUpload.manageUrl)).toBeInTheDocument()
   })
+
+  it("refuse illegal settings", async () => {
+    render(<PasteBin />)
+    // due to bugs https://github.com/adobe/react-spectrum/discussions/8037, we need to use duplicated name here
+    const expire = screen.getByRole("textbox", { name: "Expiration" })
+    expect(expire).toBeValid()
+    await userEvent.type(expire, "xxx")
+    expect(expire).toBeInvalid()
+  })
 })
 
 describe("Pastebin admin page", () => {
@@ -49,19 +61,19 @@ describe("Pastebin admin page", () => {
     })
     render(<PasteBin />)
 
-    const edit = screen.getByTestId("pastebin-edit")
-    await userEvent.click(edit) // meaningless click, just ensure useEffect is done
-    expect(edit).toBeInTheDocument()
-    expect((edit as HTMLTextAreaElement).value).toStrictEqual(mockedPasteContent)
+    const editor = screen.getByRole("textbox", { name: "paste-edit" })
+    await userEvent.click(editor) // meaningless click, just ensure useEffect is done
+    expect(editor).toBeInTheDocument()
+    expect((editor as HTMLTextAreaElement).value).toStrictEqual(mockedPasteContent)
   })
 })
 
 describe("Pastebin dark mode", () => {
   it("renders light mode", async () => {
     render(<PasteBin />)
 
-    const main = screen.getByTestId("pastebin-main")
-    const toggler = screen.getByTestId("pastebin-darkmode-toggle")
+    const main = screen.getByRole("main")
+    const toggler = screen.getByRole("button", { name: "Toggle Dark Mode" })
     expect(main).toHaveClass("light")
     await userEvent.click(toggler)
     expect(main).toHaveClass("dark")
