From 7faa2f5a69e5c4311ee2b06952a7851f97d52ed5 Mon Sep 17 00:00:00 2001
From: Matthew Lipski <matthewlipski@gmail.com>
Date: Tue, 20 Oct 2026 20:02:09 +0200
Subject: [PATCH 1/2] Made file panel input/upload button autofocus

---
 packages/ariakit/src/panel/PanelFileInput.tsx |  17 +++++++--
 packages/ariakit/src/panel/PanelTextInput.tsx |  17 +++++++--
 packages/mantine/src/panel/PanelFileInput.tsx |  17 +++++++--
 packages/mantine/src/panel/PanelTextInput.tsx |  17 +++++++--
 .../FilePanel/DefaultTabs/EmbedTab.tsx        |   1 +
 .../FilePanel/DefaultTabs/UploadTab.tsx       |   1 +
 .../FilePanel/FilePanelController.tsx         |   9 ++++-
 .../FilePanel/a11y/FilePanel.a11y.test.ts     |  36 ++++++++++++++++++
 .../visual/focus-embed-url-chromium-linux.png | Bin 0 -> 4240 bytes
 .../focus-upload-button-chromium-linux.png    | Bin 0 -> 3887 bytes
 .../react/src/editor/ComponentsContext.tsx    |   2 +
 packages/shadcn/src/panel/PanelFileInput.tsx  |  17 +++++++--
 packages/shadcn/src/panel/PanelTextInput.tsx  |  17 +++++++--
 tests/a11y/helpers.tsx                        |  14 +++++--
 14 files changed, 142 insertions(+), 23 deletions(-)
 create mode 100644 packages/react/src/components/FilePanel/a11y/FilePanel.a11y.test.ts
 create mode 100644 packages/react/src/components/FilePanel/a11y/FilePanel.a11y.test.ts-snapshots/visual/focus-embed-url-chromium-linux.png
 create mode 100644 packages/react/src/components/FilePanel/a11y/FilePanel.a11y.test.ts-snapshots/visual/focus-upload-button-chromium-linux.png

diff --git a/packages/ariakit/src/panel/PanelFileInput.tsx b/packages/ariakit/src/panel/PanelFileInput.tsx
index 12aef33147..29bc9560c5 100644
--- a/packages/ariakit/src/panel/PanelFileInput.tsx
+++ b/packages/ariakit/src/panel/PanelFileInput.tsx
@@ -4,22 +4,33 @@ import {
 } from "@ariakit/react";
 
 import { assertEmpty } from "@blocknote/core";
