feat: accessibility improvements

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.
-
-

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}

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;
 }

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={() => {

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>;
 };

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 && (

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

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 || "")}

packages/ariakit/src/panel/PanelButton.tsx

@@ -1,19 +1,22 @@
 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";
 
 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>

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>

packages/ariakit/src/panel/PanelTab.tsx

@@ -1,11 +1,14 @@
+import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
 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}>

packages/ariakit/src/panel/PanelTextInput.tsx

@@ -1,14 +1,16 @@
 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";
 
 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>