Replace custom details toggle with native <details>/<summary>

Removes the showDetails state and custom button toggle in favor of
the native HTML <details>/<summary> element, which provides built-in
toggle behavior, keyboard accessibility, and proper semantics. Uses
key={collection?.id} to auto-reset to closed when switching collections.

Author: jonathangreen

src/components/CollectionImportButton.tsx

@@ -26,14 +26,11 @@ const CollectionImportButton: React.FC<CollectionImportButtonProps> = ({
   const [importing, setImporting] = React.useState(false);
   const [feedback, setFeedback] = React.useState<string | null>(null);
   const [success, setSuccess] = React.useState(false);
-  const [showDetails, setShowDetails] = React.useState(false);
-
   React.useEffect(() => {
     setForce(false);
     setImporting(false);
     setFeedback(null);
     setSuccess(false);
-    setShowDetails(false);
   }, [collection?.id]);
 
   const supportsImport = (): boolean => {
@@ -104,15 +101,8 @@ const CollectionImportButton: React.FC<CollectionImportButtonProps> = ({
         Queue Import picks up new and changed items. Check{" "}
         <strong>Force full re-import</strong> to re-process everything.
       </p>
-      <button
-        className="collection-import-details-toggle"
-        type="button"
-        onClick={() => setShowDetails(!showDetails)}
-        aria-expanded={showDetails}
-      >
-        {showDetails ? "Less details" : "More details"}
-      </button>
-      {showDetails && (
+      <details className="collection-import-details" key={collection?.id}>
+        <summary>More details</summary>
         <dl className="collection-import-docs">
           <dt>Queue Import</dt>
           <dd>
@@ -133,7 +123,7 @@ const CollectionImportButton: React.FC<CollectionImportButtonProps> = ({
             re-processes all items.
           </dd>
         </dl>
-      )}
+      </details>
     </div>
   );
 

src/stylesheets/collection.scss

@@ -24,19 +24,25 @@
     }
   }
 
-  .collection-import-details-toggle {
-    background: none;
-    border: none;
-    padding: 0;
-    color: $dark-gray;
-    cursor: pointer;
-    font-size: 0.8rem;
+  details.collection-import-details {
     margin-bottom: 1em;
 
-    &:hover,
-    &:focus-visible {
-      color: $blue-dark;
+    summary {
+      list-style: none;
+      color: $dark-gray;
+      cursor: pointer;
+      font-size: 0.8rem;
       text-decoration: underline;
+
+      &::-webkit-details-marker {
+        display: none;
+      }
+
+      &:hover,
+      &:focus-visible {
+        color: $blue-dark;
+        text-decoration: underline;
+      }
     }
   }
 

tests/jest/components/CollectionImportButton.test.tsx

@@ -90,48 +90,45 @@ describe("CollectionImportButton", () => {
       screen.getByText(/queue import picks up new and changed items/i)
     ).toBeInTheDocument();
     expect(
-      screen.queryByText(/schedules a background import job/i)
-    ).not.toBeInTheDocument();
+      screen.getByText(/schedules a background import job/i)
+    ).not.toBeVisible();
     expect(
-      screen.queryByText(/the import job re-processes every item/i)
-    ).not.toBeInTheDocument();
+      screen.getByText(/the import job re-processes every item/i)
+    ).not.toBeVisible();
   });
 
   it("clicking 'More details' reveals the detailed docs", async () => {
     const user = userEvent.setup();
     renderButton();
     await expandPanel(user);
 
-    const toggle = screen.getByRole("button", { name: "More details" });
-    expect(toggle).toHaveAttribute("aria-expanded", "false");
+    const details = screen.getByText("More details").closest("details");
+    expect(details).not.toHaveAttribute("open");
 
-    await user.click(toggle);
+    await user.click(screen.getByText("More details"));
 
+    expect(details).toHaveAttribute("open");
     expect(
       screen.getByText(/schedules a background import job/i)
-    ).toBeInTheDocument();
+    ).toBeVisible();
     expect(
       screen.getByText(/the import job re-processes every item/i)
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole("button", { name: "Less details" })
-    ).toHaveAttribute("aria-expanded", "true");
+    ).toBeVisible();
   });
 
-  it("clicking 'Less details' hides the detailed docs again", async () => {
+  it("clicking 'More details' again hides the detailed docs", async () => {
     const user = userEvent.setup();
     renderButton();
     await expandPanel(user);
 
-    await user.click(screen.getByRole("button", { name: "More details" }));
+    await user.click(screen.getByText("More details"));
     expect(
       screen.getByText(/schedules a background import job/i)
-    ).toBeInTheDocument();
+    ).toBeVisible();
 
-    await user.click(screen.getByRole("button", { name: "Less details" }));
-    expect(
-      screen.queryByText(/schedules a background import job/i)
-    ).not.toBeInTheDocument();
+    await user.click(screen.getByText("More details"));
+    const details = screen.getByText("More details").closest("details");
+    expect(details).not.toHaveAttribute("open");
   });
 
   it("checkbox toggles force state", async () => {