-import { ComponentProps } from "@blocknote/react";
+import { ComponentProps, useAutoFocus, useMergeRefs } from "@blocknote/react";
 import { forwardRef, type ChangeEvent } from "react";
 
 export const PanelFileInput = forwardRef<
   HTMLInputElement,
   ComponentProps["FilePanel"]["FileInput"]
 >((props, ref) => {
-  const { className, accept, value, placeholder, onChange, ...rest } = props;
+  const {
+    autoFocus,
+    className,
+    accept,
+    value,
+    placeholder,
+    onChange,
+    ...rest
+  } = props;
 
   assertEmpty(rest);
 
+  const inputRef = useAutoFocus<HTMLInputElement>(autoFocus);
+  const mergedRef = useMergeRefs([ref, inputRef]);
+
   return (
     <AriakitFormProvider>
       <AriakitFormInput
         className={className}
-        ref={ref}
+        ref={mergedRef}
         name={"panel-input"}
         type={"file"}
         accept={accept}
diff --git a/packages/ariakit/src/panel/PanelTextInput.tsx b/packages/ariakit/src/panel/PanelTextInput.tsx
index 91dd1a2394..51b444ca81 100644
--- a/packages/ariakit/src/panel/PanelTextInput.tsx
+++ b/packages/ariakit/src/panel/PanelTextInput.tsx
@@ -4,17 +4,28 @@ import {
 } from "@ariakit/react";
 
 import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
-import { ComponentProps } from "@blocknote/react";
+import { ComponentProps, useAutoFocus, useMergeRefs } from "@blocknote/react";
 import { forwardRef } from "react";
 
 export const PanelTextInput = forwardRef<
   HTMLInputElement,
   ComponentProps["FilePanel"]["TextInput"]
 >((props, ref) => {
-  const { className, value, placeholder, onKeyDown, onChange, ...rest } = props;
+  const {
+    autoFocus,
+    className,
+    value,
+    placeholder,
+    onKeyDown,
+    onChange,
+    ...rest
+  } = props;
 
   assertEmpty(rest);
 
+  const inputRef = useAutoFocus<HTMLInputElement>(autoFocus);
+  const mergedRef = useMergeRefs([ref, inputRef]);
+
   return (
     <AriakitFormProvider>
       <AriakitFormInput
@@ -25,7 +36,7 @@ export const PanelTextInput = forwardRef<
         onChange={onChange}
         onKeyDown={onKeyDown}
         data-test={"embed-input"}
-        ref={ref}
+        ref={mergedRef}
       />
     </AriakitFormProvider>
   );
diff --git a/packages/mantine/src/panel/PanelFileInput.tsx b/packages/mantine/src/panel/PanelFileInput.tsx
index ed2efe8eb1..a1e5ae9ba2 100644
--- a/packages/mantine/src/panel/PanelFileInput.tsx
+++ b/packages/mantine/src/panel/PanelFileInput.tsx
@@ -1,22 +1,33 @@
 import { FileInput as MantineFileInput } from "@mantine/core";
 
 import { assertEmpty } from "@blocknote/core";
-import { ComponentProps } from "@blocknote/react";
+import { ComponentProps, useAutoFocus, useMergeRefs } from "@blocknote/react";
 import { forwardRef } from "react";
 
 export const PanelFileInput = forwardRef<
   HTMLButtonElement,
   ComponentProps["FilePanel"]["FileInput"]
 >((props, ref) => {
-  const { className, accept, value, placeholder, onChange, ...rest } = props;
+  const {
+    autoFocus,
+    className,
+    accept,
+    value,
+    placeholder,
+    onChange,
+    ...rest
+  } = props;
 
   assertEmpty(rest);
 
+  const inputRef = useAutoFocus<HTMLButtonElement>(autoFocus);
+  const mergedRef = useMergeRefs([ref, inputRef]);
+
   return (
     <MantineFileInput
       size={"xs"}
       className={className}
-      ref={ref}
+      ref={mergedRef}
       accept={accept}
       value={value}
       placeholder={placeholder}
diff --git a/packages/mantine/src/panel/PanelTextInput.tsx b/packages/mantine/src/panel/PanelTextInput.tsx
index c5ab726f64..744eccdcfc 100644
--- a/packages/mantine/src/panel/PanelTextInput.tsx
+++ b/packages/mantine/src/panel/PanelTextInput.tsx
@@ -1,23 +1,34 @@
 import { TextInput as MantineTextInput } from "@mantine/core";
 
 import { assertEmpty } from "@blocknote/core";
-import { ComponentProps } from "@blocknote/react";
+import { ComponentProps, useAutoFocus, useMergeRefs } from "@blocknote/react";
 import { forwardRef } from "react";
 
 export const PanelTextInput = forwardRef<
   HTMLInputElement,
   ComponentProps["FilePanel"]["TextInput"]
 >((props, ref) => {
-  const { className, value, placeholder, onKeyDown, onChange, ...rest } = props;
+  const {
+    autoFocus,
+    className,
+    value,
+    placeholder,
+    onKeyDown,
+    onChange,
+    ...rest
+  } = props;
 
   assertEmpty(rest);
 
+  const inputRef = useAutoFocus<HTMLInputElement>(autoFocus);
+  const mergedRef = useMergeRefs([ref, inputRef]);
+
   return (
     <MantineTextInput
       size={"xs"}
       data-test={"embed-input"}
       className={className}
-      ref={ref}
+      ref={mergedRef}
       value={value}
       placeholder={placeholder}
       onKeyDown={onKeyDown}
diff --git a/packages/react/src/components/FilePanel/DefaultTabs/EmbedTab.tsx b/packages/react/src/components/FilePanel/DefaultTabs/EmbedTab.tsx
index 52ef673e3b..f9bec2c9bd 100644
--- a/packages/react/src/components/FilePanel/DefaultTabs/EmbedTab.tsx
+++ b/packages/react/src/components/FilePanel/DefaultTabs/EmbedTab.tsx
@@ -75,6 +75,7 @@ export const EmbedTab = <
         }
       >
         <Components.FilePanel.TextInput
+          autoFocus
           className={"bn-text-input"}
           placeholder={dict.file_panel.embed.url_placeholder}
           value={currentURL}
diff --git a/packages/react/src/components/FilePanel/DefaultTabs/UploadTab.tsx b/packages/react/src/components/FilePanel/DefaultTabs/UploadTab.tsx
index a3b0be2138..240d23d593 100644
--- a/packages/react/src/components/FilePanel/DefaultTabs/UploadTab.tsx
+++ b/packages/react/src/components/FilePanel/DefaultTabs/UploadTab.tsx
@@ -91,6 +91,7 @@ export const UploadTab = <
   return (
     <Components.FilePanel.TabPanel className={"bn-tab-panel"}>
       <Components.FilePanel.FileInput
+        autoFocus
         className="bn-file-input"
         data-test="upload-input"
         accept={accept}
diff --git a/packages/react/src/components/FilePanel/FilePanelController.tsx b/packages/react/src/components/FilePanel/FilePanelController.tsx
index 682dc95f00..9ece7899ca 100644
--- a/packages/react/src/components/FilePanel/FilePanelController.tsx
+++ b/packages/react/src/components/FilePanel/FilePanelController.tsx
@@ -45,7 +45,12 @@ export const FilePanelController = (props: {
         ...props.floatingUIOptions?.useFloatingOptions,
       },
       focusManagerProps: {
-        disabled: true,
+        // Move keyboard focus into the panel when it opens, including when
+        // inserting a file block from the slash menu.
+        disabled: false,
+        // The default panel focuses its input. Custom panels retain the
+        // focus manager's default of focusing their first control.
+        initialFocus: props.filePanel ? 0 : -1,
         ...props.floatingUIOptions?.focusManagerProps,
       },
       elementProps: {
@@ -55,7 +60,7 @@ export const FilePanelController = (props: {
         ...props.floatingUIOptions?.elementProps,
       },
     }),
-    [blockId, editor, filePanel, props.floatingUIOptions],
+    [blockId, editor, filePanel, props.filePanel, props.floatingUIOptions],
   );
 
   const Component = props.filePanel || FilePanel;
diff --git a/packages/react/src/components/FilePanel/a11y/FilePanel.a11y.test.ts b/packages/react/src/components/FilePanel/a11y/FilePanel.a11y.test.ts
new file mode 100644
index 0000000000..cf1767f575
--- /dev/null
+++ b/packages/react/src/components/FilePanel/a11y/FilePanel.a11y.test.ts
@@ -0,0 +1,36 @@
+import { expect, test } from "vite-plus/test";
+import { page, userEvent } from "vite-plus/test/browser";
+import { openEditor, pressKey } from "@root/tests/a11y/helpers.js";
+
+async function openImagePanel() {
+  await pressKey("Tab");
+  await expect.element(page.getByRole("textbox")).toHaveFocus();
+  await userEvent.keyboard("/image");
+  await expect
+    .element(page.getByRole("option", { name: /Image/ }))
+    .toBeVisible();
+  await pressKey("Enter");
+  const panel = page.elementLocator(
+    document.querySelector<HTMLElement>(".bn-panel")!,
+  );
+  await expect.element(panel).toBeVisible();
+  return panel;
+}
+
+test("file panel: Embed URL input receives focus on opening", async () => {
+  await openEditor([{ type: "paragraph" }]);
+  const panel = await openImagePanel();
+  await expect.element(panel.getByPlaceholder("Enter URL")).toHaveFocus();
+  await expect.element(panel).toMatchScreenshot("focus-embed-url.png", {});
+});
+
+test("file panel: Upload button receives focus on opening", async () => {
+  await openEditor([{ type: "paragraph" }], {
+    uploadFile: async () => "/image.svg",
+  });
+  const panel = await openImagePanel();
+  await expect
+    .element(panel.getByRole("button", { name: "Upload image", exact: true }))
+    .toHaveFocus();
+  await expect.element(panel).toMatchScreenshot("focus-upload-button.png", {});
+});
diff --git a/packages/react/src/components/FilePanel/a11y/FilePanel.a11y.test.ts-snapshots/visual/focus-embed-url-chromium-linux.png b/packages/react/src/components/FilePanel/a11y/FilePanel.a11y.test.ts-snapshots/visual/focus-embed-url-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..fc1cd86d321ba50ecc8001a9132be71e55e90f67
GIT binary patch
literal 4240
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

literal 0
HcmV?d00001

diff --git a/packages/react/src/components/FilePanel/a11y/FilePanel.a11y.test.ts-snapshots/visual/focus-upload-button-chromium-linux.png b/packages/react/src/components/FilePanel/a11y/FilePanel.a11y.test.ts-snapshots/visual/focus-upload-button-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..b1516e0fcfa6e110ca002a636d52ca47dcb67092
GIT binary patch
literal 3887
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
Q03ytVJ!ONgIDvckFH)LJW&i*H

literal 0
HcmV?d00001

diff --git a/packages/react/src/editor/ComponentsContext.tsx b/packages/react/src/editor/ComponentsContext.tsx
index 12bd1791ca..95fd15a575 100644
--- a/packages/react/src/editor/ComponentsContext.tsx
+++ b/packages/react/src/editor/ComponentsContext.tsx
@@ -115,6 +115,7 @@ export type ComponentProps = {
       | { children?: undefined; label: string }
     );
     FileInput: {
+      autoFocus?: boolean;
       className?: string;
       accept: string;
       value: File | null;
@@ -126,6 +127,7 @@ export type ComponentProps = {
       children?: ReactNode;
     };
     TextInput: {
+      autoFocus?: boolean;
       className?: string;
       value: string;
       placeholder: string;
diff --git a/packages/shadcn/src/panel/PanelFileInput.tsx b/packages/shadcn/src/panel/PanelFileInput.tsx
index 3c4f2cbc75..120a0502a0 100644
--- a/packages/shadcn/src/panel/PanelFileInput.tsx
+++ b/packages/shadcn/src/panel/PanelFileInput.tsx
@@ -1,5 +1,5 @@
 import { assertEmpty } from "@blocknote/core";
-import { ComponentProps } from "@blocknote/react";
+import { ComponentProps, useAutoFocus, useMergeRefs } from "@blocknote/react";
 import { forwardRef } from "react";
 
 import { useShadCNComponentsContext } from "../ShadCNComponentsContext.js";
@@ -8,17 +8,28 @@ export const PanelFileInput = forwardRef<
   HTMLInputElement,
   ComponentProps["FilePanel"]["FileInput"]
 >((props, ref) => {
-  const { className, accept, value, placeholder, onChange, ...rest } = props;
+  const {
+    autoFocus,
+    className,
+    accept,
+    value,
+    placeholder,
+    onChange,
+    ...rest
+  } = props;
 
   assertEmpty(rest);
 
+  const inputRef = useAutoFocus<HTMLInputElement>(autoFocus);
+  const mergedRef = useMergeRefs([ref, inputRef]);
+
   const ShadCNComponents = useShadCNComponentsContext()!;
 
   return (
     <ShadCNComponents.Input.Input
       type={"file"}
       className={className}
-      ref={ref}
+      ref={mergedRef}
       accept={accept}
       value={value ? value.name : undefined}
       onChange={async (e) => onChange?.(e.target.files![0])}
diff --git a/packages/shadcn/src/panel/PanelTextInput.tsx b/packages/shadcn/src/panel/PanelTextInput.tsx
index 8165271d96..98980dfbea 100644
--- a/packages/shadcn/src/panel/PanelTextInput.tsx
+++ b/packages/shadcn/src/panel/PanelTextInput.tsx
@@ -1,5 +1,5 @@
 import { assertEmpty } from "@blocknote/core";
-import { ComponentProps } from "@blocknote/react";
+import { ComponentProps, useAutoFocus, useMergeRefs } from "@blocknote/react";
 import { forwardRef } from "react";
 
 import { cn } from "../lib/utils.js";
@@ -9,17 +9,28 @@ export const PanelTextInput = forwardRef<
   HTMLInputElement,
   ComponentProps["FilePanel"]["TextInput"]
 >((props, ref) => {
-  const { className, value, placeholder, onKeyDown, onChange, ...rest } = props;
+  const {
+    autoFocus,
+    className,
+    value,
+    placeholder,
+    onKeyDown,
+    onChange,
+    ...rest
+  } = props;
 
   assertEmpty(rest);
 
+  const inputRef = useAutoFocus<HTMLInputElement>(autoFocus);
+  const mergedRef = useMergeRefs([ref, inputRef]);
+
   const ShadCNComponents = useShadCNComponentsContext()!;
 
   return (
     <ShadCNComponents.Input.Input
       data-test={"embed-input"}
       className={cn(className, "w-80 max-w-full")}
-      ref={ref}
+      ref={mergedRef}
       value={value}
       placeholder={placeholder}
       onKeyDown={onKeyDown}
diff --git a/tests/a11y/helpers.tsx b/tests/a11y/helpers.tsx
index 18ec817990..19eb5cc2e6 100644
--- a/tests/a11y/helpers.tsx
+++ b/tests/a11y/helpers.tsx
@@ -1,4 +1,4 @@
-import type { PartialBlock } from "@blocknote/core";
+import type { BlockNoteEditor, PartialBlock } from "@blocknote/core";
 import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
@@ -27,12 +27,14 @@ function EditorFixture({
   initialContent,
   editable,
   theme,
+  uploadFile,
 }: {
   initialContent: PartialBlock[];
   editable: boolean;
   theme: "light" | "dark";
+  uploadFile?: BlockNoteEditor["uploadFile"];
 }) {
-  const editor = useCreateBlockNote({ initialContent });
+  const editor = useCreateBlockNote({ initialContent, uploadFile });
   return (
     <main style={{ maxWidth: 900, margin: "80px auto", padding: 24 }}>
       <h1>BlockNote accessibility fixture</h1>
@@ -48,7 +50,12 @@ export async function openEditor(
   {
     editable = true,
     theme = "light",
-  }: { editable?: boolean; theme?: "light" | "dark" } = {},
+    uploadFile,
+  }: {
+    editable?: boolean;
+    theme?: "light" | "dark";
+    uploadFile?: BlockNoteEditor["uploadFile"];
+  } = {},
 ) {
   await page.viewport(1280, 900);
   await render(
@@ -56,6 +63,7 @@ export async function openEditor(
       initialContent={initialContent}
       editable={editable}
       theme={theme}
+      uploadFile={uploadFile}
     />,
   );
   await expect.element(page.getByRole("textbox")).toBeVisible();

From ae289a4ed112dd3b4534024b3507aaf64ffb3295 Mon Sep 17 00:00:00 2001
From: Matthew Lipski <matthewlipski@gmail.com>
Date: Tue, 20 Oct 2026 20:11:39 +0200
Subject: [PATCH 2/2] Skipped visual snapshots due to them being incorrect

---
 .../FilePanel/a11y/FilePanel.a11y.test.ts        |   2 --
 .../visual/focus-embed-url-chromium-linux.png    | Bin 4240 -> 0 bytes
 .../focus-upload-button-chromium-linux.png       | Bin 3887 -> 0 bytes
 3 files changed, 2 deletions(-)
 delete mode 100644 packages/react/src/components/FilePanel/a11y/FilePanel.a11y.test.ts-snapshots/visual/focus-embed-url-chromium-linux.png
 delete mode 100644 packages/react/src/components/FilePanel/a11y/FilePanel.a11y.test.ts-snapshots/visual/focus-upload-button-chromium-linux.png

diff --git a/packages/react/src/components/FilePanel/a11y/FilePanel.a11y.test.ts b/packages/react/src/components/FilePanel/a11y/FilePanel.a11y.test.ts
index cf1767f575..d2623fcf4f 100644
--- a/packages/react/src/components/FilePanel/a11y/FilePanel.a11y.test.ts
+++ b/packages/react/src/components/FilePanel/a11y/FilePanel.a11y.test.ts
@@ -21,7 +21,6 @@ test("file panel: Embed URL input receives focus on opening", async () => {
   await openEditor([{ type: "paragraph" }]);
   const panel = await openImagePanel();
   await expect.element(panel.getByPlaceholder("Enter URL")).toHaveFocus();
-  await expect.element(panel).toMatchScreenshot("focus-embed-url.png", {});
 });
 
 test("file panel: Upload button receives focus on opening", async () => {
@@ -32,5 +31,4 @@ test("file panel: Upload button receives focus on opening", async () => {
   await expect
     .element(panel.getByRole("button", { name: "Upload image", exact: true }))
     .toHaveFocus();
-  await expect.element(panel).toMatchScreenshot("focus-upload-button.png", {});
 });
diff --git a/packages/react/src/components/FilePanel/a11y/FilePanel.a11y.test.ts-snapshots/visual/focus-embed-url-chromium-linux.png b/packages/react/src/components/FilePanel/a11y/FilePanel.a11y.test.ts-snapshots/visual/focus-embed-url-chromium-linux.png
deleted file mode 100644
index fc1cd86d321ba50ecc8001a9132be71e55e90f67..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 4240
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

diff --git a/packages/react/src/components/FilePanel/a11y/FilePanel.a11y.test.ts-snapshots/visual/focus-upload-button-chromium-linux.png b/packages/react/src/components/FilePanel/a11y/FilePanel.a11y.test.ts-snapshots/visual/focus-upload-button-chromium-linux.png
deleted file mode 100644
index b1516e0fcfa6e110ca002a636d52ca47dcb67092..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3887
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
Q03ytVJ!ONgIDvckFH)LJW&i*H