diff --git a/docs/pages/docs/advanced/component-libraries.mdx b/docs/pages/docs/advanced/component-libraries.mdx
deleted file mode 100644
index 9b11e720ce..0000000000
--- a/docs/pages/docs/advanced/component-libraries.mdx
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: Using Other Component Libraries
-description: While BlockNote's default UI uses the Mantine component library, you can configure it to use other libraries instead.
-imageTitle: Use with Other Component Libraries
-path: /docs/component-libraries
----
-
-import { Callout } from "nextra/components";
-import { Example } from "@/components/example";
-
-# Using Other Component Libraries
-
-While BlockNote's default UI uses the [Mantine](https://mantine.dev/) component library, you can configure it to use other libraries instead.
-
-## Using Ariakit/ShadCN
-
-BlockNote has plug & play support for [Ariakit](https://ariakit.org/) and [ShadCN](https://ui.shadcn.com/). You can switch to them just by importing `BlockNoteView` from either `@blocknote/ariakit` or `@blocknote/shadcn` instead of `@blocknote/mantine`, as well as the corresponding CSS file.
-
-<Example name="basic/ariakit" />
-
-<Example name="basic/shadcn" />
-
-## ShadCN Customization
-
-If you want BlockNote to use customized ShadCN components instead of the default ones, you can pass them using the `shadCNComponents` prop of `BlockNoteView`:
-
-```tsx
-return (
-  <BlockNoteView editor={editor} shadCNComponents={{
-    Select: {
-      SelectTrigger: ...,
-      SelectContent: ...,
-      ...
-    },
-    Button: {
-      ...
-    },
-    ...
-  }} />
-);
-```
-
-You can pass components from the following ShadCN modules:
-
-- Badge
-- Button
-- Card
-- DropdownMenu
-- Form
-- Input
-- Label
-- Popover
-- Select
-- Tabs
-- Toggle
-- Tooltip
-
-<Callout type="warning" emoji="⚠️">
-    To ensure compatibility, your ShadCN components should not use Portals, as styling and CSS variables are scoped to only the editor.
-</Callout>
-
-## Using Your Own Components
-
-If you want to use a different component library to Mantine/Ariakit/ShadCN, you will have to provide your own `BlockNoteView` implementation using the `BlockNoteViewRaw` component and a `ComponentsContext`:
-
-```tsx
-import { BlockSchema, InlineContentSchema, StyleSchema } from "@blocknote/core";
-import {
-  BlockNoteViewRaw,
-  Components,
-  ComponentsContext,
-} from "@blocknote/react";
-import { ComponentProps } from "react";
-
-export const components: Components = {
-  ...
-};
-
-export const BlockNoteView = <
-  BSchema extends BlockSchema,
-  ISchema extends InlineContentSchema,
-  SSchema extends StyleSchema
->(
-  props: ComponentProps<typeof BlockNoteViewRaw<BSchema, ISchema, SSchema>>
-) => {
-  return (
-    <ComponentsContext.Provider value={components}>
-      <BlockNoteViewRaw {...props} />
-    </ComponentsContext.Provider>
-  );
-};
-```
-
-The components you want BlockNote to use should be added to `components`. To see exactly how this object is structured, which components you need to provide, and what props each component should take, see [this source file](https://github.com/TypeCellOS/BlockNote/tree/main/packages/react/src/editor/ComponentsContext.tsx).
-
diff --git a/docs/pages/docs/styling-theming/overriding-css.mdx b/docs/pages/docs/styling-theming/overriding-css.mdx
index dffa489a17..e1322417e0 100644
--- a/docs/pages/docs/styling-theming/overriding-css.mdx
+++ b/docs/pages/docs/styling-theming/overriding-css.mdx
@@ -37,7 +37,7 @@ Within the editor's DOM structure, you'll find many elements have classes with t
 
 `.bn-drag-handle-menu`: Element for the drag handle menu.
 
-`.bn-slash-menu`: Element for the slash menu.
+`.bn-suggestion-menu`: Element for suggestion menu.
 
 ## BlockNote CSS Attributes
 
@@ -52,5 +52,3 @@ For example, `[data-content-type="heading"][data-level="2"]` will select all hea
 ## Mantine Classes
 
 Because BlockNote uses [Mantine](https://mantine.dev/) for its UI, you can also write CSS rules using any of the default Mantine component classes.
-
-
diff --git a/examples/02-ui-components/04-side-menu-buttons/RemoveBlockButton.tsx b/examples/02-ui-components/04-side-menu-buttons/RemoveBlockButton.tsx
index 77cf56f538..c387f67f1e 100644
--- a/examples/02-ui-components/04-side-menu-buttons/RemoveBlockButton.tsx
+++ b/examples/02-ui-components/04-side-menu-buttons/RemoveBlockButton.tsx
@@ -13,6 +13,7 @@ export function RemoveBlockButton(props: SideMenuProps) {
 
   return (
     <Components.SideMenu.Button
+      label="Remove block"
       icon={
         <MdDelete
           size={24}
diff --git a/examples/03-theming/03-theming-css/styles.css b/examples/03-theming/03-theming-css/styles.css
index fb44e1babf..8909238e5f 100644
--- a/examples/03-theming/03-theming-css/styles.css
+++ b/examples/03-theming/03-theming-css/styles.css
@@ -4,6 +4,8 @@
 }
 
 /* Makes slash menu hovered items blue */
-.bn-container[data-theming-css-demo] .bn-slash-menu .mantine-Menu-item[data-hovered] {
+.bn-container[data-theming-css-demo]
+  .bn-suggestion-menu-item[aria-selected="true"],
+.bn-container[data-theming-css-demo] .bn-suggestion-menu-item:hover {
   background-color: blue;
 }
diff --git a/examples/05-custom-schema/03-font-style/App.tsx b/examples/05-custom-schema/03-font-style/App.tsx
index 0035fc1bbb..c64743552d 100644
--- a/examples/05-custom-schema/03-font-style/App.tsx
+++ b/examples/05-custom-schema/03-font-style/App.tsx
@@ -1,5 +1,7 @@
 import { BlockNoteSchema, defaultStyleSpecs } from "@blocknote/core";
 import "@blocknote/core/fonts/inter.css";
+import { BlockNoteView } from "@blocknote/mantine";
+import "@blocknote/mantine/style.css";
 import {
   BasicTextStyleButton,
   BlockTypeSelect,
@@ -16,8 +18,6 @@ import {
   useComponentsContext,
   useCreateBlockNote,
 } from "@blocknote/react";
-import { BlockNoteView } from "@blocknote/mantine";
-import "@blocknote/mantine/style.css";
 import { RiText } from "react-icons/ri";
 
 import { Font } from "./Font";
@@ -45,6 +45,7 @@ const SetFontStyleButton = () => {
 
   return (
     <Components.FormattingToolbar.Button
+      label="Set Font"
       mainTooltip={"Set Font"}
       icon={<RiText />}
       onClick={() => {
diff --git a/packages/ariakit/src/input/Form.tsx b/packages/ariakit/src/input/Form.tsx
index e12de4f09f..40150cf20c 100644
--- a/packages/ariakit/src/input/Form.tsx
+++ b/packages/ariakit/src/input/Form.tsx
@@ -1,9 +1,12 @@
 import * as Ariakit from "@ariakit/react";
+import { assertEmpty } from "@blocknote/core";
 
 import { ComponentProps } from "@blocknote/react";
 
 export const Form = (props: ComponentProps["Generic"]["Form"]["Root"]) => {
-  const { children } = props;
+  const { children, ...rest } = props;
+
+  assertEmpty(rest);
 
   return <Ariakit.FormProvider>{children}</Ariakit.FormProvider>;
 };
diff --git a/packages/ariakit/src/input/TextInput.tsx b/packages/ariakit/src/input/TextInput.tsx
index 4bcb781049..39cfa7aac4 100644
--- a/packages/ariakit/src/input/TextInput.tsx
+++ b/packages/ariakit/src/input/TextInput.tsx
@@ -1,6 +1,6 @@
 import * as Ariakit from "@ariakit/react";
 
-import { mergeCSSClasses } from "@blocknote/core";
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
@@ -19,8 +19,11 @@ export const TextInput = forwardRef<
     onKeyDown,
     onChange,
     onSubmit,
+    ...rest
   } = props;
 
+  assertEmpty(rest);
+
   return (
     <>
       {props.label && (
diff --git a/packages/ariakit/src/menu/Menu.tsx b/packages/ariakit/src/menu/Menu.tsx
index cf2f9dcb83..c111bcdf78 100644
--- a/packages/ariakit/src/menu/Menu.tsx
+++ b/packages/ariakit/src/menu/Menu.tsx
@@ -1,6 +1,6 @@
 import * as Ariakit from "@ariakit/react";
 
-import { mergeCSSClasses } from "@blocknote/core";
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
@@ -9,9 +9,12 @@ export const Menu = (props: ComponentProps["Generic"]["Menu"]["Root"]) => {
     children,
     onOpenChange,
     position,
-    // sub
+    sub, // unused
+    ...rest
   } = props;
 
+  assertEmpty(rest);
+
   return (
     <Ariakit.MenuProvider
       placement={position}
@@ -26,7 +29,14 @@ export const MenuDropdown = forwardRef<
   HTMLDivElement,
   ComponentProps["Generic"]["Menu"]["Dropdown"]
 >((props, ref) => {
-  const { className, children } = props;
+  const {
+    className,
+    children,
+    sub, // unused
+    ...rest
+  } = props;
+
+  assertEmpty(rest);
 
   return (
     <Ariakit.Menu
@@ -41,7 +51,10 @@ export const MenuItem = forwardRef<
   HTMLDivElement,
   ComponentProps["Generic"]["Menu"]["Item"]
 >((props, ref) => {
-  const { className, children, icon, checked, subTrigger, onClick } = props;
+  const { className, children, icon, checked, subTrigger, onClick, ...rest } =
+    props;
+
+  assertEmpty(rest);
 
   if (subTrigger) {
     return (
@@ -73,7 +86,9 @@ export const MenuLabel = forwardRef<
   HTMLDivElement,
   ComponentProps["Generic"]["Menu"]["Label"]
 >((props, ref) => {
-  const { className, children } = props;
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest);
 
   return (
     <Ariakit.MenuGroupLabel
@@ -87,7 +102,9 @@ export const MenuLabel = forwardRef<
 export const MenuTrigger = (
   props: ComponentProps["Generic"]["Menu"]["Trigger"]
 ) => {
-  const { children, sub } = props;
+  const { children, sub, ...rest } = props;
+
+  assertEmpty(rest);
 
   if (sub) {
     return children;
@@ -100,7 +117,9 @@ export const MenuDivider = forwardRef<
   HTMLHRElement,
   ComponentProps["Generic"]["Menu"]["Divider"]
 >((props, ref) => {
-  const { className } = props;
+  const { className, ...rest } = props;
+
+  assertEmpty(rest);
 
   return (
     <Ariakit.MenuSeparator
diff --git a/packages/ariakit/src/panel/Panel.tsx b/packages/ariakit/src/panel/Panel.tsx
index 553c7b6678..4bfda485b6 100644
--- a/packages/ariakit/src/panel/Panel.tsx
+++ b/packages/ariakit/src/panel/Panel.tsx
@@ -1,6 +1,6 @@
 import * as Ariakit from "@ariakit/react";
 
-import { mergeCSSClasses } from "@blocknote/core";
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
@@ -14,10 +14,12 @@ export const Panel = forwardRef<
     defaultOpenTab,
     openTab,
     setOpenTab,
-    // loading,
-    // setLoading,
+    loading, // TODO: implement loading
+    ...rest
   } = props;
 
+  assertEmpty(rest);
+
   return (
     <div
       className={mergeCSSClasses("bn-ak-wrapper", className || "")}
diff --git a/packages/ariakit/src/panel/PanelButton.tsx b/packages/ariakit/src/panel/PanelButton.tsx
index 04c300c18d..c11948bd94 100644
--- a/packages/ariakit/src/panel/PanelButton.tsx
+++ b/packages/ariakit/src/panel/PanelButton.tsx
@@ -1,6 +1,6 @@
 import * as Ariakit from "@ariakit/react";
 
-import { mergeCSSClasses } from "@blocknote/core";
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
@@ -8,12 +8,15 @@ export const PanelButton = forwardRef<
   HTMLButtonElement,
   ComponentProps["ImagePanel"]["Button"]
 >((props, ref) => {
-  const { className, children, onClick } = props;
+  const { className, children, onClick, label, ...rest } = props;
+
+  assertEmpty(rest);
 
   return (
     <Ariakit.Button
       className={mergeCSSClasses("bn-ak-button", className || "")}
       onClick={onClick}
+      aria-label={label}
       ref={ref}>
       {children}
     </Ariakit.Button>
diff --git a/packages/ariakit/src/panel/PanelFileInput.tsx b/packages/ariakit/src/panel/PanelFileInput.tsx
index 36df131840..ca9b622222 100644
--- a/packages/ariakit/src/panel/PanelFileInput.tsx
+++ b/packages/ariakit/src/panel/PanelFileInput.tsx
@@ -1,4 +1,5 @@
 import * as Ariakit from "@ariakit/react";
+import { assertEmpty } from "@blocknote/core";
 
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
@@ -7,7 +8,9 @@ export const PanelFileInput = forwardRef<
   HTMLInputElement,
   ComponentProps["ImagePanel"]["FileInput"]
 >((props, ref) => {
-  const { className, value, placeholder, onChange } = props;
+  const { className, value, placeholder, onChange, ...rest } = props;
+
+  assertEmpty(rest);
 
   return (
     <Ariakit.FormProvider>
diff --git a/packages/ariakit/src/panel/PanelTab.tsx b/packages/ariakit/src/panel/PanelTab.tsx
index 58ed2aba46..224d299cea 100644
--- a/packages/ariakit/src/panel/PanelTab.tsx
+++ b/packages/ariakit/src/panel/PanelTab.tsx
@@ -1,3 +1,4 @@
+import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
@@ -5,7 +6,9 @@ export const PanelTab = forwardRef<
   HTMLDivElement,
   ComponentProps["ImagePanel"]["TabPanel"]
 >((props, ref) => {
-  const { className, children } = props;
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest);
 
   return (
     <div className={className} ref={ref}>
diff --git a/packages/ariakit/src/panel/PanelTextInput.tsx b/packages/ariakit/src/panel/PanelTextInput.tsx
index 3e7f9c2ac4..91f13050b7 100644
--- a/packages/ariakit/src/panel/PanelTextInput.tsx
+++ b/packages/ariakit/src/panel/PanelTextInput.tsx
@@ -1,6 +1,6 @@
 import * as Ariakit from "@ariakit/react";
 
-import { mergeCSSClasses } from "@blocknote/core";
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
@@ -8,7 +8,9 @@ export const PanelTextInput = forwardRef<
   HTMLInputElement,
   ComponentProps["ImagePanel"]["TextInput"]
 >((props, ref) => {
-  const { className, value, placeholder, onKeyDown, onChange } = props;
+  const { className, value, placeholder, onKeyDown, onChange, ...rest } = props;
+
+  assertEmpty(rest);
 
   return (
     <Ariakit.FormProvider>
diff --git a/packages/ariakit/src/popover/Popover.tsx b/packages/ariakit/src/popover/Popover.tsx
index 71adb6f07f..2375c730a1 100644
--- a/packages/ariakit/src/popover/Popover.tsx
+++ b/packages/ariakit/src/popover/Popover.tsx
@@ -1,6 +1,6 @@
 import * as Ariakit from "@ariakit/react";
 
-import { mergeCSSClasses } from "@blocknote/core";
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
@@ -8,7 +8,9 @@ export const PopoverTrigger = forwardRef<
   HTMLButtonElement,
   ComponentProps["Generic"]["Popover"]["Trigger"]
 >((props, ref) => {
-  const { children } = props;
+  const { children, ...rest } = props;
+
+  assertEmpty(rest);
 
   return <Ariakit.PopoverDisclosure render={children as any} ref={ref} />;
 });
@@ -17,7 +19,9 @@ export const PopoverContent = forwardRef<
   HTMLDivElement,
   ComponentProps["Generic"]["Popover"]["Content"]
 >((props, ref) => {
-  const { className, children } = props;
+  const { className, children, variant, ...rest } = props;
+
+  assertEmpty(rest);
 
   return (
     <Ariakit.Popover
@@ -31,7 +35,9 @@ export const PopoverContent = forwardRef<
 export const Popover = (
   props: ComponentProps["Generic"]["Popover"]["Root"]
 ) => {
-  const { children, opened, position } = props;
+  const { children, opened, position, ...rest } = props;
+
+  assertEmpty(rest);
 
   return (
     <Ariakit.PopoverProvider open={opened} placement={position}>
diff --git a/packages/ariakit/src/sideMenu/SideMenu.tsx b/packages/ariakit/src/sideMenu/SideMenu.tsx
index 742112d71c..0a62b80310 100644
--- a/packages/ariakit/src/sideMenu/SideMenu.tsx
+++ b/packages/ariakit/src/sideMenu/SideMenu.tsx
@@ -1,4 +1,5 @@
 import * as Ariakit from "@ariakit/react";
+import { assertEmpty } from "@blocknote/core";
 
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
@@ -7,7 +8,9 @@ export const SideMenu = forwardRef<
   HTMLDivElement,
   ComponentProps["SideMenu"]["Root"]
 >((props, ref) => {
-  const { className, children } = props;
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest);
 
   return (
     <Ariakit.Group className={className} ref={ref}>
diff --git a/packages/ariakit/src/sideMenu/SideMenuButton.tsx b/packages/ariakit/src/sideMenu/SideMenuButton.tsx
index 60ed1b7675..a8eeed8512 100644
--- a/packages/ariakit/src/sideMenu/SideMenuButton.tsx
+++ b/packages/ariakit/src/sideMenu/SideMenuButton.tsx
@@ -1,6 +1,6 @@
 import * as Ariakit from "@ariakit/react";
 
-import { mergeCSSClasses } from "@blocknote/core";
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
@@ -8,16 +8,35 @@ export const SideMenuButton = forwardRef<
   HTMLButtonElement,
   ComponentProps["SideMenu"]["Button"]
 >((props, ref) => {
-  const { className, children, icon, onClick } = props;
+  const {
+    className,
+    children,
+    icon,
+    onClick,
+    label,
+    onDragEnd,
+    onDragStart,
+    draggable,
+    ...rest
+  } = props;
+
+  // false, because rest props can be added by ariakit when button is used as a trigger
+  // assertEmpty in this case is only used at typescript level, not runtime level
+  assertEmpty(rest, false);
 
   return (
     <Ariakit.Button
+      onDragEnd={onDragEnd}
+      onDragStart={onDragStart}
+      draggable={draggable}
+      aria-label={label}
       className={mergeCSSClasses(
         "bn-ak-button bn-ak-secondary",
         className || ""
       )}
       ref={ref}
-      onClick={onClick}>
+      onClick={onClick}
+      {...rest}>
       {icon}
       {children}
     </Ariakit.Button>
diff --git a/packages/ariakit/src/style.css b/packages/ariakit/src/style.css
index 78b42d104c..54825e8bbe 100644
--- a/packages/ariakit/src/style.css
+++ b/packages/ariakit/src/style.css
@@ -17,13 +17,11 @@
 
 .bn-toolbar .bn-ak-button[data-selected] {
   padding-top: 0.125rem;
-  box-shadow: inset 0 0 0 1px var(--border),
-  inset 0 2px 0 var(--border);
+  box-shadow: inset 0 0 0 1px var(--border), inset 0 2px 0 var(--border);
 }
 
 .bn-toolbar .bn-ak-button[data-selected]:where(.dark, .dark *) {
-  box-shadow: inset 0 0 0 1px var(--border),
-  inset 0 1px 1px 1px var(--shadow);
+  box-shadow: inset 0 0 0 1px var(--border), inset 0 1px 1px 1px var(--shadow);
 }
 
 .bn-toolbar .bn-ak-popover {
@@ -45,7 +43,8 @@
   outline-style: none;
 }
 
-.bn-ak-menu-item[data-hovered] {
+.bn-ak-menu-item[aria-selected="true"],
+.bn-ak-menu-item:hover {
   background-color: hsl(204 100% 40%);
   color: hsl(204 20% 100%);
 }
@@ -58,7 +57,8 @@
   overflow: visible;
 }
 
-.bn-suggestion-menu, .bn-color-picker-dropdown {
+.bn-suggestion-menu,
+.bn-color-picker-dropdown {
   overflow: scroll;
 }
 
@@ -78,10 +78,8 @@
   --border: rgb(0 0 0/13%);
   --highlight: rgb(255 255 255/20%);
   --shadow: rgb(0 0 0/10%);
-  box-shadow: inset 0 0 0 1px var(--border),
-  inset 0 2px 0 var(--highlight),
-  inset 0 -1px 0 var(--shadow),
-  0 1px 1px var(--shadow);
+  box-shadow: inset 0 0 0 1px var(--border), inset 0 2px 0 var(--highlight),
+    inset 0 -1px 0 var(--shadow), 0 1px 1px var(--shadow);
   font-size: 0.7rem;
   border-radius: 4px;
   padding-inline: 4px;
@@ -111,7 +109,8 @@
   width: fit-content;
 }
 
-.bn-side-menu, .bn-table-handle {
+.bn-side-menu,
+.bn-table-handle {
   color: gray;
 }
 
@@ -119,12 +118,14 @@
   color: hsl(204 20% 100%);
 }
 
-.bn-ak-tab, .bn-file-input {
+.bn-ak-tab,
+.bn-file-input {
   background-color: transparent;
   color: black;
 }
 
-.bn-ak-tab:where(.dark, .dark *), .bn-file-input:where(.dark, .dark *) {
+.bn-ak-tab:where(.dark, .dark *),
+.bn-file-input:where(.dark, .dark *) {
   color: white;
 }
 
@@ -132,4 +133,4 @@
   align-items: center;
   display: flex;
   flex-direction: column;
-}
\ No newline at end of file
+}
diff --git a/packages/ariakit/src/suggestionMenu/SuggestionMenu.tsx b/packages/ariakit/src/suggestionMenu/SuggestionMenu.tsx
index 4229250989..31ada1bd77 100644
--- a/packages/ariakit/src/suggestionMenu/SuggestionMenu.tsx
+++ b/packages/ariakit/src/suggestionMenu/SuggestionMenu.tsx
@@ -1,6 +1,6 @@
 import * as Ariakit from "@ariakit/react";
 
-import { mergeCSSClasses } from "@blocknote/core";
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
@@ -8,11 +8,15 @@ export const SuggestionMenu = forwardRef<
   HTMLDivElement,
   ComponentProps["SuggestionMenu"]["Root"]
 >((props, ref) => {
-  const { className, children } = props;
+  const { className, children, id, ...rest } = props;
+
+  assertEmpty(rest);
 
   return (
     <Ariakit.Group
       className={mergeCSSClasses("bn-ak-menu", className || "")}
+      id={id}
+      role="listbox"
       ref={ref}>
       {children}
     </Ariakit.Group>
diff --git a/packages/ariakit/src/suggestionMenu/SuggestionMenuEmptyItem.tsx b/packages/ariakit/src/suggestionMenu/SuggestionMenuEmptyItem.tsx
index 9729f0685b..82eee48bef 100644
--- a/packages/ariakit/src/suggestionMenu/SuggestionMenuEmptyItem.tsx
+++ b/packages/ariakit/src/suggestionMenu/SuggestionMenuEmptyItem.tsx
@@ -1,4 +1,4 @@
-import { mergeCSSClasses } from "@blocknote/core";
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
@@ -6,7 +6,9 @@ export const SuggestionMenuEmptyItem = forwardRef<
   HTMLDivElement,
   ComponentProps["SuggestionMenu"]["EmptyItem"]
 >((props, ref) => {
-  const { className, children } = props;
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest);
 
   return (
     <div
diff --git a/packages/ariakit/src/suggestionMenu/SuggestionMenuItem.tsx b/packages/ariakit/src/suggestionMenu/SuggestionMenuItem.tsx
index a6cdee6b26..a706d83e5a 100644
--- a/packages/ariakit/src/suggestionMenu/SuggestionMenuItem.tsx
+++ b/packages/ariakit/src/suggestionMenu/SuggestionMenuItem.tsx
@@ -1,59 +1,41 @@
-import { mergeCSSClasses } from "@blocknote/core";
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
-import { forwardRef, useCallback } from "react";
+import { forwardRef } from "react";
 
 export const SuggestionMenuItem = forwardRef<
   HTMLDivElement,
   ComponentProps["SuggestionMenu"]["Item"]
 >((props, ref) => {
-  const {
-    className,
-    title,
-    subtext,
-    // group,
-    icon,
-    badge,
-    // aliases,
-    // onItemClick,
-    isSelected,
-    setSelected,
-    onClick,
-  } = props;
+  const { className, item, isSelected, onClick, id, ...rest } = props;
 
-  const handleMouseLeave = useCallback(() => {
-    setSelected?.(false);
-  }, [setSelected]);
-
-  const handleMouseEnter = useCallback(() => {
-    setSelected?.(true);
-  }, [setSelected]);
+  assertEmpty(rest);
 
   return (
     <div
-      // component="div"
       className={mergeCSSClasses("bn-ak-menu-item", className || "")}
       ref={ref}
+      id={id}
       onClick={onClick}
-      // Ensures an item selected with both mouse & keyboard doesn't get deselected on mouse leave.
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      data-hovered={isSelected ? "" : undefined}>
-      {icon && (
+      role="option"
+      aria-selected={isSelected || undefined}>
+      {item.icon && (
         <div
           className="bn-ak-suggestion-menu-item-section"
           data-position="left">
-          {icon}
+          {item.icon}
         </div>
       )}
       <div className="bn-ak-suggestion-menu-item-body">
-        <div className="bn-ak-suggestion-menu-item-title">{title}</div>
-        <div className="bn-ak-suggestion-menu-item-subtitle">{subtext}</div>
+        <div className="bn-ak-suggestion-menu-item-title">{item.title}</div>
+        <div className="bn-ak-suggestion-menu-item-subtitle">
+          {item.subtext}
+        </div>
       </div>
-      {badge && (
+      {item.badge && (
         <div
           data-position="right"
           className="bn-ak-suggestion-menu-item-section">
-          <div>{badge}</div>
+          <div>{item.badge}</div>
         </div>
       )}
     </div>
diff --git a/packages/ariakit/src/suggestionMenu/SuggestionMenuLabel.tsx b/packages/ariakit/src/suggestionMenu/SuggestionMenuLabel.tsx
index 63e77d2cab..b4b563640d 100644
--- a/packages/ariakit/src/suggestionMenu/SuggestionMenuLabel.tsx
+++ b/packages/ariakit/src/suggestionMenu/SuggestionMenuLabel.tsx
@@ -1,4 +1,4 @@
-import { mergeCSSClasses } from "@blocknote/core";
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
@@ -6,7 +6,9 @@ export const SuggestionMenuLabel = forwardRef<
   HTMLDivElement,
   ComponentProps["SuggestionMenu"]["Label"]
 >((props, ref) => {
-  const { className, children } = props;
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest);
 
   return (
     <div
diff --git a/packages/ariakit/src/suggestionMenu/SuggestionMenuLoader.tsx b/packages/ariakit/src/suggestionMenu/SuggestionMenuLoader.tsx
index 044fbf6c45..ff43ed5ea8 100644
--- a/packages/ariakit/src/suggestionMenu/SuggestionMenuLoader.tsx
+++ b/packages/ariakit/src/suggestionMenu/SuggestionMenuLoader.tsx
@@ -1,3 +1,4 @@
+import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
@@ -5,7 +6,9 @@ export const SuggestionMenuLoader = forwardRef<
   HTMLDivElement,
   ComponentProps["SuggestionMenu"]["Loader"]
 >((props, ref) => {
-  const { className, children } = props;
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest);
 
   return (
     <div className={className} ref={ref}>
diff --git a/packages/ariakit/src/tableHandle/TableHandle.tsx b/packages/ariakit/src/tableHandle/TableHandle.tsx
index 4c798d6637..7a1293f04f 100644
--- a/packages/ariakit/src/tableHandle/TableHandle.tsx
+++ b/packages/ariakit/src/tableHandle/TableHandle.tsx
@@ -1,6 +1,6 @@
 import * as Ariakit from "@ariakit/react";
 
-import { mergeCSSClasses } from "@blocknote/core";
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
@@ -15,9 +15,14 @@ export const TableHandle = forwardRef<
     onDragStart,
     onDragEnd,
     style,
+    label,
     ...rest
   } = props;
 
+  // false, because rest props can be added by ariakit when button is used as a trigger
+  // assertEmpty in this case is only used at typescript level, not runtime level
+  assertEmpty(rest, false);
+
   return (
     <Ariakit.Button
       className={mergeCSSClasses(
@@ -25,6 +30,7 @@ export const TableHandle = forwardRef<
         className || ""
       )}
       ref={ref}
+      aria-label={label}
       draggable={draggable}
       onDragStart={onDragStart}
       onDragEnd={onDragEnd}
diff --git a/packages/ariakit/src/toolbar/Toolbar.tsx b/packages/ariakit/src/toolbar/Toolbar.tsx
index c47874b0c9..a617883552 100644
--- a/packages/ariakit/src/toolbar/Toolbar.tsx
+++ b/packages/ariakit/src/toolbar/Toolbar.tsx
@@ -1,6 +1,6 @@
 import * as Ariakit from "@ariakit/react";
 
-import { mergeCSSClasses } from "@blocknote/core";
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
@@ -9,7 +9,9 @@ type ToolbarProps = ComponentProps["FormattingToolbar"]["Root"] &
 
 export const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(
   (props, ref) => {
-    const { className, children, onMouseEnter, onMouseLeave } = props;
+    const { className, children, onMouseEnter, onMouseLeave, ...rest } = props;
+
+    assertEmpty(rest);
 
     return (
       <Ariakit.Toolbar
diff --git a/packages/ariakit/src/toolbar/ToolbarButton.tsx b/packages/ariakit/src/toolbar/ToolbarButton.tsx
index 5ba4f5baef..9ac6cec091 100644
--- a/packages/ariakit/src/toolbar/ToolbarButton.tsx
+++ b/packages/ariakit/src/toolbar/ToolbarButton.tsx
@@ -1,6 +1,6 @@
 import * as Ariakit from "@ariakit/react";
 
-import { isSafari, mergeCSSClasses } from "@blocknote/core";
+import { assertEmpty, isSafari, mergeCSSClasses } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
@@ -21,15 +21,21 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
       isSelected,
       isDisabled,
       onClick,
+      label,
       ...rest
     } = props;
 
+    // false, because rest props can be added by ariakit when button is used as a trigger
+    // assertEmpty in this case is only used at typescript level, not runtime level
+    assertEmpty(rest, false);
+
     return (
       <Ariakit.TooltipProvider>
         <Ariakit.TooltipAnchor
           className="link"
           render={
             <Ariakit.ToolbarItem
+              aria-label={label}
               className={mergeCSSClasses(
                 "bn-ak-button bn-ak-secondary",
                 className || ""
@@ -42,6 +48,7 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
                 }
               }}
               onClick={onClick}
+              aria-pressed={isSelected}
               data-selected={isSelected ? "true" : undefined}
               data-test={
                 props.mainTooltip.slice(0, 1).toLowerCase() +
@@ -58,7 +65,7 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
         />
         <Ariakit.Tooltip className="bn-ak-tooltip">
           <span>{mainTooltip}</span>
-          <span>{secondaryTooltip}</span>
+          {secondaryTooltip && <span>{secondaryTooltip}</span>}
         </Ariakit.Tooltip>
       </Ariakit.TooltipProvider>
     );
diff --git a/packages/ariakit/src/toolbar/ToolbarSelect.tsx b/packages/ariakit/src/toolbar/ToolbarSelect.tsx
index 930a281380..14edee97b0 100644
--- a/packages/ariakit/src/toolbar/ToolbarSelect.tsx
+++ b/packages/ariakit/src/toolbar/ToolbarSelect.tsx
@@ -1,14 +1,16 @@
 import * as Ariakit from "@ariakit/react";
 
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
-import { mergeCSSClasses } from "@blocknote/core";
 import { forwardRef } from "react";
 
 export const ToolbarSelect = forwardRef<
   HTMLDivElement,
   ComponentProps["FormattingToolbar"]["Select"]
 >((props, ref) => {
-  const { className, items, isDisabled } = props;
+  const { className, items, isDisabled, ...rest } = props;
+
+  assertEmpty(rest);
 
   const selectedItem = props.items.filter((p) => p.isSelected)[0];
 
diff --git a/packages/core/src/editor/BlockNoteEditor.ts b/packages/core/src/editor/BlockNoteEditor.ts
index 3365474764..7e2396040d 100644
--- a/packages/core/src/editor/BlockNoteEditor.ts
+++ b/packages/core/src/editor/BlockNoteEditor.ts
@@ -781,8 +781,6 @@ export class BlockNoteEditor<
    * @param styles The styles to add.
    */
   public addStyles(styles: Styles<SSchema>) {
-    this._tiptapEditor.view.focus();
-
     for (const [style, value] of Object.entries(styles)) {
       const config = this.schema.styleSchema[style];
       if (!config) {
@@ -803,8 +801,6 @@ export class BlockNoteEditor<
    * @param styles The styles to remove.
    */
   public removeStyles(styles: Styles<SSchema>) {
-    this._tiptapEditor.view.focus();
-
     for (const style of Object.keys(styles)) {
       this._tiptapEditor.commands.unsetMark(style);
     }
@@ -815,8 +811,6 @@ export class BlockNoteEditor<
    * @param styles The styles to toggle.
    */
   public toggleStyles(styles: Styles<SSchema>) {
-    this._tiptapEditor.view.focus();
-
     for (const [style, value] of Object.entries(styles)) {
       const config = this.schema.styleSchema[style];
       if (!config) {
diff --git a/packages/core/src/editor/BlockNoteExtensions.ts b/packages/core/src/editor/BlockNoteExtensions.ts
index 3ce839ba95..a828fd0d49 100644
--- a/packages/core/src/editor/BlockNoteExtensions.ts
+++ b/packages/core/src/editor/BlockNoteExtensions.ts
@@ -1,4 +1,4 @@
-import { Extensions, extensions } from "@tiptap/core";
+import { Extension, Extensions, extensions } from "@tiptap/core";
 
 import type { BlockNoteEditor } from "./BlockNoteEditor";
 
@@ -85,10 +85,26 @@ export const getBlockNoteExtensions = <
     BackgroundColorExtension,
     TextAlignmentExtension,
 
+    // make sure escape blurs editor, so that we can tab to other elements in the host page (accessibility)
+    Extension.create({
+      name: "OverrideEscape",
+      addKeyboardShortcuts() {
+        return {
+          Escape: () => {
+            if (opts.editor.suggestionMenus.shown) {
+              // escape is handled by suggestionmenu
+              return false;
+            }
+            return this.editor.commands.blur();
+          },
+        };
+      },
+    }),
+
     // nodes
     Doc,
     BlockContainer.configure({
-      editor: opts.editor as any,
+      editor: opts.editor,
       domAttributes: opts.domAttributes,
     }),
     BlockGroup.configure({
diff --git a/packages/core/src/editor/BlockNoteTipTapEditor.ts b/packages/core/src/editor/BlockNoteTipTapEditor.ts
index 8aee5c7f75..6857c6f0e7 100644
--- a/packages/core/src/editor/BlockNoteTipTapEditor.ts
+++ b/packages/core/src/editor/BlockNoteTipTapEditor.ts
@@ -126,12 +126,15 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
   private createViewAlternative() {
     // Without queueMicrotask, custom IC / styles will give a React FlushSync error
     queueMicrotask(() => {
-      this.view = new EditorView(this.options.element, {
-        ...this.options.editorProps,
-        // @ts-ignore
-        dispatchTransaction: this.dispatchTransaction.bind(this),
-        state: this.state,
-      });
+      this.view = new EditorView(
+        { mount: this.options.element as any }, // use mount option so that we reuse the existing element instead of creating a new one
+        {
+          ...this.options.editorProps,
+          // @ts-ignore
+          dispatchTransaction: this.dispatchTransaction.bind(this),
+          state: this.state,
+        }
+      );
 
       // `editor.view` is not yet available at this time.
       // Therefore we will add all plugins and node views directly afterwards.
diff --git a/packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts b/packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts
index b1b329081a..3e60b762e6 100644
--- a/packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts
+++ b/packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts
@@ -1,5 +1,5 @@
 import { isNodeSelection, posToDOMRect } from "@tiptap/core";
-import { EditorState, Plugin, PluginKey } from "prosemirror-state";
+import { EditorState, Plugin, PluginKey, PluginView } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
@@ -9,7 +9,7 @@ import { EventEmitter } from "../../util/EventEmitter";
 
 export type FormattingToolbarState = UiElementPosition;
 
-export class FormattingToolbarView {
+export class FormattingToolbarView implements PluginView {
   public state?: FormattingToolbarState;
   public emitUpdate: () => void;
 
@@ -48,9 +48,6 @@ export class FormattingToolbarView {
     pmView.dom.addEventListener("dragstart", this.dragHandler);
     pmView.dom.addEventListener("dragover", this.dragHandler);
 
-    pmView.dom.addEventListener("focus", this.focusHandler);
-    pmView.dom.addEventListener("blur", this.blurHandler);
-
     document.addEventListener("scroll", this.scrollHandler);
   }
 
@@ -71,42 +68,6 @@ export class FormattingToolbarView {
     }
   };
 
-  focusHandler = () => {
-    // we use `setTimeout` to make sure `selection` is already updated
-    setTimeout(() => this.update(this.pmView));
-  };
-
-  blurHandler = (event: FocusEvent) => {
-    if (this.preventHide) {
-      this.preventHide = false;
-
-      return;
-    }
-
-    const editorWrapper = this.pmView.dom.parentElement!;
-
-    // Checks if the focus is moving to an element outside the editor. If it is,
-    // the toolbar is hidden.
-    if (
-      // An element is clicked.
-      event &&
-      event.relatedTarget &&
-      // Element is inside the editor.
-      (editorWrapper === (event.relatedTarget as Node) ||
-        editorWrapper.contains(event.relatedTarget as Node) ||
-        (event.relatedTarget as HTMLElement).matches(
-          ".bn-ui-container, .bn-ui-container *"
-        ))
-    ) {
-      return;
-    }
-
-    if (this.state?.show) {
-      this.state.show = false;
-      this.emitUpdate();
-    }
-  };
-
   scrollHandler = () => {
     if (this.state?.show) {
       this.state.referencePos = this.getSelectionBoundingBox();
@@ -177,12 +138,16 @@ export class FormattingToolbarView {
     this.pmView.dom.removeEventListener("dragstart", this.dragHandler);
     this.pmView.dom.removeEventListener("dragover", this.dragHandler);
 
-    this.pmView.dom.removeEventListener("focus", this.focusHandler);
-    this.pmView.dom.removeEventListener("blur", this.blurHandler);
-
     document.removeEventListener("scroll", this.scrollHandler);
   }
 
+  closeMenu = () => {
+    if (this.state?.show) {
+      this.state.show = false;
+      this.emitUpdate();
+    }
+  };
+
   getSelectionBoundingBox() {
     const { state } = this.pmView;
     const { selection } = state;
@@ -222,10 +187,25 @@ export class FormattingToolbarProsemirrorPlugin extends EventEmitter<any> {
         });
         return this.view;
       },
+      props: {
+        handleKeyDown: (_view, event: KeyboardEvent) => {
+          if (event.key === "Escape" && this.shown) {
+            this.view!.closeMenu();
+            return true;
+          }
+          return false;
+        },
+      },
     });
   }
 
+  public get shown() {
+    return this.view?.state?.show || false;
+  }
+
   public onUpdate(callback: (state: FormattingToolbarState) => void) {
     return this.on("update", callback);
   }
+
+  public closeMenu = () => this.view!.closeMenu();
 }
diff --git a/packages/core/src/extensions/ImagePanel/ImageToolbarPlugin.ts b/packages/core/src/extensions/ImagePanel/ImageToolbarPlugin.ts
index 516f7f2852..d83c7879f3 100644
--- a/packages/core/src/extensions/ImagePanel/ImageToolbarPlugin.ts
+++ b/packages/core/src/extensions/ImagePanel/ImageToolbarPlugin.ts
@@ -1,15 +1,15 @@
-import { EditorState, Plugin, PluginKey } from "prosemirror-state";
+import { EditorState, Plugin, PluginKey, PluginView } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 
+import { DefaultBlockSchema } from "../../blocks/defaultBlocks";
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+import { UiElementPosition } from "../../extensions-shared/UiElementPosition";
 import type {
   BlockFromConfig,
   InlineContentSchema,
   StyleSchema,
 } from "../../schema";
-import { UiElementPosition } from "../../extensions-shared/UiElementPosition";
 import { EventEmitter } from "../../util/EventEmitter";
-import { DefaultBlockSchema } from "../../blocks/defaultBlocks";
 
 export type ImagePanelState<
   I extends InlineContentSchema,
@@ -22,7 +22,8 @@ export type ImagePanelState<
 export class ImagePanelView<
   I extends InlineContentSchema,
   S extends StyleSchema
-> {
+> implements PluginView
+{
   public state?: ImagePanelState<I, S>;
   public emitUpdate: () => void;
 
@@ -45,8 +46,6 @@ export class ImagePanelView<
 
     pmView.dom.addEventListener("dragstart", this.dragstartHandler);
 
-    pmView.dom.addEventListener("blur", this.blurHandler);
-
     document.addEventListener("scroll", this.scrollHandler);
   }
 
@@ -65,28 +64,6 @@ export class ImagePanelView<
     }
   };
 
-  blurHandler = (event: FocusEvent) => {
-    const editorWrapper = this.pmView.dom.parentElement!;
-
-    // Checks if the focus is moving to an element outside the editor. If it is,
-    // the panel is hidden.
-    if (
-      // An element is clicked.
-      event &&
-      event.relatedTarget &&
-      // Element is inside the editor.
-      (editorWrapper === (event.relatedTarget as Node) ||
-        editorWrapper.contains(event.relatedTarget as Node))
-    ) {
-      return;
-    }
-
-    if (this.state?.show) {
-      this.state.show = false;
-      this.emitUpdate();
-    }
-  };
-
   scrollHandler = () => {
     if (this.state?.show) {
       const blockElement = document.querySelector(
@@ -131,13 +108,18 @@ export class ImagePanelView<
     }
   }
 
+  closeMenu = () => {
+    if (this.state?.show) {
+      this.state.show = false;
+      this.emitUpdate();
+    }
+  };
+
   destroy() {
     this.pmView.dom.removeEventListener("mousedown", this.mouseDownHandler);
 
     this.pmView.dom.removeEventListener("dragstart", this.dragstartHandler);
 
-    this.pmView.dom.removeEventListener("blur", this.blurHandler);
-
     document.removeEventListener("scroll", this.scrollHandler);
   }
 }
@@ -170,6 +152,15 @@ export class ImagePanelProsemirrorPlugin<
         );
         return this.view;
       },
+      props: {
+        handleKeyDown: (_view, event: KeyboardEvent) => {
+          if (event.key === "Escape" && this.shown) {
+            this.view!.closeMenu();
+            return true;
+          }
+          return false;
+        },
+      },
       state: {
         init: () => {
           return {
@@ -189,7 +180,13 @@ export class ImagePanelProsemirrorPlugin<
     });
   }
 
+  public get shown() {
+    return this.view?.state?.show || false;
+  }
+
   public onUpdate(callback: (state: ImagePanelState<I, S>) => void) {
     return this.on("update", callback);
   }
+
+  public closeMenu = () => this.view!.closeMenu();
 }
diff --git a/packages/core/src/extensions/LinkToolbar/LinkToolbarPlugin.ts b/packages/core/src/extensions/LinkToolbar/LinkToolbarPlugin.ts
index 7fd9cde3a4..a50e0d78a5 100644
--- a/packages/core/src/extensions/LinkToolbar/LinkToolbarPlugin.ts
+++ b/packages/core/src/extensions/LinkToolbar/LinkToolbarPlugin.ts
@@ -1,11 +1,11 @@
 import { getMarkRange, posToDOMRect, Range } from "@tiptap/core";
 import { EditorView } from "@tiptap/pm/view";
 import { Mark } from "prosemirror-model";
-import { Plugin, PluginKey } from "prosemirror-state";
+import { Plugin, PluginKey, PluginView } from "prosemirror-state";
 
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
-import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
 import { UiElementPosition } from "../../extensions-shared/UiElementPosition";
+import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
 import { EventEmitter } from "../../util/EventEmitter";
 
 export type LinkToolbarState = UiElementPosition & {
@@ -15,7 +15,7 @@ export type LinkToolbarState = UiElementPosition & {
   text: string;
 };
 
-class LinkToolbarView {
+class LinkToolbarView implements PluginView {
   public state?: LinkToolbarState;
   public emitUpdate: () => void;
 
@@ -258,6 +258,13 @@ class LinkToolbarView {
     }
   }
 
+  closeMenu = () => {
+    if (this.state?.show) {
+      this.state.show = false;
+      this.emitUpdate();
+    }
+  };
+
   destroy() {
     this.pmView.dom.removeEventListener("mouseover", this.mouseOverHandler);
     document.removeEventListener("scroll", this.scrollHandler);
@@ -285,6 +292,15 @@ export class LinkToolbarProsemirrorPlugin<
         });
         return this.view;
       },
+      props: {
+        handleKeyDown: (_view, event: KeyboardEvent) => {
+          if (event.key === "Escape" && this.shown) {
+            this.view!.closeMenu();
+            return true;
+          }
+          return false;
+        },
+      },
     });
   }
 
@@ -327,4 +343,10 @@ export class LinkToolbarProsemirrorPlugin<
   public stopHideTimer = () => {
     this.view!.stopMenuUpdateTimer();
   };
+
+  public get shown() {
+    return this.view?.state?.show || false;
+  }
+
+  public closeMenu = () => this.view!.closeMenu();
 }
diff --git a/packages/core/src/extensions/SideMenu/SideMenuPlugin.ts b/packages/core/src/extensions/SideMenu/SideMenuPlugin.ts
index 9a262c4801..58cf687c58 100644
--- a/packages/core/src/extensions/SideMenu/SideMenuPlugin.ts
+++ b/packages/core/src/extensions/SideMenu/SideMenuPlugin.ts
@@ -373,11 +373,12 @@ export class SideMenuView<
   };
 
   onKeyDown = (_event: KeyboardEvent) => {
-    if (this.state?.show) {
+    if (this.state?.show && this.editor.isFocused()) {
+      // Typing in editor should hide side menu
       this.state.show = false;
       this.emitUpdate(this.state);
+      this.menuFrozen = false;
     }
-    this.menuFrozen = false;
   };
 
   onMouseDown = (_event: MouseEvent) => {
diff --git a/packages/core/src/extensions/SuggestionMenu/SuggestionPlugin.ts b/packages/core/src/extensions/SuggestionMenu/SuggestionPlugin.ts
index d24ab7279c..b2a9056d0d 100644
--- a/packages/core/src/extensions/SuggestionMenu/SuggestionPlugin.ts
+++ b/packages/core/src/extensions/SuggestionMenu/SuggestionPlugin.ts
@@ -3,8 +3,8 @@ import { EditorState, Plugin, PluginKey } from "prosemirror-state";
 import { Decoration, DecorationSet, EditorView } from "prosemirror-view";
 
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
-import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
 import { UiElementPosition } from "../../extensions-shared/UiElementPosition";
+import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
 import { EventEmitter } from "../../util/EventEmitter";
 
 const findBlock = findParentNode((node) => node.type.name === "blockContainer");
@@ -18,7 +18,7 @@ class SuggestionMenuView<
   I extends InlineContentSchema,
   S extends StyleSchema
 > {
-  private state?: SuggestionMenuState;
+  public state?: SuggestionMenuState;
   public emitUpdate: (triggerCharacter: string) => void;
 
   pluginState: SuggestionPluginState;
@@ -339,6 +339,10 @@ export class SuggestionMenuProseMirrorPlugin<
   closeMenu = () => this.view!.closeMenu();
 
   clearQuery = () => this.view!.clearQuery();
+
+  public get shown() {
+    return this.view?.state?.show || false;
+  }
 }
 
 export function createSuggestionMenu<
diff --git a/packages/core/src/i18n/locales/en.ts b/packages/core/src/i18n/locales/en.ts
index 3efd049612..bb324bc89a 100644
--- a/packages/core/src/i18n/locales/en.ts
+++ b/packages/core/src/i18n/locales/en.ts
@@ -69,6 +69,10 @@ export const en = {
     add_button: "Add Image",
   },
   // from react package:
+  side_menu: {
+    add_block_label: "Add block",
+    drag_handle_label: "Open block menu",
+  },
   drag_handle: {
     delete_menuitem: "Delete",
     colors_menuitem: "Colors",
diff --git a/packages/core/src/i18n/locales/nl.ts b/packages/core/src/i18n/locales/nl.ts
index be0cf48363..d61bf2530f 100644
--- a/packages/core/src/i18n/locales/nl.ts
+++ b/packages/core/src/i18n/locales/nl.ts
@@ -71,6 +71,10 @@ export const nl: Dictionary = {
     add_button: "Afbeelding toevoegen",
   },
   // from react package:
+  side_menu: {
+    add_block_label: "Nieuw blok",
+    drag_handle_label: "Open blok menu",
+  },
   drag_handle: {
     delete_menuitem: "Verwijder",
     colors_menuitem: "Kleuren",
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 1a70105d11..34cbae5a64 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -27,5 +27,5 @@ export * from "./api/nodeConversions/nodeConversions";
 export * from "./api/testUtil/partialBlockTestUtil";
 export * from "./extensions/UniqueID/UniqueID";
 export * from "./i18n/dictionary";
-export { UnreachableCaseError } from "./util/typescript";
+export { UnreachableCaseError, assertEmpty } from "./util/typescript";
 export { locales };
diff --git a/packages/core/src/pm-nodes/BlockContainer.ts b/packages/core/src/pm-nodes/BlockContainer.ts
index 73015220b8..530315ea07 100644
--- a/packages/core/src/pm-nodes/BlockContainer.ts
+++ b/packages/core/src/pm-nodes/BlockContainer.ts
@@ -62,7 +62,7 @@ declare module "@tiptap/core" {
  */
 export const BlockContainer = Node.create<{
   domAttributes?: BlockNoteDOMAttributes;
-  editor: BlockNoteEditor<BlockSchema, InlineContentSchema, StyleSchema>;
+  editor: BlockNoteEditor<any, any, any>;
 }>({
   name: "blockContainer",
   group: "blockContainer",
@@ -686,10 +686,26 @@ export const BlockContainer = Node.create<{
       // Always returning true for tab key presses ensures they're not captured by the browser. Otherwise, they blur the
       // editor since the browser will try to use tab for keyboard navigation.
       Tab: () => {
+        if (
+          this.options.editor.formattingToolbar?.shown ||
+          this.options.editor.linkToolbar?.shown ||
+          this.options.editor.imagePanel?.shown
+        ) {
+          // don't handle tabs if a toolbar is shown, so we can tab into / out of it
+          return false;
+        }
         this.editor.commands.sinkListItem("blockContainer");
         return true;
       },
       "Shift-Tab": () => {
+        if (
+          this.options.editor.formattingToolbar?.shown ||
+          this.options.editor.linkToolbar?.shown ||
+          this.options.editor.imagePanel?.shown
+        ) {
+          // don't handle tabs if a toolbar is shown, so we can tab into / out of it
+          return false;
+        }
         this.editor.commands.liftListItem("blockContainer");
         return true;
       },
diff --git a/packages/core/src/util/typescript.ts b/packages/core/src/util/typescript.ts
index edda7588e9..feb2f59134 100644
--- a/packages/core/src/util/typescript.ts
+++ b/packages/core/src/util/typescript.ts
@@ -4,5 +4,13 @@ export class UnreachableCaseError extends Error {
   }
 }
 
+export function assertEmpty(obj: Record<string, never>, throwError = true) {
+  const { "data-test": dataTest, ...rest } = obj; // exclude data-test
+
+  if (Object.keys(rest).length > 0 && throwError) {
+    throw new Error("Object must be empty " + JSON.stringify(obj));
+  }
+}
+
 // TODO: change for built-in version of typescript 5.4 after upgrade
 export type NoInfer<T> = [T][T extends any ? 0 : never];
diff --git a/packages/mantine/src/form/TextInput.tsx b/packages/mantine/src/form/TextInput.tsx
index db4a76a1c6..917ac5953a 100644
--- a/packages/mantine/src/form/TextInput.tsx
+++ b/packages/mantine/src/form/TextInput.tsx
@@ -1,5 +1,6 @@
 import * as Mantine from "@mantine/core";
 
+import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
@@ -18,8 +19,11 @@ export const TextInput = forwardRef<
     onKeyDown,
     onChange,
     onSubmit,
+    ...rest
   } = props;
 
+  assertEmpty(rest);
+
   return (
     <Mantine.TextInput
       size={"xs"}
@@ -30,6 +34,7 @@ export const TextInput = forwardRef<
       leftSection={icon}
       value={value}
       autoFocus={autoFocus}
+      data-autofocus={autoFocus ? "true" : undefined}
       placeholder={placeholder}
       onKeyDown={onKeyDown}
       onChange={onChange}
diff --git a/packages/mantine/src/menu/Menu.tsx b/packages/mantine/src/menu/Menu.tsx
index 12a3d67cc5..7aae2e3044 100644
--- a/packages/mantine/src/menu/Menu.tsx
+++ b/packages/mantine/src/menu/Menu.tsx
@@ -1,5 +1,6 @@
 import * as Mantine from "@mantine/core";
 
+import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import {
   createContext,
@@ -13,8 +14,6 @@ import { HiChevronRight } from "react-icons/hi";
 
 const SubMenuContext = createContext<
   | {
-      onTriggerMouseOver: () => void;
-      onTriggerMouseLeave: () => void;
       onMenuMouseOver: () => void;
       onMenuMouseLeave: () => void;
     }
@@ -67,15 +66,19 @@ const SubMenuContext = createContext<
 //   </MenuDropdown>
 // </Menu>
 const SubMenu = forwardRef<
-  HTMLDivElement,
+  HTMLButtonElement,
   ComponentProps["Generic"]["Menu"]["Root"]
 >((props, ref) => {
   const {
     children,
     onOpenChange,
     position,
-    // sub
+    sub, // not used
+    ...rest
   } = props;
+
+  assertEmpty(rest);
+
   const [opened, setOpened] = useState(false);
 
   const menuCloseTimer = useRef<ReturnType<typeof setTimeout> | undefined>();
@@ -93,22 +96,18 @@ const SubMenu = forwardRef<
     if (menuCloseTimer.current) {
       clearTimeout(menuCloseTimer.current);
     }
-
     setOpened(true);
   }, []);
 
   return (
     <SubMenuContext.Provider
       value={{
-        onTriggerMouseOver: mouseOver,
-        onTriggerMouseLeave: mouseLeave,
         onMenuMouseOver: mouseOver,
         onMenuMouseLeave: mouseLeave,
       }}>
       <Mantine.Menu.Item
         className="bn-menu-item bn-mt-sub-menu-item"
         ref={ref}
-        component="div"
         onMouseOver={mouseOver}
         onMouseLeave={mouseLeave}>
         <Mantine.Menu
@@ -127,7 +126,9 @@ const SubMenu = forwardRef<
 });
 
 export const Menu = (props: ComponentProps["Generic"]["Menu"]["Root"]) => {
-  const { children, onOpenChange, position, sub } = props;
+  const { children, onOpenChange, position, sub, ...rest } = props;
+
+  assertEmpty(rest);
 
   if (sub) {
     return <SubMenu {...props} />;
@@ -146,13 +147,15 @@ export const Menu = (props: ComponentProps["Generic"]["Menu"]["Root"]) => {
 };
 
 export const MenuItem = forwardRef<
-  HTMLDivElement,
+  HTMLButtonElement & HTMLDivElement,
   ComponentProps["Generic"]["Menu"]["Item"]
 >((props, ref) => {
   const { className, children, icon, checked, subTrigger, onClick, ...rest } =
     props;
 
-  const ctx = useContext(SubMenuContext);
+  // false, because rest props can be added by mantine when button is used as a trigger
+  // assertEmpty in this case is only used at typescript level, not runtime level
+  assertEmpty(rest, false);
 
   if (subTrigger) {
     return (
@@ -163,14 +166,10 @@ export const MenuItem = forwardRef<
     );
   }
 
-  const onMouseLeave = subTrigger ? ctx!.onTriggerMouseLeave : undefined;
-  const onMouseOver = subTrigger ? ctx!.onTriggerMouseOver : undefined;
-
   return (
     <Mantine.Menu.Item
       className={className}
       ref={ref}
-      component="div"
       leftSection={icon}
       rightSection={
         checked ? (
@@ -179,8 +178,6 @@ export const MenuItem = forwardRef<
           <div className={"bn-tick-space"} />
         ) : null
       }
-      onMouseOver={onMouseOver}
-      onMouseLeave={onMouseLeave}
       onClick={onClick}
       {...rest}>
       {children}
@@ -193,9 +190,12 @@ export const MenuTrigger = (
 ) => {
   const {
     children,
-    // sub
+    sub, // unused
+    ...rest
   } = props;
 
+  assertEmpty(rest);
+
   return <Mantine.Menu.Target>{children}</Mantine.Menu.Target>;
 };
 
@@ -206,9 +206,12 @@ export const MenuDropdown = forwardRef<
   const {
     className,
     children,
-    // sub
+    sub, //unused
+    ...rest
   } = props;
 
+  assertEmpty(rest);
+
   const ctx = useContext(SubMenuContext);
 
   return (
@@ -226,7 +229,9 @@ export const MenuDivider = forwardRef<
   HTMLDivElement,
   ComponentProps["Generic"]["Menu"]["Divider"]
 >((props, ref) => {
-  const { className } = props;
+  const { className, ...rest } = props;
+
+  assertEmpty(rest);
 
   return <Mantine.Menu.Divider className={className} ref={ref} />;
 });
@@ -235,7 +240,9 @@ export const MenuLabel = forwardRef<
   HTMLDivElement,
   ComponentProps["Generic"]["Menu"]["Label"]
 >((props, ref) => {
-  const { className, children } = props;
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest);
 
   return (
     <Mantine.Menu.Label className={className} ref={ref}>
diff --git a/packages/mantine/src/panel/Panel.tsx b/packages/mantine/src/panel/Panel.tsx
index 78a29f6231..6f15c3dba6 100644
--- a/packages/mantine/src/panel/Panel.tsx
+++ b/packages/mantine/src/panel/Panel.tsx
@@ -1,5 +1,6 @@
 import * as Mantine from "@mantine/core";
 
+import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
@@ -14,9 +15,11 @@ export const Panel = forwardRef<
     openTab,
     setOpenTab,
     loading,
-    // setLoading,
+    ...rest
   } = props;
 
+  assertEmpty(rest);
+
   return (
     <Mantine.Group className={className} ref={ref}>
       <Mantine.Tabs
diff --git a/packages/mantine/src/panel/PanelButton.tsx b/packages/mantine/src/panel/PanelButton.tsx
index 37909ce62a..3db527ab05 100644
--- a/packages/mantine/src/panel/PanelButton.tsx
+++ b/packages/mantine/src/panel/PanelButton.tsx
@@ -1,5 +1,6 @@
 import * as Mantine from "@mantine/core";
 
+import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
@@ -7,11 +8,14 @@ export const PanelButton = forwardRef<
   HTMLButtonElement,
   ComponentProps["ImagePanel"]["Button"]
 >((props, ref) => {
-  const { className, children, onClick, ...rest } = props;
+  const { className, children, onClick, label, ...rest } = props;
+
+  assertEmpty(rest);
 
   return (
     <Mantine.Button
       size={"xs"}
+      aria-label={label}
       className={className}
       ref={ref}
       onClick={onClick}
diff --git a/packages/mantine/src/panel/PanelFileInput.tsx b/packages/mantine/src/panel/PanelFileInput.tsx
index 5c38c138a4..a71206da29 100644
--- a/packages/mantine/src/panel/PanelFileInput.tsx
+++ b/packages/mantine/src/panel/PanelFileInput.tsx
@@ -1,5 +1,6 @@
 import * as Mantine from "@mantine/core";
 
+import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
@@ -9,6 +10,8 @@ export const PanelFileInput = forwardRef<
 >((props, ref) => {
   const { className, value, placeholder, onChange, ...rest } = props;
 
+  assertEmpty(rest);
+
   return (
     <Mantine.FileInput
       size={"xs"}
diff --git a/packages/mantine/src/panel/PanelTab.tsx b/packages/mantine/src/panel/PanelTab.tsx
index 58ed2aba46..224d299cea 100644
--- a/packages/mantine/src/panel/PanelTab.tsx
+++ b/packages/mantine/src/panel/PanelTab.tsx
@@ -1,3 +1,4 @@
+import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
@@ -5,7 +6,9 @@ export const PanelTab = forwardRef<
   HTMLDivElement,
   ComponentProps["ImagePanel"]["TabPanel"]
 >((props, ref) => {
-  const { className, children } = props;
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest);
 
   return (
     <div className={className} ref={ref}>
diff --git a/packages/mantine/src/panel/PanelTextInput.tsx b/packages/mantine/src/panel/PanelTextInput.tsx
index 59f6f9b884..e68efaf18e 100644
--- a/packages/mantine/src/panel/PanelTextInput.tsx
+++ b/packages/mantine/src/panel/PanelTextInput.tsx
@@ -1,5 +1,6 @@
 import * as Mantine from "@mantine/core";
 
+import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
@@ -7,7 +8,9 @@ export const PanelTextInput = forwardRef<
   HTMLInputElement,
   ComponentProps["ImagePanel"]["TextInput"]
 >((props, ref) => {
-  const { className, value, placeholder, onKeyDown, onChange } = props;
+  const { className, value, placeholder, onKeyDown, onChange, ...rest } = props;
+
+  assertEmpty(rest);
 
   return (
     <Mantine.TextInput
diff --git a/packages/mantine/src/popover/Popover.tsx b/packages/mantine/src/popover/Popover.tsx
index ccc1a74aeb..611918df63 100644
--- a/packages/mantine/src/popover/Popover.tsx
+++ b/packages/mantine/src/popover/Popover.tsx
@@ -1,12 +1,15 @@
 import * as Mantine from "@mantine/core";
 
+import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
 export const Popover = (
   props: ComponentProps["Generic"]["Popover"]["Root"]
 ) => {
-  const { children, opened, position } = props;
+  const { children, opened, position, ...rest } = props;
+
+  assertEmpty(rest);
 
   return (
     <Mantine.Popover
@@ -22,7 +25,9 @@ export const Popover = (
 export const PopoverTrigger = (
   props: ComponentProps["Generic"]["Popover"]["Trigger"]
 ) => {
-  const { children } = props;
+  const { children, ...rest } = props;
+
+  assertEmpty(rest);
 
   return <Mantine.PopoverTarget>{children}</Mantine.PopoverTarget>;
 };
@@ -31,7 +36,14 @@ export const PopoverContent = forwardRef<
   HTMLDivElement,
   ComponentProps["Generic"]["Popover"]["Content"]
 >((props, ref) => {
-  const { className, children } = props;
+  const {
+    className,
+    children,
+    variant, // unused
+    ...rest
+  } = props;
+
+  assertEmpty(rest);
 
   return (
     <Mantine.PopoverDropdown className={className} ref={ref}>
diff --git a/packages/mantine/src/sideMenu/SideMenu.tsx b/packages/mantine/src/sideMenu/SideMenu.tsx
index 7a233730d8..91313ad206 100644
--- a/packages/mantine/src/sideMenu/SideMenu.tsx
+++ b/packages/mantine/src/sideMenu/SideMenu.tsx
@@ -1,5 +1,6 @@
 import * as Mantine from "@mantine/core";
 
+import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
@@ -7,7 +8,9 @@ export const SideMenu = forwardRef<
   HTMLDivElement,
   ComponentProps["SideMenu"]["Root"]
 >((props, ref) => {
-  const { className, children } = props;
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest);
 
   return (
     <Mantine.Group align={"center"} gap={0} className={className} ref={ref}>
diff --git a/packages/mantine/src/sideMenu/SideMenuButton.tsx b/packages/mantine/src/sideMenu/SideMenuButton.tsx
index 329f0baf4f..cb1f21a1a6 100644
--- a/packages/mantine/src/sideMenu/SideMenuButton.tsx
+++ b/packages/mantine/src/sideMenu/SideMenuButton.tsx
@@ -1,5 +1,6 @@
 import * as Mantine from "@mantine/core";
 
+import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
@@ -7,7 +8,21 @@ export const SideMenuButton = forwardRef<
   HTMLButtonElement,
   ComponentProps["SideMenu"]["Button"]
 >((props, ref) => {
-  const { className, children, icon, onClick, ...rest } = props;
+  const {
+    className,
+    children,
+    icon,
+    onClick,
+    onDragEnd,
+    onDragStart,
+    draggable,
+    label,
+    ...rest
+  } = props;
+
+  // false, because rest props can be added by mantine when button is used as a trigger
+  // assertEmpty in this case is only used at typescript level, not runtime level
+  assertEmpty(rest, false);
 
   if (icon) {
     return (
@@ -16,6 +31,10 @@ export const SideMenuButton = forwardRef<
         className={className}
         ref={ref}
         onClick={onClick}
+        onDragEnd={onDragEnd}
+        onDragStart={onDragStart}
+        draggable={draggable}
+        aria-label={label}
         {...rest}>
         {icon}
       </Mantine.ActionIcon>
@@ -23,7 +42,15 @@ export const SideMenuButton = forwardRef<
   }
 
   return (
-    <Mantine.Button className={className} ref={ref} onClick={onClick} {...rest}>
+    <Mantine.Button
+      className={className}
+      ref={ref}
+      onClick={onClick}
+      onDragEnd={onDragEnd}
+      onDragStart={onDragStart}
+      draggable={draggable}
+      aria-label={label}
+      {...rest}>
       {children}
     </Mantine.Button>
   );
diff --git a/packages/mantine/src/style.css b/packages/mantine/src/style.css
index dd22c7f316..962b836a7c 100644
--- a/packages/mantine/src/style.css
+++ b/packages/mantine/src/style.css
@@ -5,227 +5,228 @@
 
 /* Mantine Badge component base styles */
 .bn-container .mantine-Badge-root {
-    background-color: var(--bn-colors-tooltip-background);
-    color: var(--bn-colors-tooltip-text);
+  background-color: var(--bn-colors-tooltip-background);
+  color: var(--bn-colors-tooltip-text);
 }
 
 /* Mantine FileInput component base styles */
 .bn-container .mantine-FileInput-input {
-    align-items: center;
-    background-color: var(--bn-colors-menu-background);
-    border: none;
-    border-radius: 4px;
-    color: var(--bn-colors-menu-text);
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
+  align-items: center;
+  background-color: var(--bn-colors-menu-background);
+  border: none;
+  border-radius: 4px;
+  color: var(--bn-colors-menu-text);
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
 }
 
 .bn-container .mantine-FileInput-input:hover {
-    background-color: var(--bn-colors-hovered-background);
+  background-color: var(--bn-colors-hovered-background);
 }
 
 .bn-container .mantine-FileInput-wrapper {
-    border: solid var(--bn-colors-border) 1px;
-    border-radius: 4px;
+  border: solid var(--bn-colors-border) 1px;
+  border-radius: 4px;
 }
 
 .bn-container .mantine-InputPlaceholder-placeholder {
-    color: var(--bn-colors-menu-text);
-    font-weight: 600;
+  color: var(--bn-colors-menu-text);
+  font-weight: 600;
 }
 
 /* Mantine Menu component base styles */
 .bn-container .mantine-Menu-dropdown {
-    background-color: var(--bn-colors-menu-background);
-    border: var(--bn-border);
-    border-radius: var(--bn-border-radius-medium);
-    box-shadow: var(--bn-shadow-medium);
-    box-sizing: border-box;
-    color: var(--bn-colors-menu-text);
-    padding: 2px;
-    overflow: auto;
+  background-color: var(--bn-colors-menu-background);
+  border: var(--bn-border);
+  border-radius: var(--bn-border-radius-medium);
+  box-shadow: var(--bn-shadow-medium);
+  box-sizing: border-box;
+  color: var(--bn-colors-menu-text);
+  padding: 2px;
+  overflow: auto;
 }
 
 .bn-container .mantine-Menu-label {
-    background-color: var(--bn-colors-menu-background);
-    color: var(--bn-colors-menu-text);
+  background-color: var(--bn-colors-menu-background);
+  color: var(--bn-colors-menu-text);
 }
 
 .bn-container .mantine-Menu-item {
-    background-color: var(--bn-colors-menu-background);
-    border: none;
-    border-radius: var(--bn-border-radius-small);
-    color: var(--bn-colors-menu-text);
+  background-color: var(--bn-colors-menu-background);
+  border: none;
+  border-radius: var(--bn-border-radius-small);
+  color: var(--bn-colors-menu-text);
 }
 
-.bn-container .mantine-Menu-item[data-hovered] {
-    background-color: var(--bn-colors-hovered-background);
-    border: none;
-    color: var(--bn-colors-hovered-text);
+.bn-container .mantine-Menu-item[aria-selected="true"],
+.bn-container .mantine-Menu-item:hover {
+  background-color: var(--bn-colors-hovered-background);
+  border: none;
+  color: var(--bn-colors-hovered-text);
 }
 
 /* Mantine Popover component base styles */
 .bn-container .mantine-Popover-dropdown {
-    background-color: transparent;
-    border: none;
-    border-radius: 0;
-    box-shadow: none;
-    padding: 0;
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  padding: 0;
 }
 
 /* Mantine Tabs component base styles */
 .bn-container .mantine-Tabs-root {
-    width: 100%;
-    background-color: var(--bn-colors-menu-background);
+  width: 100%;
+  background-color: var(--bn-colors-menu-background);
 }
 
 .bn-container .mantine-Tabs-list:before {
-    border-color: var(--bn-colors-hovered-background);
+  border-color: var(--bn-colors-hovered-background);
 }
 
 .bn-container .mantine-Tabs-tab {
-    color: var(--bn-colors-menu-text);
-    border-color: var(--bn-colors-hovered-background);
+  color: var(--bn-colors-menu-text);
+  border-color: var(--bn-colors-hovered-background);
 }
 
 .bn-container .mantine-Tabs-tab:hover {
-    background-color: var(--bn-colors-hovered-background);
-    border-color: var(--bn-colors-hovered-background);
-    color: var(--bn-colors-hovered-text);
+  background-color: var(--bn-colors-hovered-background);
+  border-color: var(--bn-colors-hovered-background);
+  color: var(--bn-colors-hovered-text);
 }
 
 .bn-container .mantine-Tabs-tab[data-active],
 .bn-container .mantine-Tabs-tab[data-active]:hover {
-    border-color: var(--bn-colors-menu-text);
-    color: var(--bn-colors-menu-text);
+  border-color: var(--bn-colors-menu-text);
+  color: var(--bn-colors-menu-text);
 }
 
 .bn-container .mantine-Tabs-panel {
-    padding: 8px;
+  padding: 8px;
 }
 
 /* Mantine TextInput component base styles */
 .bn-container .mantine-TextInput-input {
-    background-color: var(--bn-colors-menu-background);
-    border: solid var(--bn-colors-border) 1px;
-    border-radius: 4px;
-    color: var(--bn-colors-menu-text);
-    height: 32px;
+  background-color: var(--bn-colors-menu-background);
+  border: solid var(--bn-colors-border) 1px;
+  border-radius: 4px;
+  color: var(--bn-colors-menu-text);
+  height: 32px;
 }
 
 /* Mantine Tooltip component base styles */
 .bn-container .mantine-Tooltip-tooltip {
-    background-color: transparent;
-    border: none;
-    border-radius: 0;
-    box-shadow: none;
-    padding: 0;
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  padding: 0;
 }
 
 /* UI element styling */
 
 /* Select styling */
 .bn-select {
-    overflow: auto;
+  overflow: auto;
 }
 
 /* Toolbar styling */
 .bn-toolbar {
-    background-color: var(--bn-colors-menu-background);
-    border: var(--bn-border);
-    border-radius: var(--bn-border-radius-medium);
-    box-shadow: var(--bn-shadow-medium);
-    flex-wrap: nowrap;
-    gap: 2px;
-    padding: 2px;
-    width: fit-content;
+  background-color: var(--bn-colors-menu-background);
+  border: var(--bn-border);
+  border-radius: var(--bn-border-radius-medium);
+  box-shadow: var(--bn-shadow-medium);
+  flex-wrap: nowrap;
+  gap: 2px;
+  padding: 2px;
+  width: fit-content;
 }
 
 .bn-toolbar:empty {
-    display: none;
+  display: none;
 }
 
 .bn-toolbar .mantine-Button-root,
 .bn-toolbar .mantine-ActionIcon-root {
-    background-color: var(--bn-colors-menu-background);
-    border: none;
-    border-radius: var(--bn-border-radius-small);
-    color: var(--bn-colors-menu-text);
+  background-color: var(--bn-colors-menu-background);
+  border: none;
+  border-radius: var(--bn-border-radius-small);
+  color: var(--bn-colors-menu-text);
 }
 
 .bn-toolbar .mantine-Button-root:hover,
 .bn-toolbar .mantine-ActionIcon-root:hover {
-    background-color: var(--bn-colors-hovered-background);
-    border: none;
-    color: var(--bn-colors-hovered-text);
+  background-color: var(--bn-colors-hovered-background);
+  border: none;
+  color: var(--bn-colors-hovered-text);
 }
 
 .bn-toolbar .mantine-Button-root[data-selected],
 .bn-toolbar .mantine-ActionIcon-root[data-selected] {
-    background-color: var(--bn-colors-selected-background);
-    border: none;
-    color: var(--bn-colors-selected-text);
+  background-color: var(--bn-colors-selected-background);
+  border: none;
+  color: var(--bn-colors-selected-text);
 }
 
 .bn-toolbar .mantine-Button-root[data-disabled],
-.bn-toolbar .mantine-ActionIcon-root[data-disabled]  {
-    background-color: var(--bn-colors-disabled-background);
-    border: none;
-    color: var(--bn-colors-disabled-text);
+.bn-toolbar .mantine-ActionIcon-root[data-disabled] {
+  background-color: var(--bn-colors-disabled-background);
+  border: none;
+  color: var(--bn-colors-disabled-text);
 }
 
 .bn-toolbar .mantine-Menu-item {
-    font-size: 12px;
-    height: 30px;
+  font-size: 12px;
+  height: 30px;
 }
 
 .bn-toolbar .mantine-Menu-item:hover {
-    background-color: var(--bn-colors-hovered-background);
+  background-color: var(--bn-colors-hovered-background);
 }
 
 .bn-container .bn-form-popover {
-    background-color: var(--bn-colors-menu-background);
-    border: var(--bn-border);
-    border-radius: var(--bn-border-radius-medium);
-    box-shadow: var(--bn-shadow-medium);
-    color: var(--bn-colors-menu-text);
-    gap: 4px;
-    min-width: 145px;
-    padding: 2px;
+  background-color: var(--bn-colors-menu-background);
+  border: var(--bn-border);
+  border-radius: var(--bn-border-radius-medium);
+  box-shadow: var(--bn-shadow-medium);
+  color: var(--bn-colors-menu-text);
+  gap: 4px;
+  min-width: 145px;
+  padding: 2px;
 }
 
 .bn-form-popover .mantine-TextInput-root,
 .bn-form-popover .mantine-FileInput-root {
-    width: 300px;
+  width: 300px;
 }
 
 .bn-form-popover .mantine-TextInput-wrapper,
 .bn-form-popover .mantine-FileInput-wrapper {
-    padding: 0;
-    border-radius: 4px;
+  padding: 0;
+  border-radius: 4px;
 }
 
 .bn-form-popover .mantine-TextInput-wrapper:hover {
-    background-color: var(--bn-colors-hovered-background);
+  background-color: var(--bn-colors-hovered-background);
 }
 
 .bn-form-popover .mantine-TextInput-input,
 .bn-form-popover .mantine-FileInput-input {
-    border: none;
-    font-size: 12px;
+  border: none;
+  font-size: 12px;
 }
 
 .bn-form-popover .mantine-FileInput-input:hover {
-    background-color: var(--bn-colors-hovered-background);
+  background-color: var(--bn-colors-hovered-background);
 }
 
 .bn-form-popover .mantine-FileInput-section[data-position="left"] {
-    color: var(--bn-colors-menu-text);
+  color: var(--bn-colors-menu-text);
 }
 
 .bn-form-popover .mantine-FileInput-placeholder {
-    color: var(--bn-colors-menu-text);
+  color: var(--bn-colors-menu-text);
 }
 
 /* Suggestion Menu styling*/
@@ -235,254 +236,255 @@
  own. */
 /* https://github.com/mantinedev/mantine/blob/e3e3bb834de1f2f75a27dbc757dc0a2fc6a6cba8/packages/%40mantine/core/src/components/Menu/Menu.module.css */
 .bn-suggestion-menu {
-    max-height: 100%;
-    position: relative;
-    box-shadow: var(--mantine-shadow-md);
-    border: calc(0.0625rem * var(--mantine-scale)) solid
+  max-height: 100%;
+  position: relative;
+  box-shadow: var(--mantine-shadow-md);
+  border: calc(0.0625rem * var(--mantine-scale)) solid
     var(--mantine-color-gray-2);
-    border-radius: var(--mantine-radius-default);
-    padding: 4px;
+  border-radius: var(--mantine-radius-default);
+  padding: 4px;
 }
 
 .bn-suggestion-menu-label {
-    color: var(--mantine-color-dimmed);
-    font-weight: 500;
-    font-size: var(--mantine-font-size-xs);
-    padding: calc(var(--mantine-spacing-xs) / 2) var(--mantine-spacing-sm);
-    cursor: default;
+  color: var(--mantine-color-dimmed);
+  font-weight: 500;
+  font-size: var(--mantine-font-size-xs);
+  padding: calc(var(--mantine-spacing-xs) / 2) var(--mantine-spacing-sm);
+  cursor: default;
 }
 
 .bn-suggestion-menu-item {
-    font-size: var(--mantine-font-size-sm);
-    width: 100%;
-    padding: calc(var(--mantine-spacing-xs) / 1.5) var(--mantine-spacing-sm);
-    border-radius: var(--popover-radius, var(--mantine-radius-default));
-    color: var(--menu-item-color, var(--mantine-color-text));
-    display: flex;
-    align-items: center;
-    user-select: none;
-
-    &:where([data-disabled], :disabled) {
-        color: var(--mantine-color-dimmed);
-        opacity: 0.6;
-        pointer-events: none;
-    }
-
-    &:where([data-hovered]) {
-    }
+  font-size: var(--mantine-font-size-sm);
+  width: 100%;
+  padding: calc(var(--mantine-spacing-xs) / 1.5) var(--mantine-spacing-sm);
+  border-radius: var(--popover-radius, var(--mantine-radius-default));
+  color: var(--menu-item-color, var(--mantine-color-text));
+  display: flex;
+  align-items: center;
+  user-select: none;
+
+  &:where([data-disabled], :disabled) {
+    color: var(--mantine-color-dimmed);
+    opacity: 0.6;
+    pointer-events: none;
+  }
 }
 
 /* Additional Suggestion Menu styling*/
 .bn-mt-suggestion-menu-item-body {
-    flex: 1;
+  flex: 1;
 }
 
 .bn-mt-suggestion-menu-item-section {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
-    &:where([data-position="left"]) {
-        margin-inline-end: var(--mantine-spacing-xs);
-    }
+  &:where([data-position="left"]) {
+    margin-inline-end: var(--mantine-spacing-xs);
+  }
 
-    &:where([data-position="right"]) {
-        margin-inline-start: var(--mantine-spacing-xs);
-    }
+  &:where([data-position="right"]) {
+    margin-inline-start: var(--mantine-spacing-xs);
+  }
 }
 
 .bn-suggestion-menu {
-    background-color: var(--bn-colors-menu-background);
-    border: var(--bn-border);
-    border-radius: var(--bn-border-radius-medium);
-    box-shadow: var(--bn-shadow-medium);
-    box-sizing: border-box;
-    color: var(--bn-colors-menu-text);
-    overflow-y: auto;
-    padding: 2px;
+  background-color: var(--bn-colors-menu-background);
+  border: var(--bn-border);
+  border-radius: var(--bn-border-radius-medium);
+  box-shadow: var(--bn-shadow-medium);
+  box-sizing: border-box;
+  color: var(--bn-colors-menu-text);
+  overflow-y: auto;
+  padding: 2px;
 }
 
 .bn-suggestion-menu-item {
-    cursor: pointer;
-    height: 52px;
+  cursor: pointer;
+  height: 52px;
 }
 
-.bn-suggestion-menu-item[data-hovered] {
-    background-color: var(--bn-colors-hovered-background);
+.bn-suggestion-menu-item[aria-selected="true"],
+.bn-suggestion-menu-item:hover {
+  background-color: var(--bn-colors-hovered-background);
 }
 
 .bn-mt-suggestion-menu-item-section {
-    color: var(--bn-colors-tooltip-text);
+  color: var(--bn-colors-tooltip-text);
 }
 
 .bn-mt-suggestion-menu-item-section[data-position="left"] {
-    background-color: var(--bn-colors-tooltip-background);
-    border-radius: var(--bn-border-radius-small);
-    padding: 8px;
+  background-color: var(--bn-colors-tooltip-background);
+  border-radius: var(--bn-border-radius-small);
+  padding: 8px;
 }
 
 .bn-mt-suggestion-menu-item-body {
-    align-items: stretch;
-    color: var(--bn-colors-menu-text);
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    justify-content: flex-start;
-    padding-right: 16px;
+  align-items: stretch;
+  color: var(--bn-colors-menu-text);
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: flex-start;
+  padding-right: 16px;
 }
 
 .bn-mt-suggestion-menu-item-title {
-    line-height: 20px;
-    font-weight: 500;
-    font-size: 14px;
-    margin: 0;
-    padding: 0;
+  line-height: 20px;
+  font-weight: 500;
+  font-size: 14px;
+  margin: 0;
+  padding: 0;
 }
 
 .bn-mt-suggestion-menu-item-subtitle {
-    line-height: 16px;
-    font-size: 10px;
-    margin: 0;
-    padding: 0;
+  line-height: 16px;
+  font-size: 10px;
+  margin: 0;
+  padding: 0;
 }
 
 .bn-suggestion-menu-label {
-    color: var(--bn-colors-hovered-text);
+  color: var(--bn-colors-hovered-text);
 }
 
 .bn-suggestion-menu-loader {
-    height: 20px;
-    width: 100%;
+  height: 20px;
+  width: 100%;
 }
 
 .bn-suggestion-menu-loader span {
-    background-color: var(--bn-colors-side-menu);
+  background-color: var(--bn-colors-side-menu);
 }
 
 /* Side Menu styling */
 .bn-side-menu {
-    background-color: transparent;
-    overflow: visible;
+  background-color: transparent;
+  overflow: visible;
 }
 
-.bn-side-menu .mantine-Menu-item, .bn-table-handle-menu .mantine-Menu-item {
-    font-size: 12px;
-    height: 30px;
+.bn-side-menu .mantine-Menu-item,
+.bn-table-handle-menu .mantine-Menu-item {
+  font-size: 12px;
+  height: 30px;
 }
 
 .bn-side-menu .mantine-UnstyledButton-root:not(.mantine-Menu-item) {
-    background-color: transparent;
+  background-color: transparent;
 }
 
 .bn-side-menu .mantine-UnstyledButton-root:hover {
-    background-color: var(--bn-colors-hovered-background);
+  background-color: var(--bn-colors-hovered-background);
 }
 
 .bn-side-menu .mantine-UnstyledButton-root:not(.mantine-Menu-item) svg {
-    background-color: transparent;
-    color: var(--bn-colors-side-menu);
-    height: 22px;
-    width: 22px;
+  background-color: transparent;
+  color: var(--bn-colors-side-menu);
+  height: 22px;
+  width: 22px;
 }
 
 .bn-side-menu > [draggable="true"] {
-    display: flex;
+  display: flex;
 }
 
 .bn-side-menu .mantine-Menu-dropdown {
-    min-width: 100px;
-    padding: 2px;
-    position: absolute;
+  min-width: 100px;
+  padding: 2px;
+  position: absolute;
 }
 
 /* Image Panel styling*/
 .bn-panel {
-    background-color: var(--bn-colors-menu-background);
-    border: var(--bn-border);
-    border-radius: var(--bn-border-radius-medium);
-    box-shadow: var(--bn-shadow-medium);
-    padding: 2px;
-    width: 500px;
+  background-color: var(--bn-colors-menu-background);
+  border: var(--bn-border);
+  border-radius: var(--bn-border-radius-medium);
+  box-shadow: var(--bn-shadow-medium);
+  padding: 2px;
+  width: 500px;
 }
 
 .bn-panel .bn-tab-panel {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    width: 100%;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
 }
 
 .bn-panel .mantine-TextInput-root,
 .bn-panel .mantine-FileInput-root {
-    width: 100%;
+  width: 100%;
 }
 
 .bn-panel .mantine-Button-root {
-    background-color: var(--bn-colors-menu-background);
-    border: solid var(--bn-colors-border) 1px;
-    border-radius: var(--bn-border-radius-small);
-    color: var(--bn-colors-menu-text);
-    height: 32px;
-    width: 60%;
+  background-color: var(--bn-colors-menu-background);
+  border: solid var(--bn-colors-border) 1px;
+  border-radius: var(--bn-border-radius-small);
+  color: var(--bn-colors-menu-text);
+  height: 32px;
+  width: 60%;
 }
 
 .bn-panel .mantine-Button-root:hover {
-    background-color: var(--bn-colors-hovered-background);
+  background-color: var(--bn-colors-hovered-background);
 }
 
 .bn-panel.mantine-Text-root {
-    text-align: center;
+  text-align: center;
 }
 
 /* Table Handle styling */
 .bn-table-handle {
-    align-items: center;
-    background-color: var(--bn-colors-menu-background);
-    border: var(--bn-border);
-    border-radius: var(--bn-border-radius-small);
-    box-shadow: var(--bn-shadow-light);
-    color: var(--bn-colors-side-menu);
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    overflow: visible;
-    padding: 0;
+  align-items: center;
+  background-color: var(--bn-colors-menu-background);
+  border: var(--bn-border);
+  border-radius: var(--bn-border-radius-small);
+  box-shadow: var(--bn-shadow-light);
+  color: var(--bn-colors-side-menu);
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  overflow: visible;
+  padding: 0;
 }
 
 .bn-table-handle svg {
-    margin-inline: -4px;
+  margin-inline: -4px;
 }
 
 .bn-table-handle:hover,
 .bn-table-handle-dragging {
-    background-color: var(--bn-colors-hovered-background);
+  background-color: var(--bn-colors-hovered-background);
 }
 
 /* Drag Handle & Table Handle Menu styling */
 .bn-container .bn-drag-handle-menu {
-    overflow: visible;
+  overflow: visible;
 }
 
 /* Tooltip styling */
 .bn-tooltip {
-    background-color: var(--bn-colors-tooltip-background);
-    border: var(--bn-border);
-    border-radius: var(--bn-border-radius-medium);
-    box-shadow: var(--bn-shadow-medium);
-    color: var(--bn-colors-tooltip-text);
-    padding: 4px 10px;
-    text-align: center;
+  background-color: var(--bn-colors-tooltip-background);
+  border: var(--bn-border);
+  border-radius: var(--bn-border-radius-medium);
+  box-shadow: var(--bn-shadow-medium);
+  color: var(--bn-colors-tooltip-text);
+  padding: 4px 10px;
+  text-align: center;
 }
 
 /* Additional menu styles */
 .bn-tick-space {
-    padding: 0;
-    width: 20px;
+  padding: 0;
+  width: 20px;
 }
 
-.bn-mt-sub-menu-item > .mantine-Menu-itemLabel > div:not(.mantine-Menu-dropdown) {
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+.bn-mt-sub-menu-item
+  > .mantine-Menu-itemLabel
+  > div:not(.mantine-Menu-dropdown) {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
 }
diff --git a/packages/mantine/src/suggestionMenu/SuggestionMenu.tsx b/packages/mantine/src/suggestionMenu/SuggestionMenu.tsx
index 4c0e5a6db7..8d9a2ea257 100644
--- a/packages/mantine/src/suggestionMenu/SuggestionMenu.tsx
+++ b/packages/mantine/src/suggestionMenu/SuggestionMenu.tsx
@@ -1,5 +1,6 @@
 import * as Mantine from "@mantine/core";
 
+import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
@@ -7,10 +8,17 @@ export const SuggestionMenu = forwardRef<
   HTMLDivElement,
   ComponentProps["SuggestionMenu"]["Root"]
 >((props, ref) => {
-  const { className, children } = props;
+  const { className, children, id, ...rest } = props;
+
+  assertEmpty(rest);
 
   return (
-    <Mantine.Stack gap={0} className={className} ref={ref}>
+    <Mantine.Stack
+      gap={0}
+      className={className}
+      ref={ref}
+      id={id}
+      role="listbox">
       {children}
     </Mantine.Stack>
   );
diff --git a/packages/mantine/src/suggestionMenu/SuggestionMenuEmptyItem.tsx b/packages/mantine/src/suggestionMenu/SuggestionMenuEmptyItem.tsx
index 3e88792d86..990a285590 100644
--- a/packages/mantine/src/suggestionMenu/SuggestionMenuEmptyItem.tsx
+++ b/packages/mantine/src/suggestionMenu/SuggestionMenuEmptyItem.tsx
@@ -1,5 +1,6 @@
 import * as Mantine from "@mantine/core";
 
+import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
@@ -7,7 +8,9 @@ export const SuggestionMenuEmptyItem = forwardRef<
   HTMLDivElement,
   ComponentProps["SuggestionMenu"]["EmptyItem"]
 >((props, ref) => {
-  const { className, children } = props;
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest);
 
   return (
     <Mantine.Group className={className} ref={ref}>
diff --git a/packages/mantine/src/suggestionMenu/SuggestionMenuItem.tsx b/packages/mantine/src/suggestionMenu/SuggestionMenuItem.tsx
index bc622bb073..bf67bf71fc 100644
--- a/packages/mantine/src/suggestionMenu/SuggestionMenuItem.tsx
+++ b/packages/mantine/src/suggestionMenu/SuggestionMenuItem.tsx
@@ -1,65 +1,45 @@
 import * as Mantine from "@mantine/core";
 
+import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
-import { forwardRef, useCallback } from "react";
+import { forwardRef } from "react";
 
 export const SuggestionMenuItem = forwardRef<
   HTMLDivElement,
   ComponentProps["SuggestionMenu"]["Item"]
 >((props, ref) => {
-  const {
-    className,
-    title,
-    subtext,
-    // group,
-    icon,
-    badge,
-    // aliases,
-    // onItemClick,
-    isSelected,
-    setSelected,
-    onClick,
-  } = props;
+  const { className, isSelected, onClick, item, id, ...rest } = props;
 
-  const handleMouseLeave = useCallback(() => {
-    setSelected?.(false);
-  }, [setSelected]);
-
-  const handleMouseEnter = useCallback(() => {
-    setSelected?.(true);
-  }, [setSelected]);
+  assertEmpty(rest);
 
   return (
     <Mantine.Group
       gap={0}
-      // component="div"
       className={className}
       ref={ref}
-      onClick={onClick}
-      // Ensures an item selected with both mouse & keyboard doesn't get deselected on mouse leave.
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      data-hovered={isSelected ? "" : undefined}>
-      {icon && (
+      id={id}
+      role="option"
+      aria-selected={isSelected || undefined}>
+      {item.icon && (
         <Mantine.Group
           className="bn-mt-suggestion-menu-item-section"
           data-position="left">
-          {icon}
+          {item.icon}
         </Mantine.Group>
       )}
       <Mantine.Stack gap={0} className="bn-mt-suggestion-menu-item-body">
         <Mantine.Text className="bn-mt-suggestion-menu-item-title">
-          {title}
+          {item.title}
         </Mantine.Text>
         <Mantine.Text className="bn-mt-suggestion-menu-item-subtitle">
-          {subtext}
+          {item.subtext}
         </Mantine.Text>
       </Mantine.Stack>
-      {badge && (
+      {item.badge && (
         <Mantine.Group
           data-position="right"
           className="bn-mt-suggestion-menu-item-section">
-          <Mantine.Badge size={"xs"}>{badge}</Mantine.Badge>
+          <Mantine.Badge size={"xs"}>{item.badge}</Mantine.Badge>
         </Mantine.Group>
       )}
     </Mantine.Group>
diff --git a/packages/mantine/src/suggestionMenu/SuggestionMenuLabel.tsx b/packages/mantine/src/suggestionMenu/SuggestionMenuLabel.tsx
index 9c7178cc9b..a913f3f5eb 100644
--- a/packages/mantine/src/suggestionMenu/SuggestionMenuLabel.tsx
+++ b/packages/mantine/src/suggestionMenu/SuggestionMenuLabel.tsx
@@ -1,5 +1,6 @@
 import * as Mantine from "@mantine/core";
 
+import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
@@ -7,7 +8,9 @@ export const SuggestionMenuLabel = forwardRef<
   HTMLDivElement,
   ComponentProps["SuggestionMenu"]["Label"]
 >((props, ref) => {
-  const { className, children } = props;
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest);
 
   return (
     <Mantine.Group className={className} ref={ref}>
diff --git a/packages/mantine/src/suggestionMenu/SuggestionMenuLoader.tsx b/packages/mantine/src/suggestionMenu/SuggestionMenuLoader.tsx
index 252a2682db..1d3e7fd99d 100644
--- a/packages/mantine/src/suggestionMenu/SuggestionMenuLoader.tsx
+++ b/packages/mantine/src/suggestionMenu/SuggestionMenuLoader.tsx
@@ -1,5 +1,6 @@
 import * as Mantine from "@mantine/core";
 
+import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
@@ -9,8 +10,11 @@ export const SuggestionMenuLoader = forwardRef<
 >((props, ref) => {
   const {
     className,
-    // children
+    children, // unused, using "dots" instead
+    ...rest
   } = props;
 
+  assertEmpty(rest);
+
   return <Mantine.Loader className={className} type="dots" ref={ref} />;
 });
diff --git a/packages/mantine/src/tableHandle/TableHandle.tsx b/packages/mantine/src/tableHandle/TableHandle.tsx
index 08ed50271e..2e172542a7 100644
--- a/packages/mantine/src/tableHandle/TableHandle.tsx
+++ b/packages/mantine/src/tableHandle/TableHandle.tsx
@@ -1,3 +1,4 @@
+import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
@@ -12,13 +13,19 @@ export const TableHandle = forwardRef<
     onDragStart,
     onDragEnd,
     style,
+    label,
     ...rest
   } = props;
 
+  // false, because rest props can be added by mantine when button is used as a trigger
+  // assertEmpty in this case is only used at typescript level, not runtime level
+  assertEmpty(rest, false);
+
   return (
     <button
       className={className}
       ref={ref}
+      aria-label={label}
       draggable={draggable}
       onDragStart={onDragStart}
       onDragEnd={onDragEnd}
diff --git a/packages/mantine/src/toolbar/Toolbar.tsx b/packages/mantine/src/toolbar/Toolbar.tsx
index 1ab8f33a64..fd8df27bbb 100644
--- a/packages/mantine/src/toolbar/Toolbar.tsx
+++ b/packages/mantine/src/toolbar/Toolbar.tsx
@@ -1,6 +1,8 @@
 import * as Mantine from "@mantine/core";
 
+import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
+import { mergeRefs, useFocusTrap, useFocusWithin } from "@mantine/hooks";
 import { forwardRef } from "react";
 
 type ToolbarProps = ComponentProps["FormattingToolbar"]["Root"] &
@@ -8,12 +10,23 @@ type ToolbarProps = ComponentProps["FormattingToolbar"]["Root"] &
 
 export const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(
   (props, ref) => {
-    const { className, children, onMouseEnter, onMouseLeave } = props;
+    const { className, children, onMouseEnter, onMouseLeave, ...rest } = props;
+
+    assertEmpty(rest);
+
+    // use a focus trap so that tab cycles through toolbar buttons, but only if focus is within the toolbar
+    const { ref: focusRef, focused } = useFocusWithin();
+
+    const trapRef = useFocusTrap(focused);
+
+    const combinedRef = mergeRefs(ref, focusRef, trapRef);
 
     return (
       <Mantine.Group
         className={className}
-        ref={ref}
+        ref={combinedRef}
+        role="toolbar"
+        // TODO: aria-label
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}>
         {children}
diff --git a/packages/mantine/src/toolbar/ToolbarButton.tsx b/packages/mantine/src/toolbar/ToolbarButton.tsx
index d6a6ccfe5d..2ed3b09748 100644
--- a/packages/mantine/src/toolbar/ToolbarButton.tsx
+++ b/packages/mantine/src/toolbar/ToolbarButton.tsx
@@ -1,6 +1,6 @@
 import * as Mantine from "@mantine/core";
 
-import { isSafari } from "@blocknote/core";
+import { assertEmpty, isSafari } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
@@ -33,9 +33,14 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
       isSelected,
       isDisabled,
       onClick,
+      label,
       ...rest
     } = props;
 
+    // false, because rest props can be added by mantine when button is used as a trigger
+    // assertEmpty in this case is only used at typescript level, not runtime level
+    assertEmpty(rest, false);
+
     return (
       <Mantine.Tooltip
         withinPortal={false}
@@ -48,6 +53,7 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
         {/*Creates an ActionIcon instead of a Button if only an icon is provided as content.*/}
         {children ? (
           <Mantine.Button
+            aria-label={label}
             className={className}
             // Needed as Safari doesn't focus button elements on mouse down
             // unlike other browsers.
@@ -57,7 +63,8 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
               }
             }}
             onClick={onClick}
-            data-selected={isSelected ? "true" : undefined}
+            aria-pressed={isSelected}
+            data-selected={isSelected || undefined}
             data-test={
               mainTooltip.slice(0, 1).toLowerCase() +
               mainTooltip.replace(/\s+/g, "").slice(1)
@@ -71,6 +78,7 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
         ) : (
           <Mantine.ActionIcon
             className={className}
+            aria-label={label}
             // Needed as Safari doesn't focus button elements on mouse down
             // unlike other browsers.
             onMouseDown={(e) => {
@@ -79,7 +87,8 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
               }
             }}
             onClick={onClick}
-            data-selected={isSelected ? "true" : undefined}
+            aria-pressed={isSelected}
+            data-selected={isSelected || undefined}
             data-test={
               mainTooltip.slice(0, 1).toLowerCase() +
               mainTooltip.replace(/\s+/g, "").slice(1)
diff --git a/packages/mantine/src/toolbar/ToolbarSelect.tsx b/packages/mantine/src/toolbar/ToolbarSelect.tsx
index 968decb9ab..5d203bea16 100644
--- a/packages/mantine/src/toolbar/ToolbarSelect.tsx
+++ b/packages/mantine/src/toolbar/ToolbarSelect.tsx
@@ -1,6 +1,6 @@
 import * as Mantine from "@mantine/core";
 
-import { isSafari } from "@blocknote/core";
+import { assertEmpty, isSafari } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 import { HiChevronDown } from "react-icons/hi";
@@ -10,7 +10,9 @@ export const ToolbarSelect = forwardRef<
   HTMLDivElement,
   ComponentProps["FormattingToolbar"]["Select"]
 >((props, ref) => {
-  const { className, items, isDisabled } = props;
+  const { className, items, isDisabled, ...rest } = props;
+
+  assertEmpty(rest);
 
   const selectedItem = items.filter((p) => p.isSelected)[0];
 
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/BasicTextStyleButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/BasicTextStyleButton.tsx
index 82896ea036..dbd4f4d804 100644
--- a/packages/react/src/components/FormattingToolbar/DefaultButtons/BasicTextStyleButton.tsx
+++ b/packages/react/src/components/FormattingToolbar/DefaultButtons/BasicTextStyleButton.tsx
@@ -1,9 +1,9 @@
 import {
   BlockNoteEditor,
   BlockSchema,
-  formatKeyboardShortcut,
   InlineContentSchema,
   StyleSchema,
+  formatKeyboardShortcut,
 } from "@blocknote/core";
 import { useMemo, useState } from "react";
 import { IconType } from "react-icons";
@@ -85,11 +85,14 @@ export const BasicTextStyleButton = <Style extends BasicTextStyle>(props: {
       return;
     }
 
-    editor.focus();
     if (editor.schema.styleSchema[style].propSchema !== "boolean") {
       throw new Error("can only toggle boolean styles");
     }
     editor.toggleStyles({ [style]: true } as any);
+    setTimeout(() => {
+      // timeout needed to ensure compatibility with Mantine Toolbar useFocusTrap
+      editor.focus();
+    });
   };
 
   const show = useMemo(() => {
@@ -111,6 +114,7 @@ export const BasicTextStyleButton = <Style extends BasicTextStyle>(props: {
       data-test={props.basicTextStyle}
       onClick={() => toggleStyle(props.basicTextStyle)}
       isSelected={active}
+      label={dict.formatting_toolbar[props.basicTextStyle].tooltip}
       mainTooltip={dict.formatting_toolbar[props.basicTextStyle].tooltip}
       secondaryTooltip={formatKeyboardShortcut(
         dict.formatting_toolbar[props.basicTextStyle].secondary_tooltip,
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/ColorStyleButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/ColorStyleButton.tsx
index b0f842c27c..35e95eee25 100644
--- a/packages/react/src/components/FormattingToolbar/DefaultButtons/ColorStyleButton.tsx
+++ b/packages/react/src/components/FormattingToolbar/DefaultButtons/ColorStyleButton.tsx
@@ -85,10 +85,14 @@ export const ColorStyleButton = () => {
         );
       }
 
-      editor.focus();
       color === "default"
         ? editor.removeStyles({ textColor: color })
         : editor.addStyles({ textColor: color });
+
+      setTimeout(() => {
+        // timeout needed to ensure compatibility with Mantine Toolbar useFocusTrap
+        editor.focus();
+      });
     },
     [editor, textColorInSchema]
   );
@@ -101,10 +105,14 @@ export const ColorStyleButton = () => {
         );
       }
 
-      editor.focus();
       color === "default"
         ? editor.removeStyles({ backgroundColor: color })
         : editor.addStyles({ backgroundColor: color });
+
+      setTimeout(() => {
+        // timeout needed to ensure compatibility with Mantine Toolbar useFocusTrap
+        editor.focus();
+      });
     },
     [backgroundColorInSchema, editor]
   );
@@ -133,6 +141,7 @@ export const ColorStyleButton = () => {
         <Components.FormattingToolbar.Button
           className={"bn-button"}
           data-test="colors"
+          label={dict.formatting_toolbar.colors.tooltip}
           mainTooltip={dict.formatting_toolbar.colors.tooltip}
           icon={
             <ColorIcon
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/CreateLinkButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/CreateLinkButton.tsx
index cef0e88efe..f936136dc8 100644
--- a/packages/react/src/components/FormattingToolbar/DefaultButtons/CreateLinkButton.tsx
+++ b/packages/react/src/components/FormattingToolbar/DefaultButtons/CreateLinkButton.tsx
@@ -89,6 +89,7 @@ export const CreateLinkButton = () => {
         <Components.FormattingToolbar.Button
           className={"bn-button"}
           data-test="createLink"
+          label={dict.formatting_toolbar.link.tooltip}
           mainTooltip={dict.formatting_toolbar.link.tooltip}
           secondaryTooltip={formatKeyboardShortcut(
             dict.formatting_toolbar.link.secondary_tooltip,
@@ -99,8 +100,7 @@ export const CreateLinkButton = () => {
       </Components.Generic.Popover.Trigger>
       <Components.Generic.Popover.Content
         className={"bn-popover-content bn-form-popover"}
-        variant={"form-popover"}
-        data-input-popover>
+        variant={"form-popover"}>
         <EditLinkMenuItems url={url} text={text} editLink={update} />
       </Components.Generic.Popover.Content>
     </Components.Generic.Popover.Root>
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/ImageCaptionButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/ImageCaptionButton.tsx
index d535e87193..6163161ea5 100644
--- a/packages/react/src/components/FormattingToolbar/DefaultButtons/ImageCaptionButton.tsx
+++ b/packages/react/src/components/FormattingToolbar/DefaultButtons/ImageCaptionButton.tsx
@@ -83,6 +83,7 @@ export const ImageCaptionButton = () => {
       <Components.Generic.Popover.Trigger>
         <Components.FormattingToolbar.Button
           className={"bn-button"}
+          label={dict.formatting_toolbar.image_caption.tooltip}
           mainTooltip={dict.formatting_toolbar.image_caption.tooltip}
           icon={<RiText />}
           isSelected={imageBlock.props.caption !== ""}
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/NestBlockButtons.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/NestBlockButtons.tsx
index 48512dded6..c08e077144 100644
--- a/packages/react/src/components/FormattingToolbar/DefaultButtons/NestBlockButtons.tsx
+++ b/packages/react/src/components/FormattingToolbar/DefaultButtons/NestBlockButtons.tsx
@@ -54,6 +54,7 @@ export const NestBlockButton = () => {
       data-test="nestBlock"
       onClick={nestBlock}
       isDisabled={!canNestBlock}
+      label={dict.formatting_toolbar.nest.tooltip}
       mainTooltip={dict.formatting_toolbar.nest.tooltip}
       secondaryTooltip={formatKeyboardShortcut(
         dict.formatting_toolbar.nest.secondary_tooltip,
@@ -101,6 +102,7 @@ export const UnnestBlockButton = () => {
       data-test="unnestBlock"
       onClick={unnestBlock}
       isDisabled={!canUnnestBlock}
+      label={dict.formatting_toolbar.unnest.tooltip}
       mainTooltip={dict.formatting_toolbar.unnest.tooltip}
       secondaryTooltip={formatKeyboardShortcut(
         dict.formatting_toolbar.unnest.secondary_tooltip,
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/ReplaceImageButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/ReplaceImageButton.tsx
index cf9a1f67e6..0471d4dec5 100644
--- a/packages/react/src/components/FormattingToolbar/DefaultButtons/ReplaceImageButton.tsx
+++ b/packages/react/src/components/FormattingToolbar/DefaultButtons/ReplaceImageButton.tsx
@@ -49,6 +49,7 @@ export const ReplaceImageButton = () => {
           onClick={() => setIsOpen(!isOpen)}
           isSelected={isOpen}
           mainTooltip={dict.formatting_toolbar.image_replace.tooltip}
+          label={dict.formatting_toolbar.image_replace.tooltip}
           icon={<RiImageEditFill />}
         />
       </Components.Generic.Popover.Trigger>
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/TextAlignButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/TextAlignButton.tsx
index 4911908e4a..ed07506ec9 100644
--- a/packages/react/src/components/FormattingToolbar/DefaultButtons/TextAlignButton.tsx
+++ b/packages/react/src/components/FormattingToolbar/DefaultButtons/TextAlignButton.tsx
@@ -53,8 +53,6 @@ export const TextAlignButton = (props: { textAlignment: TextAlignment }) => {
 
   const setTextAlignment = useCallback(
     (textAlignment: TextAlignment) => {
-      editor.focus();
-
       for (const block of selectedBlocks) {
         if (checkBlockTypeHasDefaultProp("textAlignment", block.type, editor)) {
           editor.updateBlock(block, {
@@ -62,6 +60,11 @@ export const TextAlignButton = (props: { textAlignment: TextAlignment }) => {
           });
         }
       }
+
+      setTimeout(() => {
+        // timeout needed to ensure compatibility with Mantine Toolbar useFocusTrap
+        editor.focus();
+      });
     },
     [editor, selectedBlocks]
   );
@@ -84,6 +87,7 @@ export const TextAlignButton = (props: { textAlignment: TextAlignment }) => {
       }`}
       onClick={() => setTextAlignment(props.textAlignment)}
       isSelected={textAlignment === props.textAlignment}
+      label={dict.formatting_toolbar[`align_${props.textAlignment}`].tooltip}
       mainTooltip={
         dict.formatting_toolbar[`align_${props.textAlignment}`].tooltip
       }
diff --git a/packages/react/src/components/FormattingToolbar/FormattingToolbarController.tsx b/packages/react/src/components/FormattingToolbar/FormattingToolbarController.tsx
index 7f5034cd5b..61dba65c14 100644
--- a/packages/react/src/components/FormattingToolbar/FormattingToolbarController.tsx
+++ b/packages/react/src/components/FormattingToolbar/FormattingToolbarController.tsx
@@ -72,13 +72,21 @@ export const FormattingToolbarController = (props: {
   const state = useUIPluginState(
     editor.formattingToolbar.onUpdate.bind(editor.formattingToolbar)
   );
-  const { isMounted, ref, style } = useUIElementPositioning(
+
+  const { isMounted, ref, style, getFloatingProps } = useUIElementPositioning(
     state?.show || false,
     state?.referencePos || null,
     3000,
     {
       placement,
       middleware: [offset(10), flip()],
+      onOpenChange: (open, event) => {
+        console.log("change", event);
+        if (!open) {
+          editor.formattingToolbar.closeMenu();
+          editor.focus();
+        }
+      },
     }
   );
 
@@ -103,7 +111,7 @@ export const FormattingToolbarController = (props: {
   const Component = props.formattingToolbar || FormattingToolbar;
 
   return (
-    <div ref={combinedRef} style={style}>
+    <div ref={combinedRef} style={style} {...getFloatingProps()}>
       <Component />
     </div>
   );
diff --git a/packages/react/src/components/ImagePanel/ImagePanel.tsx b/packages/react/src/components/ImagePanel/ImagePanel.tsx
index 30790ba903..d7d24288d9 100644
--- a/packages/react/src/components/ImagePanel/ImagePanel.tsx
+++ b/packages/react/src/components/ImagePanel/ImagePanel.tsx
@@ -70,7 +70,6 @@ export const ImagePanel = <
       setOpenTab={setOpenTab}
       tabs={tabs}
       loading={loading}
-      setLoading={setLoading}
     />
   );
 };
diff --git a/packages/react/src/components/ImagePanel/ImagePanelController.tsx b/packages/react/src/components/ImagePanel/ImagePanelController.tsx
index aee8039b7b..730ec1cde1 100644
--- a/packages/react/src/components/ImagePanel/ImagePanelController.tsx
+++ b/packages/react/src/components/ImagePanel/ImagePanelController.tsx
@@ -35,13 +35,20 @@ export const ImagePanelController = <
   const state = useUIPluginState(
     editor.imagePanel.onUpdate.bind(editor.imagePanel)
   );
-  const { isMounted, ref, style } = useUIElementPositioning(
+
+  const { isMounted, ref, style, getFloatingProps } = useUIElementPositioning(
     state?.show || false,
     state?.referencePos || null,
     5000,
     {
       placement: "bottom",
       middleware: [offset(10), flip()],
+      onOpenChange: (open) => {
+        if (!open) {
+          editor.imagePanel!.closeMenu();
+          editor.focus();
+        }
+      },
     }
   );
 
@@ -54,7 +61,7 @@ export const ImagePanelController = <
   const Component = props.imageToolbar || ImagePanel;
 
   return (
-    <div ref={ref} style={style}>
+    <div ref={ref} style={style} {...getFloatingProps()}>
       <Component {...data} />
     </div>
   );
diff --git a/packages/react/src/components/LinkToolbar/DefaultButtons/DeleteLinkButton.tsx b/packages/react/src/components/LinkToolbar/DefaultButtons/DeleteLinkButton.tsx
index 05abd81215..37abbdec86 100644
--- a/packages/react/src/components/LinkToolbar/DefaultButtons/DeleteLinkButton.tsx
+++ b/packages/react/src/components/LinkToolbar/DefaultButtons/DeleteLinkButton.tsx
@@ -12,6 +12,7 @@ export const DeleteLinkButton = (
   return (
     <Components.LinkToolbar.Button
       className={"bn-button"}
+      label={dict.link_toolbar.delete.tooltip}
       mainTooltip={dict.link_toolbar.delete.tooltip}
       isSelected={false}
       onClick={props.deleteLink}
diff --git a/packages/react/src/components/LinkToolbar/DefaultButtons/OpenLinkButton.tsx b/packages/react/src/components/LinkToolbar/DefaultButtons/OpenLinkButton.tsx
index 428717013c..8c71f469ba 100644
--- a/packages/react/src/components/LinkToolbar/DefaultButtons/OpenLinkButton.tsx
+++ b/packages/react/src/components/LinkToolbar/DefaultButtons/OpenLinkButton.tsx
@@ -11,6 +11,7 @@ export const OpenLinkButton = (props: Pick<LinkToolbarProps, "url">) => {
     <Components.LinkToolbar.Button
       className={"bn-button"}
       mainTooltip={dict.link_toolbar.open.tooltip}
+      label={dict.link_toolbar.open.tooltip}
       isSelected={false}
       onClick={() => {
         window.open(props.url, "_blank");
diff --git a/packages/react/src/components/LinkToolbar/LinkToolbarController.tsx b/packages/react/src/components/LinkToolbar/LinkToolbarController.tsx
index 6d59c79caf..8a9079de12 100644
--- a/packages/react/src/components/LinkToolbar/LinkToolbarController.tsx
+++ b/packages/react/src/components/LinkToolbar/LinkToolbarController.tsx
@@ -34,13 +34,19 @@ export const LinkToolbarController = <
   const state = useUIPluginState(
     editor.linkToolbar.onUpdate.bind(editor.linkToolbar)
   );
-  const { isMounted, ref, style } = useUIElementPositioning(
+  const { isMounted, ref, style, getFloatingProps } = useUIElementPositioning(
     state?.show || false,
     state?.referencePos || null,
     4000,
     {
       placement: "top-start",
       middleware: [offset(10), flip()],
+      onOpenChange: (open) => {
+        if (!open) {
+          editor.linkToolbar.closeMenu();
+          editor.focus();
+        }
+      },
     }
   );
 
@@ -53,7 +59,7 @@ export const LinkToolbarController = <
   const Component = props.linkToolbar || LinkToolbar;
 
   return (
-    <div ref={ref} style={style}>
+    <div ref={ref} style={style} {...getFloatingProps()}>
       <Component {...data} {...callbacks} />
     </div>
   );
diff --git a/packages/react/src/components/SideMenu/DefaultButtons/AddBlockButton.tsx b/packages/react/src/components/SideMenu/DefaultButtons/AddBlockButton.tsx
index 43b6e0bc8f..1370079894 100644
--- a/packages/react/src/components/SideMenu/DefaultButtons/AddBlockButton.tsx
+++ b/packages/react/src/components/SideMenu/DefaultButtons/AddBlockButton.tsx
@@ -8,8 +8,9 @@ import {
 } from "@blocknote/core";
 import { AiOutlinePlus } from "react-icons/ai";
 
-import { SideMenuProps } from "../SideMenuProps";
 import { useComponentsContext } from "../../../editor/ComponentsContext";
+import { useDictionary } from "../../../i18n/dictionary";
+import { SideMenuProps } from "../SideMenuProps";
 
 export const AddBlockButton = <
   BSchema extends BlockSchema = DefaultBlockSchema,
@@ -19,10 +20,12 @@ export const AddBlockButton = <
   props: Pick<SideMenuProps<BSchema, I, S>, "addBlock">
 ) => {
   const Components = useComponentsContext()!;
+  const dict = useDictionary();
 
   return (
     <Components.SideMenu.Button
       className={"bn-button"}
+      label={dict.side_menu.add_block_label}
       icon={
         <AiOutlinePlus
           size={24}
diff --git a/packages/react/src/components/SideMenu/DefaultButtons/DragHandleButton.tsx b/packages/react/src/components/SideMenu/DefaultButtons/DragHandleButton.tsx
index d6102b40cd..a201a24220 100644
--- a/packages/react/src/components/SideMenu/DefaultButtons/DragHandleButton.tsx
+++ b/packages/react/src/components/SideMenu/DefaultButtons/DragHandleButton.tsx
@@ -9,6 +9,7 @@ import {
 import { MdDragIndicator } from "react-icons/md";
 
 import { useComponentsContext } from "../../../editor/ComponentsContext";
+import { useDictionary } from "../../../i18n/dictionary";
 import { DragHandleMenu } from "../DragHandleMenu/DragHandleMenu";
 import { SideMenuProps } from "../SideMenuProps";
 
@@ -20,6 +21,7 @@ export const DragHandleButton = <
   props: Omit<SideMenuProps<BSchema, I, S>, "addBlock">
 ) => {
   const Components = useComponentsContext()!;
+  const dict = useDictionary();
 
   const Component = props.dragHandleMenu || DragHandleMenu;
 
@@ -30,11 +32,14 @@ export const DragHandleButton = <
           props.freezeMenu();
         } else {
           props.unfreezeMenu();
+          // TODO
+          props.editor.focus();
         }
       }}
       position={"left"}>
       <Components.Generic.Menu.Trigger>
         <Components.SideMenu.Button
+          label={dict.side_menu.drag_handle_label}
           draggable={true}
           onDragStart={props.blockDragStart}
           onDragEnd={props.blockDragEnd}
diff --git a/packages/react/src/components/SideMenu/SideMenuController.tsx b/packages/react/src/components/SideMenu/SideMenuController.tsx
index 2a01f8826a..71c137ffd6 100644
--- a/packages/react/src/components/SideMenu/SideMenuController.tsx
+++ b/packages/react/src/components/SideMenu/SideMenuController.tsx
@@ -34,7 +34,7 @@ export const SideMenuController = <
   const state = useUIPluginState(
     editor.sideMenu.onUpdate.bind(editor.sideMenu)
   );
-  const { isMounted, ref, style } = useUIElementPositioning(
+  const { isMounted, ref, style, getFloatingProps } = useUIElementPositioning(
     state?.show || false,
     state?.referencePos || null,
     1000,
@@ -52,8 +52,8 @@ export const SideMenuController = <
   const Component = props.sideMenu || SideMenu;
 
   return (
-    <div ref={ref} style={style}>
-      <Component {...data} {...callbacks} />
+    <div ref={ref} style={style} {...getFloatingProps()}>
+      <Component {...data} {...callbacks} editor={editor} />
     </div>
   );
 };
diff --git a/packages/react/src/components/SideMenu/SideMenuProps.ts b/packages/react/src/components/SideMenu/SideMenuProps.ts
index 409b3d4c0c..0a0ce840f1 100644
--- a/packages/react/src/components/SideMenu/SideMenuProps.ts
+++ b/packages/react/src/components/SideMenu/SideMenuProps.ts
@@ -18,6 +18,7 @@ export type SideMenuProps<
   I extends InlineContentSchema = DefaultInlineContentSchema,
   S extends StyleSchema = DefaultStyleSchema
 > = {
+  editor: BlockNoteEditor<BSchema, I, S>;
   dragHandleMenu?: FC<DragHandleMenuProps<BSchema, I, S>>;
 } & Omit<SideMenuState<BSchema, I, S>, keyof UiElementPosition> &
   Pick<
diff --git a/packages/react/src/components/SuggestionMenu/SuggestionMenu.tsx b/packages/react/src/components/SuggestionMenu/SuggestionMenu.tsx
index 31eb6d478a..cff67da17f 100644
--- a/packages/react/src/components/SuggestionMenu/SuggestionMenu.tsx
+++ b/packages/react/src/components/SuggestionMenu/SuggestionMenu.tsx
@@ -9,8 +9,7 @@ export function SuggestionMenu<T extends DefaultReactSuggestionItem>(
   const Components = useComponentsContext()!;
   const dict = useDictionary();
 
-  const { items, loadingState, selectedIndex, setSelectedIndex, onItemClick } =
-    props;
+  const { items, loadingState, selectedIndex, onItemClick } = props;
 
   const loader =
     loadingState === "loading-initial" || loadingState === "loading" ? (
@@ -39,22 +38,22 @@ export function SuggestionMenu<T extends DefaultReactSuggestionItem>(
       renderedItems.push(
         <Components.SuggestionMenu.Item
           className={"bn-suggestion-menu-item"}
-          {...item}
+          item={item}
+          id={`bn-suggestion-menu-item-${i}`}
           isSelected={i === selectedIndex}
           key={item.title}
           onClick={() => onItemClick?.(item)}
-          setSelected={(selected) => {
-            setSelectedIndex(selected ? i : -1);
-          }}
         />
       );
     }
 
     return renderedItems;
-  }, [Components, items, onItemClick, selectedIndex, setSelectedIndex]);
+  }, [Components, items, onItemClick, selectedIndex]);
 
   return (
-    <Components.SuggestionMenu.Root className={"bn-suggestion-menu"}>
+    <Components.SuggestionMenu.Root
+      id="bn-suggestion-menu"
+      className="bn-suggestion-menu">
       {renderedItems}
       {renderedItems.length === 0 &&
         (props.loadingState === "loading" ||
diff --git a/packages/react/src/components/SuggestionMenu/SuggestionMenuController.tsx b/packages/react/src/components/SuggestionMenu/SuggestionMenuController.tsx
index 2e98864762..323badb71c 100644
--- a/packages/react/src/components/SuggestionMenu/SuggestionMenuController.tsx
+++ b/packages/react/src/components/SuggestionMenu/SuggestionMenuController.tsx
@@ -11,10 +11,10 @@ import { FC } from "react";
 import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor";
 import { useUIElementPositioning } from "../../hooks/useUIElementPositioning";
 import { useUIPluginState } from "../../hooks/useUIPluginState";
+import { SuggestionMenu } from "./SuggestionMenu";
 import { SuggestionMenuWrapper } from "./SuggestionMenuWrapper";
 import { getDefaultReactSlashMenuItems } from "./getDefaultReactSlashMenuItems";
 import { DefaultReactSuggestionItem, SuggestionMenuProps } from "./types";
-import { SuggestionMenu } from "./SuggestionMenu";
 
 type ArrayElement<A> = A extends readonly (infer T)[] ? T : never;
 
@@ -75,7 +75,7 @@ export function SuggestionMenuController<
         callback
       )
   );
-  const { isMounted, ref, style } = useUIElementPositioning(
+  const { isMounted, ref, style, getFloatingProps } = useUIElementPositioning(
     state?.show || false,
     state?.referencePos || null,
     2000,
@@ -94,6 +94,11 @@ export function SuggestionMenuController<
           },
         }),
       ],
+      onOpenChange(open) {
+        if (!open) {
+          editor.suggestionMenus.closeMenu();
+        }
+      },
     }
   );
 
@@ -110,7 +115,7 @@ export function SuggestionMenuController<
   }
 
   return (
-    <div ref={ref} style={style}>
+    <div ref={ref} style={style} {...getFloatingProps()}>
       <SuggestionMenuWrapper
         query={state.query}
         closeMenu={callbacks.closeMenu}
diff --git a/packages/react/src/components/SuggestionMenu/SuggestionMenuWrapper.tsx b/packages/react/src/components/SuggestionMenu/SuggestionMenuWrapper.tsx
index aec2c77cc0..d0e2d72a88 100644
--- a/packages/react/src/components/SuggestionMenu/SuggestionMenuWrapper.tsx
+++ b/packages/react/src/components/SuggestionMenu/SuggestionMenuWrapper.tsx
@@ -1,6 +1,7 @@
 import { BlockSchema, InlineContentSchema, StyleSchema } from "@blocknote/core";
-import { FC, useCallback } from "react";
+import { FC, useCallback, useEffect } from "react";
 
+import { useBlockNoteContext } from "../../editor/BlockNoteContext";
 import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor";
 import { useCloseSuggestionMenuNoItems } from "./hooks/useCloseSuggestionMenuNoItems";
 import { useLoadSuggestionMenuItems } from "./hooks/useLoadSuggestionMenuItems";
@@ -15,6 +16,8 @@ export function SuggestionMenuWrapper<Item>(props: {
   onItemClick?: (item: Item) => void;
   suggestionMenuComponent: FC<SuggestionMenuProps<Item>>;
 }) {
+  const ctx = useBlockNoteContext();
+  const setContentEditableProps = ctx!.setContentEditableProps!;
   const editor = useBlockNoteEditor<
     BlockSchema,
     InlineContentSchema,
@@ -46,14 +49,44 @@ export function SuggestionMenuWrapper<Item>(props: {
 
   useCloseSuggestionMenuNoItems(items, usedQuery, closeMenu);
 
-  const { selectedIndex, setSelectedIndex } =
-    useSuggestionMenuKeyboardNavigation(
-      editor,
-      query,
-      items,
-      closeMenu,
-      onItemClickCloseMenu
-    );
+  const { selectedIndex } = useSuggestionMenuKeyboardNavigation(
+    editor,
+    query,
+    items,
+    onItemClickCloseMenu
+  );
+
+  // set basic aria attributes when the menu is open
+  useEffect(() => {
+    setContentEditableProps((p) => ({
+      ...p,
+      "aria-expanded": true,
+      "aria-controls": "bn-suggestion-menu",
+    }));
+    return () => {
+      setContentEditableProps((p) => ({
+        ...p,
+        "aria-expanded": false,
+        "aria-controls": undefined,
+      }));
+    };
+  }, [setContentEditableProps]);
+
+  // set selected item (activedescendent) attributes when selected item changes
+  useEffect(() => {
+    setContentEditableProps((p) => ({
+      ...p,
+      "aria-activedescendant": selectedIndex
+        ? "bn-suggestion-menu-item-" + selectedIndex
+        : undefined,
+    }));
+    return () => {
+      setContentEditableProps((p) => ({
+        ...p,
+        "aria-activedescendant": undefined,
+      }));
+    };
+  }, [setContentEditableProps, selectedIndex]);
 
   const Component = suggestionMenuComponent;
 
@@ -63,7 +96,6 @@ export function SuggestionMenuWrapper<Item>(props: {
       onItemClick={onItemClickCloseMenu}
       loadingState={loadingState}
       selectedIndex={selectedIndex}
-      setSelectedIndex={setSelectedIndex}
     />
   );
 }
diff --git a/packages/react/src/components/SuggestionMenu/hooks/useSuggestionMenuKeyboardNavigation.ts b/packages/react/src/components/SuggestionMenu/hooks/useSuggestionMenuKeyboardNavigation.ts
index 5b5da5abeb..0306914c5e 100644
--- a/packages/react/src/components/SuggestionMenu/hooks/useSuggestionMenuKeyboardNavigation.ts
+++ b/packages/react/src/components/SuggestionMenu/hooks/useSuggestionMenuKeyboardNavigation.ts
@@ -2,16 +2,14 @@ import { BlockNoteEditor } from "@blocknote/core";
 import { useEffect, useState } from "react";
 
 // Hook which handles keyboard navigation of a suggestion menu. Arrow keys are
-// used to select a menu item, enter to execute it, and escape to close the
-// menu.
+// used to select a menu item, enter to execute it
 export function useSuggestionMenuKeyboardNavigation<Item>(
   editor: BlockNoteEditor<any, any, any>,
   query: string,
   items: Item[],
-  closeMenu: () => void,
   onItemClick?: (item: Item) => void
 ) {
-  const [selectedIndex, setSelectedIndex] = useState<number>(-1);
+  const [selectedIndex, setSelectedIndex] = useState<number>(0);
 
   useEffect(() => {
     const handleMenuNavigationKeys = (event: KeyboardEvent) => {
@@ -45,14 +43,6 @@ export function useSuggestionMenuKeyboardNavigation<Item>(
         return true;
       }
 
-      if (event.key === "Escape") {
-        event.preventDefault();
-
-        closeMenu();
-
-        return true;
-      }
-
       return false;
     };
 
@@ -69,12 +59,14 @@ export function useSuggestionMenuKeyboardNavigation<Item>(
         true
       );
     };
-  }, [closeMenu, editor.domElement, items, selectedIndex, onItemClick]);
+  }, [editor.domElement, items, selectedIndex, onItemClick]);
 
   // Resets index when items change
   useEffect(() => {
-    setSelectedIndex(-1);
+    setSelectedIndex(0);
   }, [query]);
 
-  return { selectedIndex, setSelectedIndex };
+  return {
+    selectedIndex: items.length === 0 ? undefined : selectedIndex,
+  };
 }
diff --git a/packages/react/src/components/SuggestionMenu/types.tsx b/packages/react/src/components/SuggestionMenu/types.tsx
index ca49d9fc69..a3d7968331 100644
--- a/packages/react/src/components/SuggestionMenu/types.tsx
+++ b/packages/react/src/components/SuggestionMenu/types.tsx
@@ -16,7 +16,6 @@ export type DefaultReactSuggestionItem = Omit<DefaultSuggestionItem, "key"> & {
 export type SuggestionMenuProps<T> = {
   items: T[];
   loadingState: "loading-initial" | "loading" | "loaded";
-  selectedIndex: number;
+  selectedIndex: number | undefined;
   onItemClick?: (item: T) => void;
-  setSelectedIndex: (index: number) => void;
 };
diff --git a/packages/react/src/components/TableHandles/TableHandle.tsx b/packages/react/src/components/TableHandles/TableHandle.tsx
index 0f902975c8..910afd6845 100644
--- a/packages/react/src/components/TableHandles/TableHandle.tsx
+++ b/packages/react/src/components/TableHandles/TableHandle.tsx
@@ -37,6 +37,7 @@ export const TableHandle = <
         } else {
           props.unfreezeHandles();
           props.showOtherSide();
+          props.editor.focus();
         }
       }}
       position={"right"}>
diff --git a/packages/react/src/components/TableHandles/hooks/useTableHandlesPositioning.ts b/packages/react/src/components/TableHandles/hooks/useTableHandlesPositioning.ts
index e45704c35a..4bd7083fd0 100644
--- a/packages/react/src/components/TableHandles/hooks/useTableHandlesPositioning.ts
+++ b/packages/react/src/components/TableHandles/hooks/useTableHandlesPositioning.ts
@@ -1,8 +1,6 @@
 import { offset, useFloating, useTransitionStyles } from "@floating-ui/react";
 import { useEffect, useMemo } from "react";
 
-import { UiComponentPosition } from "../../../hooks/UiComponentPosition";
-
 function getBoundingClientRectRow(
   referencePosCell: DOMRect | null,
   referencePosTable: DOMRect | null,
@@ -62,7 +60,7 @@ function useTableHandlePosition(
     draggedCellOrientation: "row" | "col";
     mousePos: number;
   }
-): UiComponentPosition {
+) {
   const { refs, update, context, floatingStyles } = useFloating({
     open: show,
     placement: orientation === "row" ? "left" : "top",
@@ -116,8 +114,8 @@ export function useTableHandlesPositioning(
     mousePos: number;
   }
 ): {
-  rowHandle: UiComponentPosition;
-  colHandle: UiComponentPosition;
+  rowHandle: ReturnType<typeof useTableHandlePosition>;
+  colHandle: ReturnType<typeof useTableHandlePosition>;
 } {
   const rowHandle = useTableHandlePosition(
     "row",
diff --git a/packages/react/src/editor/BlockNoteContext.ts b/packages/react/src/editor/BlockNoteContext.ts
index f1e7e8b7f2..1a14ab4805 100644
--- a/packages/react/src/editor/BlockNoteContext.ts
+++ b/packages/react/src/editor/BlockNoteContext.ts
@@ -8,13 +8,14 @@ import {
   InlineContentSchema,
   StyleSchema,
 } from "@blocknote/core";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useState } from "react";
 
 type BlockNoteContextValue<
   BSchema extends BlockSchema = DefaultBlockSchema,
   ISchema extends InlineContentSchema = DefaultInlineContentSchema,
   SSchema extends StyleSchema = DefaultStyleSchema
 > = {
+  setContentEditableProps?: ReturnType<typeof useState<Record<string, any>>>[1]; // copy type of setXXX from useState
   editor?: BlockNoteEditor<BSchema, ISchema, SSchema>;
   colorSchemePreference?: "light" | "dark";
 };
diff --git a/packages/react/src/editor/BlockNoteDefaultUI.tsx b/packages/react/src/editor/BlockNoteDefaultUI.tsx
index 198e75abe2..2f89339079 100644
--- a/packages/react/src/editor/BlockNoteDefaultUI.tsx
+++ b/packages/react/src/editor/BlockNoteDefaultUI.tsx
@@ -1,10 +1,8 @@
-import { filterSuggestionItems } from "@blocknote/core";
 import { FormattingToolbarController } from "../components/FormattingToolbar/FormattingToolbarController";
 import { ImagePanelController } from "../components/ImagePanel/ImagePanelController";
 import { LinkToolbarController } from "../components/LinkToolbar/LinkToolbarController";
 import { SideMenuController } from "../components/SideMenu/SideMenuController";
 import { SuggestionMenuController } from "../components/SuggestionMenu/SuggestionMenuController";
-import { getDefaultReactSlashMenuItems } from "../components/SuggestionMenu/getDefaultReactSlashMenuItems";
 import { TableHandlesController } from "../components/TableHandles/TableHandlesController";
 import { useBlockNoteEditor } from "../hooks/useBlockNoteEditor";
 
@@ -31,15 +29,7 @@ export function BlockNoteDefaultUI(props: BlockNoteDefaultUIProps) {
       {props.formattingToolbar !== false && <FormattingToolbarController />}
       {props.linkToolbar !== false && <LinkToolbarController />}
       {props.slashMenu !== false && (
-        <SuggestionMenuController
-          getItems={async (query) =>
-            filterSuggestionItems(getDefaultReactSlashMenuItems(editor), query)
-          }
-          onItemClick={(item) => {
-            item.onItemClick();
-          }}
-          triggerCharacter="/"
-        />
+        <SuggestionMenuController triggerCharacter="/" />
       )}
       {props.sideMenu !== false && <SideMenuController />}
       {editor.imagePanel && props.imageToolbar !== false && (
diff --git a/packages/react/src/editor/BlockNoteView.tsx b/packages/react/src/editor/BlockNoteView.tsx
index a60f23fa96..7813faab37 100644
--- a/packages/react/src/editor/BlockNoteView.tsx
+++ b/packages/react/src/editor/BlockNoteView.tsx
@@ -83,6 +83,11 @@ function BlockNoteViewComponent<
     ...rest
   } = props;
 
+  // Used so other components (suggestion menu) can set
+  // aria related props to the contenteditable div
+  const [contentEditableProps, setContentEditableProps] =
+    useState<Record<string, any>>();
+
   const existingContext = useBlockNoteContext();
   const systemColorScheme = usePrefersColorScheme();
   const defaultColorScheme =
@@ -140,12 +145,13 @@ function BlockNoteViewComponent<
     return {
       ...existingContext,
       editor,
+      setContentEditableProps,
     };
   }, [existingContext, editor]);
 
   const refs = useMemo(() => {
-    return mergeRefs([containerRef, editor._tiptapEditor.mount, ref]);
-  }, [containerRef, editor._tiptapEditor.mount, ref]);
+    return mergeRefs([containerRef, ref]);
+  }, [containerRef, ref]);
 
   return (
     <BlockNoteContext.Provider value={context as any}>
@@ -159,6 +165,12 @@ function BlockNoteViewComponent<
           data-color-scheme={editorColorScheme}
           {...rest}
           ref={refs}>
+          <div
+            aria-autocomplete="list"
+            aria-haspopup="listbox"
+            ref={editor._tiptapEditor.mount}
+            {...contentEditableProps}
+          />
           {renderChildren}
         </div>
       </EditorContent>
diff --git a/packages/react/src/editor/ComponentsContext.tsx b/packages/react/src/editor/ComponentsContext.tsx
index 5a0f05ac39..7e3d242f10 100644
--- a/packages/react/src/editor/ComponentsContext.tsx
+++ b/packages/react/src/editor/ComponentsContext.tsx
@@ -19,14 +19,16 @@ export type ComponentProps = {
     };
     Button: {
       className?: string;
-      children?: ReactNode;
       mainTooltip: string;
       secondaryTooltip?: string;
       icon?: ReactNode;
       onClick?: (e: MouseEvent) => void;
       isSelected?: boolean;
       isDisabled?: boolean;
-    };
+    } & (
+      | { children: ReactNode; label?: string }
+      | { children?: undefined; label: string }
+    );
     Select: {
       className?: string;
       items: {
@@ -50,13 +52,14 @@ export type ComponentProps = {
       setOpenTab: (name: string) => void;
       defaultOpenTab: string;
       loading: boolean;
-      setLoading: (loading: boolean) => void;
     };
     Button: {
       className?: string;
-      children?: ReactNode;
       onClick: () => void;
-    };
+    } & (
+      | { children: ReactNode; label?: string }
+      | { children?: undefined; label: string }
+    );
     FileInput: {
       className?: string;
       value: File | null;
@@ -84,14 +87,16 @@ export type ComponentProps = {
     };
     Button: {
       className?: string;
-      children?: ReactNode;
       mainTooltip: string;
       secondaryTooltip?: string;
       icon?: ReactNode;
       onClick?: (e: MouseEvent) => void;
       isSelected?: boolean;
       isDisabled?: boolean;
-    };
+    } & (
+      | { children: ReactNode; label?: string }
+      | { children?: undefined; label: string }
+    );
   };
   SideMenu: {
     Root: {
@@ -100,16 +105,19 @@ export type ComponentProps = {
     };
     Button: {
       className?: string;
-      children?: ReactNode;
       onClick?: (e: MouseEvent) => void;
       icon?: ReactNode;
       onDragStart?: (e: React.DragEvent) => void;
       onDragEnd?: (e: React.DragEvent) => void;
       draggable?: boolean;
-    };
+    } & (
+      | { children: ReactNode; label?: string }
+      | { children?: undefined; label: string }
+    );
   };
   SuggestionMenu: {
     Root: {
+      id: string;
       className?: string;
       children?: ReactNode;
     };
@@ -117,11 +125,12 @@ export type ComponentProps = {
       className?: string;
       children?: ReactNode;
     };
-    Item: DefaultReactSuggestionItem & {
+    Item: {
       className?: string;
+      id: string;
       isSelected: boolean;
-      setSelected: (selected: boolean) => void;
       onClick: () => void;
+      item: DefaultReactSuggestionItem;
     };
     Label: {
       className?: string;
@@ -135,12 +144,14 @@ export type ComponentProps = {
   TableHandle: {
     Root: {
       className?: string;
-      children?: ReactNode;
       draggable: boolean;
       onDragStart: (e: React.DragEvent) => void;
       onDragEnd: () => void;
       style?: CSSProperties;
-    };
+    } & (
+      | { children: ReactNode; label?: string }
+      | { children?: undefined; label: string }
+    );
   };
   // TODO: We should try to make everything as generic as we can
   Generic: {
diff --git a/packages/react/src/hooks/UiComponentPosition.ts b/packages/react/src/hooks/UiComponentPosition.ts
deleted file mode 100644
index d2f5a18dce..0000000000
--- a/packages/react/src/hooks/UiComponentPosition.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { CSSProperties } from "react";
-
-export type UiComponentPosition = {
-  isMounted: boolean;
-  ref: (node: HTMLElement | null) => void;
-  style: CSSProperties;
-};
diff --git a/packages/react/src/hooks/usePreventMenuOverflow.ts b/packages/react/src/hooks/usePreventMenuOverflow.ts
deleted file mode 100644
index d2b6f8acf0..0000000000
--- a/packages/react/src/hooks/usePreventMenuOverflow.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { useRef } from "react";
-
-// This hook is used to stop Mantine Menu.Dropdown components from extending
-// beyond the viewport. It does this by dynamically setting the max height of
-// the dropdown. To use it, set the ref on a Menu.Dropdown's parent div, and
-// call updateMaxHeight() in the Menu's `onOpen` listener. Unfortunately, this
-// may mean you have to create an additional parent div, but you cannot set the
-// ref on the Menu or Menu.Dropdown components directly so this is a necessary
-// workaround.
-export function usePreventMenuOverflow() {
-  const ref = useRef<HTMLDivElement>(null);
-
-  return {
-    ref: ref,
-    updateMaxHeight: () => {
-      // Seems a small delay is necessary to get the correct DOM rect - likely
-      // because the menu is not yet fully rendered when the `onOpen` event is
-      // fired.
-      setTimeout(() => {
-        if (!ref.current) {
-          return;
-        }
-
-        if (ref.current.childElementCount > 0) {
-          // Reset any previously set max-height
-          (ref.current.firstElementChild as HTMLDivElement).style.maxHeight =
-            "none";
-
-          // Get the menu DOM rect
-          const domRect =
-            ref.current.firstElementChild!.getBoundingClientRect();
-
-          // Set the menu max height, based on the element position. Checking if
-          // the top of the menu is above the viewport (position < 0) is a quick
-          // way to check if the placement is "top" or "bottom".
-          (
-            ref.current.firstElementChild as HTMLDivElement
-          ).style.maxHeight = `${Math.min(
-            domRect.top >= 0
-              ? window.innerHeight - domRect.top - 20
-              : domRect.bottom - 20
-          )}px`;
-        }
-      }, 10);
-    },
-  };
-}
diff --git a/packages/react/src/hooks/useUIElementPositioning.ts b/packages/react/src/hooks/useUIElementPositioning.ts
index 01e3e6a3e3..7c2f47d56e 100644
--- a/packages/react/src/hooks/useUIElementPositioning.ts
+++ b/packages/react/src/hooks/useUIElementPositioning.ts
@@ -1,18 +1,18 @@
 import {
+  useDismiss,
   useFloating,
   UseFloatingOptions,
+  useInteractions,
   useTransitionStyles,
 } from "@floating-ui/react";
 import { useEffect, useMemo } from "react";
 
-import { UiComponentPosition } from "./UiComponentPosition";
-
 export function useUIElementPositioning(
   show: boolean,
   referencePos: DOMRect | null,
   zIndex: number,
   options?: Partial<UseFloatingOptions>
-): UiComponentPosition {
+) {
   const { refs, update, context, floatingStyles } = useFloating({
     open: show,
     ...options,
@@ -20,6 +20,12 @@ export function useUIElementPositioning(
 
   const { isMounted, styles } = useTransitionStyles(context);
 
+  // handle "escape" and other dismiss events, these will add some listeners to
+  // getFloatingProps which need to be attached to the floating element
+  const dismiss = useDismiss(context);
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);
+
   useEffect(() => {
     update();
   }, [referencePos, update]);
@@ -45,7 +51,17 @@ export function useUIElementPositioning(
         ...floatingStyles,
         zIndex: zIndex,
       },
+      getFloatingProps,
+      getReferenceProps,
     }),
-    [floatingStyles, isMounted, refs.setFloating, styles, zIndex]
+    [
+      floatingStyles,
+      isMounted,
+      refs.setFloating,
+      styles,
+      zIndex,
+      getFloatingProps,
+      getReferenceProps,
+    ]
   );
 }
diff --git a/packages/shadcn/src/form/Form.tsx b/packages/shadcn/src/form/Form.tsx
index dca71e4695..732d6a1e62 100644
--- a/packages/shadcn/src/form/Form.tsx
+++ b/packages/shadcn/src/form/Form.tsx
@@ -1,10 +1,13 @@
 import { ComponentProps } from "@blocknote/react";
 
-import { useShadCNComponentsContext } from "../ShadCNComponentsContext";
+import { assertEmpty } from "@blocknote/core";
 import { useForm } from "react-hook-form";
+import { useShadCNComponentsContext } from "../ShadCNComponentsContext";
 
 export const Form = (props: ComponentProps["Generic"]["Form"]["Root"]) => {
-  const { children } = props;
+  const { children, ...rest } = props;
+
+  assertEmpty(rest);
 
   const ShadCNComponents = useShadCNComponentsContext()!;
 
diff --git a/packages/shadcn/src/form/TextInput.tsx b/packages/shadcn/src/form/TextInput.tsx
index f3e2868b55..255cfdb8e9 100644
--- a/packages/shadcn/src/form/TextInput.tsx
+++ b/packages/shadcn/src/form/TextInput.tsx
@@ -1,6 +1,7 @@
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
+import { assertEmpty } from "@blocknote/core";
 import { useShadCNComponentsContext } from "../ShadCNComponentsContext";
 
 export const TextInput = forwardRef(
@@ -9,15 +10,18 @@ export const TextInput = forwardRef(
       className,
       name,
       label,
-      // icon,
+      icon, // TODO: implement
       value,
       autoFocus,
       placeholder,
       onKeyDown,
       onChange,
       onSubmit,
+      ...rest
     } = props;
 
+    assertEmpty(rest);
+
     const ShadCNComponents = useShadCNComponentsContext()!;
 
     if (!label) {
diff --git a/packages/shadcn/src/menu/Menu.tsx b/packages/shadcn/src/menu/Menu.tsx
index 7e5535d710..6873fed9d1 100644
--- a/packages/shadcn/src/menu/Menu.tsx
+++ b/packages/shadcn/src/menu/Menu.tsx
@@ -1,5 +1,6 @@
 import type * as ShadCNDropdownMenu from "../components/ui/dropdown-menu";
 
+import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { ChevronRight } from "lucide-react";
 import { forwardRef, useMemo } from "react";
@@ -40,10 +41,13 @@ export const Menu = (props: ComponentProps["Generic"]["Menu"]["Root"]) => {
   const {
     children,
     onOpenChange,
-    // position,
+    position, // Unused
     sub,
+    ...rest
   } = props;
 
+  assertEmpty(rest);
+
   const ShadCNComponents = useShadCNComponentsContext()!;
 
   if (sub) {
@@ -67,6 +71,8 @@ export const MenuTrigger = (
 ) => {
   const { children, sub, ...rest } = props;
 
+  assertEmpty(rest);
+
   const ShadCNComponents = useShadCNComponentsContext()!;
 
   const DropdownMenuTrigger = useMemo(
@@ -96,7 +102,9 @@ export const MenuDropdown = forwardRef<
   HTMLDivElement,
   ComponentProps["Generic"]["Menu"]["Dropdown"]
 >((props, ref) => {
-  const { className, children, sub } = props;
+  const { className, children, sub, ...rest } = props;
+
+  assertEmpty(rest);
 
   const ShadCNComponents = useShadCNComponentsContext()!;
 
@@ -126,6 +134,8 @@ export const MenuItem = forwardRef<
   const { className, children, icon, checked, subTrigger, onClick, ...rest } =
     props;
 
+  assertEmpty(rest);
+
   const ShadCNComponents = useShadCNComponentsContext()!;
 
   if (subTrigger) {
@@ -168,7 +178,9 @@ export const MenuDivider = forwardRef<
   HTMLDivElement,
   ComponentProps["Generic"]["Menu"]["Divider"]
 >((props, ref) => {
-  const { className } = props;
+  const { className, ...rest } = props;
+
+  assertEmpty(rest);
 
   const ShadCNComponents = useShadCNComponentsContext()!;
 
@@ -184,7 +196,9 @@ export const MenuLabel = forwardRef<
   HTMLDivElement,
   ComponentProps["Generic"]["Menu"]["Label"]
 >((props, ref) => {
-  const { className, children } = props;
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest);
 
   const ShadCNComponents = useShadCNComponentsContext()!;
 
diff --git a/packages/shadcn/src/panel/Panel.tsx b/packages/shadcn/src/panel/Panel.tsx
index e1e3fb2dda..7704835ff4 100644
--- a/packages/shadcn/src/panel/Panel.tsx
+++ b/packages/shadcn/src/panel/Panel.tsx
@@ -1,6 +1,7 @@
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
+import { assertEmpty } from "@blocknote/core";
 import { useShadCNComponentsContext } from "../ShadCNComponentsContext";
 import { cn } from "../lib/utils";
 
@@ -14,10 +15,12 @@ export const Panel = forwardRef<
     defaultOpenTab,
     openTab,
     setOpenTab,
-    // loading,
-    // setLoading,
+    loading, // TODO: implement loader
+    ...rest
   } = props;
 
+  assertEmpty(rest);
+
   const ShadCNComponents = useShadCNComponentsContext()!;
 
   return (
diff --git a/packages/shadcn/src/panel/PanelButton.tsx b/packages/shadcn/src/panel/PanelButton.tsx
index b90d86d8ed..e1477d909a 100644
--- a/packages/shadcn/src/panel/PanelButton.tsx
+++ b/packages/shadcn/src/panel/PanelButton.tsx
@@ -1,13 +1,16 @@
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
+import { assertEmpty } from "@blocknote/core";
 import { useShadCNComponentsContext } from "../ShadCNComponentsContext";
 
 export const PanelButton = forwardRef<
   HTMLButtonElement,
   ComponentProps["ImagePanel"]["Button"]
 >((props, ref) => {
-  const { className, children, onClick } = props;
+  const { className, children, onClick, label, ...rest } = props;
+
+  assertEmpty(rest);
 
   const ShadCNComponents = useShadCNComponentsContext()!;
 
@@ -15,6 +18,7 @@ export const PanelButton = forwardRef<
     <ShadCNComponents.Button.Button
       type={"submit"}
       className={className}
+      aria-label={label}
       ref={ref}
       onClick={onClick}>
       {children}
diff --git a/packages/shadcn/src/panel/PanelFileInput.tsx b/packages/shadcn/src/panel/PanelFileInput.tsx
index a347d5fd52..3309964e52 100644
--- a/packages/shadcn/src/panel/PanelFileInput.tsx
+++ b/packages/shadcn/src/panel/PanelFileInput.tsx
@@ -1,13 +1,16 @@
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
+import { assertEmpty } from "@blocknote/core";
 import { useShadCNComponentsContext } from "../ShadCNComponentsContext";
 
 export const PanelFileInput = forwardRef<
   HTMLInputElement,
   ComponentProps["ImagePanel"]["FileInput"]
 >((props, ref) => {
-  const { className, value, placeholder, onChange } = props;
+  const { className, value, placeholder, onChange, ...rest } = props;
+
+  assertEmpty(rest);
 
   const ShadCNComponents = useShadCNComponentsContext()!;
 
diff --git a/packages/shadcn/src/panel/PanelTab.tsx b/packages/shadcn/src/panel/PanelTab.tsx
index f008f85eb8..588f63a8be 100644
--- a/packages/shadcn/src/panel/PanelTab.tsx
+++ b/packages/shadcn/src/panel/PanelTab.tsx
@@ -1,13 +1,16 @@
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
+import { assertEmpty } from "@blocknote/core";
 import { cn } from "../lib/utils";
 
 export const PanelTab = forwardRef<
   HTMLDivElement,
   ComponentProps["ImagePanel"]["TabPanel"]
 >((props, ref) => {
-  const { className, children } = props;
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest);
 
   return (
     <div
diff --git a/packages/shadcn/src/panel/PanelTextInput.tsx b/packages/shadcn/src/panel/PanelTextInput.tsx
index 84f29cda45..dc63080329 100644
--- a/packages/shadcn/src/panel/PanelTextInput.tsx
+++ b/packages/shadcn/src/panel/PanelTextInput.tsx
@@ -1,6 +1,7 @@
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
+import { assertEmpty } from "@blocknote/core";
 import { useShadCNComponentsContext } from "../ShadCNComponentsContext";
 import { cn } from "../lib/utils";
 
@@ -8,7 +9,9 @@ export const PanelTextInput = forwardRef<
   HTMLInputElement,
   ComponentProps["ImagePanel"]["TextInput"]
 >((props, ref) => {
-  const { className, value, placeholder, onKeyDown, onChange } = props;
+  const { className, value, placeholder, onKeyDown, onChange, ...rest } = props;
+
+  assertEmpty(rest);
 
   const ShadCNComponents = useShadCNComponentsContext()!;
 
diff --git a/packages/shadcn/src/popover/popover.tsx b/packages/shadcn/src/popover/popover.tsx
index a71638514f..619c9631ca 100644
--- a/packages/shadcn/src/popover/popover.tsx
+++ b/packages/shadcn/src/popover/popover.tsx
@@ -1,6 +1,7 @@
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
+import { assertEmpty } from "@blocknote/core";
 import { useShadCNComponentsContext } from "../ShadCNComponentsContext";
 import { cn } from "../lib/utils";
 
@@ -10,9 +11,12 @@ export const Popover = (
   const {
     children,
     opened,
-    // position
+    position, // unused
+    ...rest
   } = props;
 
+  assertEmpty(rest);
+
   const ShadCNComponents = useShadCNComponentsContext()!;
 
   return (
@@ -24,7 +28,9 @@ export const Popover = (
 
 export const PopoverTrigger = forwardRef(
   (props: ComponentProps["Generic"]["Popover"]["Trigger"], ref: any) => {
-    const { children } = props;
+    const { children, ...rest } = props;
+
+    assertEmpty(rest);
 
     const ShadCNComponents = useShadCNComponentsContext()!;
 
@@ -40,7 +46,9 @@ export const PopoverContent = forwardRef<
   HTMLDivElement,
   ComponentProps["Generic"]["Popover"]["Content"]
 >((props, ref) => {
-  const { className, variant, children } = props;
+  const { className, variant, children, ...rest } = props;
+
+  assertEmpty(rest);
 
   const ShadCNComponents = useShadCNComponentsContext()!;
 
diff --git a/packages/shadcn/src/sideMenu/SideMenu.tsx b/packages/shadcn/src/sideMenu/SideMenu.tsx
index 307196bd19..2555ad3498 100644
--- a/packages/shadcn/src/sideMenu/SideMenu.tsx
+++ b/packages/shadcn/src/sideMenu/SideMenu.tsx
@@ -1,3 +1,4 @@
+import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
@@ -5,7 +6,9 @@ export const SideMenu = forwardRef<
   HTMLDivElement,
   ComponentProps["SideMenu"]["Root"]
 >((props, ref) => {
-  const { className, children } = props;
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest);
 
   return (
     <div className={className} ref={ref}>
diff --git a/packages/shadcn/src/sideMenu/SideMenuButton.tsx b/packages/shadcn/src/sideMenu/SideMenuButton.tsx
index 15bb34fa06..6dd903fc00 100644
--- a/packages/shadcn/src/sideMenu/SideMenuButton.tsx
+++ b/packages/shadcn/src/sideMenu/SideMenuButton.tsx
@@ -1,6 +1,7 @@
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
+import { assertEmpty } from "@blocknote/core";
 import { useShadCNComponentsContext } from "../ShadCNComponentsContext";
 import { cn } from "../lib/utils";
 
@@ -8,7 +9,21 @@ export const SideMenuButton = forwardRef<
   HTMLButtonElement,
   ComponentProps["SideMenu"]["Button"]
 >((props, ref) => {
-  const { className, children, icon, onClick, ...rest } = props;
+  const {
+    className,
+    children,
+    icon,
+    onClick,
+    onDragEnd,
+    onDragStart,
+    draggable,
+    label,
+    ...rest
+  } = props;
+
+  // false, because rest props can be added by ariakit when button is used as a trigger
+  // assertEmpty in this case is only used at typescript level, not runtime level
+  assertEmpty(rest, false);
 
   const ShadCNComponents = useShadCNComponentsContext()!;
 
@@ -17,7 +32,11 @@ export const SideMenuButton = forwardRef<
       variant={"ghost"}
       className={cn(className, "text-gray-400")}
       ref={ref}
+      aria-label={label}
       onClick={onClick}
+      onDragStart={onDragStart}
+      onDragEnd={onDragEnd}
+      draggable={draggable}
       {...rest}>
       {icon}
       {children}
diff --git a/packages/shadcn/src/style.css b/packages/shadcn/src/style.css
index 622f9fad75..9bf3956f8a 100644
--- a/packages/shadcn/src/style.css
+++ b/packages/shadcn/src/style.css
@@ -5,104 +5,105 @@
 @tailwind utilities;
 
 .bn-container {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
 
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
 
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
+  --primary: 222.2 47.4% 11.2%;
+  --primary-foreground: 210 40% 98%;
 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
 
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 222.2 84% 4.9%;
 
-    --radius: 0.5rem;
+  --radius: 0.5rem;
 }
 
 .bn-container.dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
 
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
 
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
+  --primary: 210 40% 98%;
+  --primary-foreground: 222.2 47.4% 11.2%;
 
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
 
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
 
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
 
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+  --ring: 212.7 26.8% 83.9%;
 }
 
 .bn-container * {
-    @apply border-border;
+  @apply border-border;
 }
 .bn-editor {
-    @apply bg-background text-foreground;
+  @apply bg-background text-foreground;
 }
 
 :focus-visible {
-    outline: none;
+  outline: none;
 }
 
 [data-radix-popper-content-wrapper] {
-    z-index: 99999 !important;
+  z-index: 99999 !important;
 }
 
 .bn-side-menu {
-    display: flex;
-    justify-content: center;
+  display: flex;
+  justify-content: center;
 }
 
 .bn-side-menu .bn-button {
-    padding: 0;
-    height: 24px;
+  padding: 0;
+  height: 24px;
 }
 
 .bn-select {
-    max-height: var(--radix-select-content-available-height);
+  max-height: var(--radix-select-content-available-height);
 }
 
 .bn-menu-dropdown {
-    max-height: var(--radix-dropdown-menu-content-available-height);
+  max-height: var(--radix-dropdown-menu-content-available-height);
 }
 
 .bn-color-picker-dropdown {
-    overflow: auto;
+  overflow: auto;
 }
 
-.bn-suggestion-menu-item[data-hovered] {
-    background-color: hsl(var(--accent));
+.bn-suggestion-menu-item[aria-selected="true"],
+.bn-suggestion-menu-item:hover {
+  background-color: hsl(var(--accent));
 }
diff --git a/packages/shadcn/src/suggestionMenu/SuggestionMenu.tsx b/packages/shadcn/src/suggestionMenu/SuggestionMenu.tsx
index 1be0b58fea..6c99af5454 100644
--- a/packages/shadcn/src/suggestionMenu/SuggestionMenu.tsx
+++ b/packages/shadcn/src/suggestionMenu/SuggestionMenu.tsx
@@ -1,16 +1,21 @@
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
+import { assertEmpty } from "@blocknote/core";
 import { cn } from "../lib/utils";
 
 export const SuggestionMenu = forwardRef<
   HTMLDivElement,
   ComponentProps["SuggestionMenu"]["Root"]
 >((props, ref) => {
-  const { className, children } = props;
+  const { className, children, id, ...rest } = props;
+
+  assertEmpty(rest);
 
   return (
     <div
+      id={id}
+      role="listbox"
       // Styles from ShadCN DropdownMenuContent component
       className={cn(
         "z-50 min-w-[8rem] overflow-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
diff --git a/packages/shadcn/src/suggestionMenu/SuggestionMenuEmptyItem.tsx b/packages/shadcn/src/suggestionMenu/SuggestionMenuEmptyItem.tsx
index 36dc71d98e..22dbaba221 100644
--- a/packages/shadcn/src/suggestionMenu/SuggestionMenuEmptyItem.tsx
+++ b/packages/shadcn/src/suggestionMenu/SuggestionMenuEmptyItem.tsx
@@ -1,13 +1,16 @@
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
+import { assertEmpty } from "@blocknote/core";
 import { cn } from "../lib/utils";
 
 export const SuggestionMenuEmptyItem = forwardRef<
   HTMLDivElement,
   ComponentProps["SuggestionMenu"]["EmptyItem"]
 >((props, ref) => {
-  const { className, children } = props;
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest);
 
   return (
     <div
diff --git a/packages/shadcn/src/suggestionMenu/SuggestionMenuItem.tsx b/packages/shadcn/src/suggestionMenu/SuggestionMenuItem.tsx
index 4be3a6ab2d..261acb82f6 100644
--- a/packages/shadcn/src/suggestionMenu/SuggestionMenuItem.tsx
+++ b/packages/shadcn/src/suggestionMenu/SuggestionMenuItem.tsx
@@ -1,5 +1,6 @@
+import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
-import { forwardRef, useCallback } from "react";
+import { forwardRef } from "react";
 import { useShadCNComponentsContext } from "../ShadCNComponentsContext";
 import { cn } from "../lib/utils";
 
@@ -9,55 +10,35 @@ export const SuggestionMenuItem = forwardRef<
 >((props, ref) => {
   const ShadCNComponents = useShadCNComponentsContext()!;
 
-  const {
-    className,
-    title,
-    subtext,
-    // group,
-    icon,
-    badge,
-    // aliases,
-    // onItemClick,
-    isSelected,
-    setSelected,
-    onClick,
-  } = props;
+  const { className, item, isSelected, onClick, id, ...rest } = props;
 
-  const handleMouseLeave = useCallback(() => {
-    setSelected?.(false);
-  }, [setSelected]);
-
-  const handleMouseEnter = useCallback(() => {
-    setSelected?.(true);
-  }, [setSelected]);
+  assertEmpty(rest);
 
   return (
     <div
-      // component="div"
       // Styles from ShadCN DropdownMenuItem component
       className={cn(
         "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         className
       )}
       ref={ref}
+      id={id}
       onClick={onClick}
-      // Ensures an item selected with both mouse & keyboard doesn't get deselected on mouse leave.
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      data-hovered={isSelected ? "" : undefined}>
-      {icon && (
+      role="option"
+      aria-selected={isSelected || undefined}>
+      {item.icon && (
         <div className="p-3" data-position="left">
-          {icon}
+          {item.icon}
         </div>
       )}
       <div className="flex-1">
-        <div className="text-base">{title}</div>
-        <div className="text-xs">{subtext}</div>
+        <div className="text-base">{item.title}</div>
+        <div className="text-xs">{item.subtext}</div>
       </div>
-      {badge && (
+      {item.badge && (
         <div data-position="right" className="text-xs">
           <ShadCNComponents.Badge.Badge variant={"secondary"}>
-            {badge}
+            {item.badge}
           </ShadCNComponents.Badge.Badge>
         </div>
       )}
diff --git a/packages/shadcn/src/suggestionMenu/SuggestionMenuLabel.tsx b/packages/shadcn/src/suggestionMenu/SuggestionMenuLabel.tsx
index 2373aa9ed3..447029393e 100644
--- a/packages/shadcn/src/suggestionMenu/SuggestionMenuLabel.tsx
+++ b/packages/shadcn/src/suggestionMenu/SuggestionMenuLabel.tsx
@@ -1,3 +1,4 @@
+import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 import { cn } from "../lib/utils";
@@ -6,7 +7,9 @@ export const SuggestionMenuLabel = forwardRef<
   HTMLDivElement,
   ComponentProps["SuggestionMenu"]["Label"]
 >((props, ref) => {
-  const { className, children } = props;
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest);
 
   return (
     <div
diff --git a/packages/shadcn/src/suggestionMenu/SuggestionMenuLoader.tsx b/packages/shadcn/src/suggestionMenu/SuggestionMenuLoader.tsx
index 044fbf6c45..ff43ed5ea8 100644
--- a/packages/shadcn/src/suggestionMenu/SuggestionMenuLoader.tsx
+++ b/packages/shadcn/src/suggestionMenu/SuggestionMenuLoader.tsx
@@ -1,3 +1,4 @@
+import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
@@ -5,7 +6,9 @@ export const SuggestionMenuLoader = forwardRef<
   HTMLDivElement,
   ComponentProps["SuggestionMenu"]["Loader"]
 >((props, ref) => {
-  const { className, children } = props;
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest);
 
   return (
     <div className={className} ref={ref}>
diff --git a/packages/shadcn/src/tableHandle/TableHandle.tsx b/packages/shadcn/src/tableHandle/TableHandle.tsx
index 92ddf1f9c4..55f7ef4f41 100644
--- a/packages/shadcn/src/tableHandle/TableHandle.tsx
+++ b/packages/shadcn/src/tableHandle/TableHandle.tsx
@@ -1,6 +1,7 @@
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
+import { assertEmpty } from "@blocknote/core";
 import { useShadCNComponentsContext } from "../ShadCNComponentsContext";
 import { cn } from "../lib/utils";
 
@@ -15,9 +16,14 @@ export const TableHandle = forwardRef<
     onDragStart,
     onDragEnd,
     style,
+    label,
     ...rest
   } = props;
 
+  // false, because rest props can be added by shadcn when button is used as a trigger
+  // assertEmpty in this case is only used at typescript level, not runtime level
+  assertEmpty(rest, false);
+
   const ShadCNComponents = useShadCNComponentsContext()!;
 
   return (
@@ -25,6 +31,7 @@ export const TableHandle = forwardRef<
       variant={"ghost"}
       className={cn(className, "p-0 h-fit w-fit text-gray-400")}
       ref={ref}
+      aria-label={label}
       draggable={draggable}
       onDragStart={onDragStart}
       onDragEnd={onDragEnd}
diff --git a/packages/shadcn/src/toolbar/Toolbar.tsx b/packages/shadcn/src/toolbar/Toolbar.tsx
index ad20f31b73..68df11d73f 100644
--- a/packages/shadcn/src/toolbar/Toolbar.tsx
+++ b/packages/shadcn/src/toolbar/Toolbar.tsx
@@ -1,6 +1,7 @@
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
+import { assertEmpty } from "@blocknote/core";
 import { useShadCNComponentsContext } from "../ShadCNComponentsContext";
 import { cn } from "../lib/utils";
 
@@ -9,7 +10,9 @@ type ToolbarProps = ComponentProps["FormattingToolbar"]["Root"] &
 
 export const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(
   (props, ref) => {
-    const { className, children, onMouseEnter, onMouseLeave } = props;
+    const { className, children, onMouseEnter, onMouseLeave, ...rest } = props;
+
+    assertEmpty(rest);
 
     const ShadCNComponents = useShadCNComponentsContext()!;
 
@@ -44,9 +47,14 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
       isSelected,
       isDisabled,
       onClick,
+      label,
       ...rest
     } = props;
 
+    // false, because rest props can be added by shadcn when button is used as a trigger
+    // assertEmpty in this case is only used at typescript level, not runtime level
+    assertEmpty(rest, false);
+
     const ShadCNComponents = useShadCNComponentsContext()!;
 
     const trigger =
@@ -57,6 +65,7 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
           disabled={isDisabled}
           onClick={onClick}
           ref={ref}
+          aria-label={label}
           {...rest}>
           {icon}
           {children}
@@ -67,6 +76,7 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
             className,
             "data-[state=open]:bg-accent data-[state=closed]:text-accent-foreground"
           )}
+          aria-label={label}
           onClick={onClick}
           pressed={isSelected}
           disabled={isDisabled}
@@ -87,7 +97,7 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
         <ShadCNComponents.Tooltip.TooltipContent
           className={"flex flex-col items-center"}>
           <span>{mainTooltip}</span>
-          <span>{secondaryTooltip}</span>
+          {secondaryTooltip && <span>{secondaryTooltip}</span>}
         </ShadCNComponents.Tooltip.TooltipContent>
       </ShadCNComponents.Tooltip.Tooltip>
     );
@@ -98,7 +108,9 @@ export const ToolbarSelect = forwardRef<
   HTMLDivElement,
   ComponentProps["FormattingToolbar"]["Select"]
 >((props, ref) => {
-  const { className, items, isDisabled } = props;
+  const { className, items, isDisabled, ...rest } = props;
+
+  assertEmpty(rest);
 
   const ShadCNComponents = useShadCNComponentsContext()!;
 
diff --git a/tests/package.json b/tests/package.json
index c5e0fba80f..56ba0a20cb 100644
--- a/tests/package.json
+++ b/tests/package.json
@@ -6,7 +6,7 @@
     "build": "tsc",
     "lint": "eslint src --max-warnings 0",
     "playwright": "npx playwright test",
-    "test:updateSnaps": "docker run --rm  -e RUN_IN_DOCKER=true --network host -v $(pwd)/..:/work/ -w /work/tests -it mcr.microsoft.com/playwright:v1.42.1-focal npx playwright test -u",
+    "test:updateSnaps": "docker run --rm  -e RUN_IN_DOCKER=true --network host -v $(pwd)/..:/work/ -w /work/tests -it mcr.microsoft.com/playwright:v1.43.1-focal npx playwright test -u",
     "test-ct": "playwright test -c playwright-ct.config.ts --headed",
     "test-ct:updateSnaps": "docker run --rm  -e RUN_IN_DOCKER=true --network host -v $(pwd)/..:/work/ -w /work/tests -it mcr.microsoft.com/playwright:v1.35.1-focal npm install && playwright test -c playwright-ct.config.ts -u",
     "clean": "rimraf dist"
diff --git a/tests/src/end-to-end/ariakit/ariakit.test.ts-snapshots/ariakit-link-toolbar-chromium-linux.png b/tests/src/end-to-end/ariakit/ariakit.test.ts-snapshots/ariakit-link-toolbar-chromium-linux.png
index 356d503dfc..7b871bd6cd 100644
Binary files a/tests/src/end-to-end/ariakit/ariakit.test.ts-snapshots/ariakit-link-toolbar-chromium-linux.png and b/tests/src/end-to-end/ariakit/ariakit.test.ts-snapshots/ariakit-link-toolbar-chromium-linux.png differ
diff --git a/tests/src/end-to-end/ariakit/ariakit.test.ts-snapshots/ariakit-link-toolbar-firefox-linux.png b/tests/src/end-to-end/ariakit/ariakit.test.ts-snapshots/ariakit-link-toolbar-firefox-linux.png
index c012e8bb04..8831396415 100644
Binary files a/tests/src/end-to-end/ariakit/ariakit.test.ts-snapshots/ariakit-link-toolbar-firefox-linux.png and b/tests/src/end-to-end/ariakit/ariakit.test.ts-snapshots/ariakit-link-toolbar-firefox-linux.png differ
diff --git a/tests/src/end-to-end/ariakit/ariakit.test.ts-snapshots/ariakit-link-toolbar-webkit-linux.png b/tests/src/end-to-end/ariakit/ariakit.test.ts-snapshots/ariakit-link-toolbar-webkit-linux.png
index c18c050770..823ed76acc 100644
Binary files a/tests/src/end-to-end/ariakit/ariakit.test.ts-snapshots/ariakit-link-toolbar-webkit-linux.png and b/tests/src/end-to-end/ariakit/ariakit.test.ts-snapshots/ariakit-link-toolbar-webkit-linux.png differ
diff --git a/tests/src/end-to-end/ariakit/ariakit.test.ts-snapshots/ariakit-slash-menu-chromium-linux.png b/tests/src/end-to-end/ariakit/ariakit.test.ts-snapshots/ariakit-slash-menu-chromium-linux.png
index 41d965d56e..2c1bdcebb9 100644
Binary files a/tests/src/end-to-end/ariakit/ariakit.test.ts-snapshots/ariakit-slash-menu-chromium-linux.png and b/tests/src/end-to-end/ariakit/ariakit.test.ts-snapshots/ariakit-slash-menu-chromium-linux.png differ
diff --git a/tests/src/end-to-end/ariakit/ariakit.test.ts-snapshots/ariakit-slash-menu-firefox-linux.png b/tests/src/end-to-end/ariakit/ariakit.test.ts-snapshots/ariakit-slash-menu-firefox-linux.png
index aa4f6598ad..12bdc94f88 100644
Binary files a/tests/src/end-to-end/ariakit/ariakit.test.ts-snapshots/ariakit-slash-menu-firefox-linux.png and b/tests/src/end-to-end/ariakit/ariakit.test.ts-snapshots/ariakit-slash-menu-firefox-linux.png differ
diff --git a/tests/src/end-to-end/ariakit/ariakit.test.ts-snapshots/ariakit-slash-menu-webkit-linux.png b/tests/src/end-to-end/ariakit/ariakit.test.ts-snapshots/ariakit-slash-menu-webkit-linux.png
index 26011373e8..58a98a1d8e 100644
Binary files a/tests/src/end-to-end/ariakit/ariakit.test.ts-snapshots/ariakit-slash-menu-webkit-linux.png and b/tests/src/end-to-end/ariakit/ariakit.test.ts-snapshots/ariakit-slash-menu-webkit-linux.png differ
diff --git a/tests/src/end-to-end/keyboardhandlers/keyboardhandlers.test.ts b/tests/src/end-to-end/keyboardhandlers/keyboardhandlers.test.ts
index 15500f99e9..2f0c38a268 100644
--- a/tests/src/end-to-end/keyboardhandlers/keyboardhandlers.test.ts
+++ b/tests/src/end-to-end/keyboardhandlers/keyboardhandlers.test.ts
@@ -49,7 +49,8 @@ test.describe("Check Keyboard Handlers' Behaviour", () => {
     await page.mouse.click(x + 35, y + height / 2, { clickCount: 2 });
     await page.locator(ITALIC_BUTTON_SELECTOR).click();
     await page.waitForTimeout(500);
-    await page.mouse.click(x + 35, y + height / 2);
+    await page.keyboard.press("Control+ArrowLeft");
+    await page.keyboard.press("ArrowRight");
     await page.keyboard.press("Enter");
 
     await compareDocToSnapshot(page, "enterPreservesMarks.json");
@@ -63,11 +64,12 @@ test.describe("Check Keyboard Handlers' Behaviour", () => {
     await insertHeading(page, 3);
 
     await page.waitForTimeout(500);
-    const element = await page.locator(H_ONE_BLOCK_SELECTOR);
-    const boundingBox = (await element.boundingBox())!;
-    const { x, y, height } = boundingBox;
-
-    await page.mouse.click(x + 35, y + height / 2);
+    await page.keyboard.press("ArrowUp");
+    await page.keyboard.press("ArrowUp");
+    await page.keyboard.press("ArrowUp");
+    await page.keyboard.press("ArrowUp");
+    await page.keyboard.press("Control+ArrowLeft");
+    await page.keyboard.press("ArrowRight");
     await page.keyboard.press("Enter");
 
     await compareDocToSnapshot(page, "enterPreservesNestedBlocks.json");
diff --git a/tests/src/end-to-end/shadcn/shadcn.test.ts-snapshots/shadcn-link-toolbar-chromium-linux.png b/tests/src/end-to-end/shadcn/shadcn.test.ts-snapshots/shadcn-link-toolbar-chromium-linux.png
index ae98972054..f28f6eaa16 100644
Binary files a/tests/src/end-to-end/shadcn/shadcn.test.ts-snapshots/shadcn-link-toolbar-chromium-linux.png and b/tests/src/end-to-end/shadcn/shadcn.test.ts-snapshots/shadcn-link-toolbar-chromium-linux.png differ
diff --git a/tests/src/end-to-end/shadcn/shadcn.test.ts-snapshots/shadcn-link-toolbar-firefox-linux.png b/tests/src/end-to-end/shadcn/shadcn.test.ts-snapshots/shadcn-link-toolbar-firefox-linux.png
index c0ffd24004..947107a593 100644
Binary files a/tests/src/end-to-end/shadcn/shadcn.test.ts-snapshots/shadcn-link-toolbar-firefox-linux.png and b/tests/src/end-to-end/shadcn/shadcn.test.ts-snapshots/shadcn-link-toolbar-firefox-linux.png differ
diff --git a/tests/src/end-to-end/shadcn/shadcn.test.ts-snapshots/shadcn-link-toolbar-webkit-linux.png b/tests/src/end-to-end/shadcn/shadcn.test.ts-snapshots/shadcn-link-toolbar-webkit-linux.png
index ff5cf7f8c8..6f324d4256 100644
Binary files a/tests/src/end-to-end/shadcn/shadcn.test.ts-snapshots/shadcn-link-toolbar-webkit-linux.png and b/tests/src/end-to-end/shadcn/shadcn.test.ts-snapshots/shadcn-link-toolbar-webkit-linux.png differ
diff --git a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-link-toolbar-chromium-linux.png b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-link-toolbar-chromium-linux.png
index f73d6eac99..b60320e829 100644
Binary files a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-link-toolbar-chromium-linux.png and b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-link-toolbar-chromium-linux.png differ
diff --git a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-link-toolbar-firefox-linux.png b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-link-toolbar-firefox-linux.png
index d64cdc9474..1e6ed3132a 100644
Binary files a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-link-toolbar-firefox-linux.png and b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-link-toolbar-firefox-linux.png differ
diff --git a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-link-toolbar-webkit-linux.png b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-link-toolbar-webkit-linux.png
index bd06366c08..fd0fa4f30e 100644
Binary files a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-link-toolbar-webkit-linux.png and b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-link-toolbar-webkit-linux.png differ