diff --git a/web/src/lib/components/repo/DiffFileTree.stories.svelte b/web/src/lib/components/repo/DiffFileTree.stories.svelte
index 6b0eb5638..9c7bf98ae 100644
--- a/web/src/lib/components/repo/DiffFileTree.stories.svelte
+++ b/web/src/lib/components/repo/DiffFileTree.stories.svelte
@@ -25,16 +25,16 @@
 			"#file-package.json"
 		);
 		await expect(canvas.getByText("repo")).toBeVisible();
-		expect(canvasElement.querySelectorAll("details").length).toBe(5);
+		expect(canvasElement.querySelectorAll("[aria-expanded]").length).toBe(5);
 
-		const firstDir = canvasElement.querySelector("details")!;
-		expect(firstDir.open).toBe(true);
-		await userEvent.click(firstDir.querySelector("summary")!);
-		expect(firstDir.open).toBe(false);
+		const firstDir = canvas.getByRole("button", { name: "src" });
+		await expect(firstDir).toHaveAttribute("aria-expanded", "true");
+		await userEvent.click(firstDir);
+		await expect(firstDir).toHaveAttribute("aria-expanded", "false");
 	};
 
 	const flatList = async ({ canvas, canvasElement }: PlayContext) => {
-		expect(canvasElement.querySelector("details")).toBeNull();
+		expect(canvasElement.querySelector("[aria-expanded]")).toBeNull();
 		await expect(canvas.getAllByRole("link")).toHaveLength(2);
 	};
 
diff --git a/web/src/lib/components/repo/DiffFileTree.svelte b/web/src/lib/components/repo/DiffFileTree.svelte
index 5d91576aa..27782f914 100644
--- a/web/src/lib/components/repo/DiffFileTree.svelte
+++ b/web/src/lib/components/repo/DiffFileTree.svelte
@@ -12,7 +12,8 @@
 		variants: {
 			kind: {
 				dir: {
-					row: "cursor-pointer list-none",
+					row: "cursor-pointer text-left",
+					icon: "transition-[rotate] duration-(--fold-duration) ease-(--fold-easing) group-aria-expanded:rotate-90",
 					name: "text-foreground-muted group-hover:text-inherit"
 				},
 				file: { row: "flex items-center gap-xs" }
@@ -61,8 +62,10 @@
 <script lang="ts">
 	import File from "$icon/file";
 	import { fileAnchor } from "$lib/components/repo/fileAnchor.svelte";
-	import ChevronDown from "$icon/chevron-down";
 	import ChevronRight from "$icon/chevron-right";
+	import { prefersReducedMotion } from "svelte/motion";
+	import { CROSSFADE_DURATION, CROSSFADE_EASING, crossfadeEasing } from "$lib/motion/spring";
+	import { revealHeight } from "$lib/motion/reveal";
 
 	interface Props {
 		/** full slash-separated paths, linked as the diff's own file anchors */
@@ -77,6 +80,9 @@
 
 	let closed = $state<Record<string, boolean>>({});
 
+	const uid = $props.id();
+	const duration = $derived(prefersReducedMotion.current ? 0 : CROSSFADE_DURATION);
+
 	const dir = treeRow({ kind: "dir" });
 	const file = treeRow({ kind: "file" });
 </script>
@@ -85,19 +91,26 @@
 	{#each list as node (`${node.type}:${node.path}`)}
 		{#if node.type === "dir"}
 			{@const open = !closed[node.path]}
-			<details {open} ontoggle={(e) => (closed[node.path] = !e.currentTarget.open)}>
-				<summary class={dir.row()}>
-					{#if open}
-						<ChevronDown class={dir.icon()} aria-hidden="true" />
-					{:else}
-						<ChevronRight class={dir.icon()} aria-hidden="true" />
-					{/if}
-					<span class={dir.name()}>{node.name}</span>
-				</summary>
-				<div class={dir.children()}>
+			{@const id = `${uid}-${node.path}`}
+			<button
+				type="button"
+				class={dir.row()}
+				aria-expanded={open}
+				aria-controls={open ? id : undefined}
+				onclick={() => (closed[node.path] = open)}
+			>
+				<ChevronRight class={dir.icon()} aria-hidden="true" />
+				<span class={dir.name()}>{node.name}</span>
+			</button>
+			{#if open}
+				<div
+					{id}
+					class={dir.children()}
+					transition:revealHeight={{ duration, easing: crossfadeEasing }}
+				>
 					{@render nodes(node.children)}
 				</div>
-			</details>
+			{/if}
 		{:else}
 			<!-- an in-page anchor the scroller honours, so there is no route to resolve -->
 			<!-- eslint-disable svelte/no-navigation-without-resolve -->
@@ -119,6 +132,6 @@
 	{/each}
 {/snippet}
 
-<div class={dir.root()}>
+<div class={dir.root()} style:--fold-duration="{duration}ms" style:--fold-easing={CROSSFADE_EASING}>
 	{@render nodes(tree)}
 </div>
diff --git a/web/src/lib/components/repo/DiffView.svelte b/web/src/lib/components/repo/DiffView.svelte
index f9a228e7b..7711307e4 100644
--- a/web/src/lib/components/repo/DiffView.svelte
+++ b/web/src/lib/components/repo/DiffView.svelte
@@ -13,7 +13,7 @@
 	import UnfoldVertical from "$icon/unfold-vertical";
 	import { prefersReducedMotion } from "svelte/motion";
 	import { RAIL_DURATION, railEasing } from "$lib/motion/spring";
-	import { revealWidth } from "$lib/motion/revealWidth";
+	import { revealWidth } from "$lib/motion/reveal";
 	import Button, { buttonIcon } from "$lib/components/ui/Button.svelte";
 	import EmptyState from "$lib/components/ui/EmptyState.svelte";
 	import Segment from "$lib/components/ui/Segment.svelte";
diff --git a/web/src/lib/motion/reveal.ts b/web/src/lib/motion/reveal.ts
new file mode 100644
index 000000000..af268d5ce
--- /dev/null
+++ b/web/src/lib/motion/reveal.ts
@@ -0,0 +1,30 @@
+import type { TransitionConfig } from "svelte/transition";
+
+interface RevealParams {
+	duration: number;
+	easing: (t: number) => number;
+}
+
+export const revealWidth = (
+	node: Element,
+	{ duration, easing }: RevealParams
+): TransitionConfig => {
+	const width = node.getBoundingClientRect().width;
+	return {
+		duration,
+		easing,
+		css: (t) => `overflow: clip; width: ${t * width}px; min-width: 0`
+	};
+};
+
+export const revealHeight = (
+	node: Element,
+	{ duration, easing }: RevealParams
+): TransitionConfig => {
+	const height = node.getBoundingClientRect().height;
+	return {
+		duration,
+		easing,
+		css: (t) => `overflow: clip; height: ${t * height}px; min-height: 0; opacity: ${t}`
+	};
+};
diff --git a/web/src/lib/motion/revealWidth.ts b/web/src/lib/motion/revealWidth.ts
deleted file mode 100644
index ed617da43..000000000
--- a/web/src/lib/motion/revealWidth.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { TransitionConfig } from "svelte/transition";
-
-export const revealWidth = (
-	node: Element,
-	{ duration, easing }: { duration: number; easing: (t: number) => number }
-): TransitionConfig => {
-	const width = node.getBoundingClientRect().width;
-	return {
-		duration,
-		easing,
-		css: (t) => `overflow: clip; width: ${t * width}px; min-width: 0`
-	};
-};
diff --git a/web/src/routes/[handle]/[repo]/pulls/[rkey]/[version]/[[range]]/PullViewPage.svelte b/web/src/routes/[handle]/[repo]/pulls/[rkey]/[version]/[[range]]/PullViewPage.svelte
index 749fb5988..1bd1c7f7b 100644
--- a/web/src/routes/[handle]/[repo]/pulls/[rkey]/[version]/[[range]]/PullViewPage.svelte
+++ b/web/src/routes/[handle]/[repo]/pulls/[rkey]/[version]/[[range]]/PullViewPage.svelte
@@ -83,7 +83,7 @@
 		RAIL_EASING,
 		railEasing
 	} from "$lib/motion/spring";
-	import { revealWidth } from "$lib/motion/revealWidth";
+	import { revealWidth } from "$lib/motion/reveal";
 	import { plural } from "$lib/format";
 
 	type PullViewData = PageData &