feat: accessibility improvements (#718)

* wip

* Refactored image toolbar

* Refactored image toolbar, hyperlink toolbar, and table handles

* Implemented PR feedback

* Implemented PR feedback

* Cleaned up component code

* wip: ariakit

* wip

* fix

* fix merge

* wip

* wip

* fix

* wip

* wip

* wip: suggestionmenu

* extract suggestion menu

* wip

* side menu button

* move mantine elements to mantine dir

* shadcn wip

* wip

* fix

* shadcn fixes

* refactor: Extract image panel components (#684)

* Extracted Mantine panel components

* Added ShadCN panel implementation

* Added Ariakit image panel components

* Revert "refactor: Extract image panel components (#684)" (#716)

This reverts commit 600f0c5.

* refactor: Extract image panel components (#717)

* Extracted Mantine panel components

* Added ShadCN panel implementation

* Added Ariakit image panel components

* refactor: Extract Mantine & Ariakit packages (#689)

* Extracted mantine & ariakit packages

* fix: ShadCN color styles button & form components (#696)

* Added ShadCN color styles button & form components

* refactor: UI libs CSS+API refactor (#698)

* Cleaned up component context API

* WIP

* Refactored CSS & ShadCN API

* Fixed Ariakit component props

* Fixed Mantine component props

* Fixed ShadCN component props

* Cleanup

* Misc fixes

* - Added remaining components to context
- Re-added refs to all relevant components
- Refactored ShadCN context
- Simplified how class names are set in `react` package
- Added prefixes to all UI specific class names
- Fixed remaining select/menu/popover overflow issues
- Fixed examples
- Fixed build

* Changed ShadCN suggestion menu to use Card

* Small fix

* Fixed linting

* Fixed `BlockNoteViewRaw` typing

* Misc fixes

* Misc fixes

* Fixed unit tests

* Fixed Mantine sub menus

* Misc UI fixes

* Misc changes

* fix import

* fix tablehandles performance issue / max call stack

* Fixed PW tests

* Small fix

* Added ShadCN/Ariakit tests

* fix draghandles

* add vercel rewrites

* improve shadcn setup

* Fixed remaining Ariakit/ShadCN/Mantine styles

* extract strings from react package

* extract all strings

* clean i18n setup

* fix build

* Fixed dark mode for Ariakit/ShadCN

* Misc fixes

---------

Co-authored-by: yousefed <[email protected]>

---------

Co-authored-by: yousefed <[email protected]>

---------

Co-authored-by: yousefed <[email protected]>

---------

Co-authored-by: yousefed <[email protected]>

* Updated package versions

* Updated screenshots

* Updated screenshots

* Updated screenshots

* Updated screenshots

* Updated docs

* Addressed most TODOs and small fixes

* Added ShadCN form

* update docs

* i18n + docs

* fix keyboard handling of menus (tab, escape, etc.)

* remove unnecessary default props  on BlockNoteDefaultUI

* fix mantine menu items with keyboard + small cleanup

* add button labels and type checks

* Updated theming code

* suggestion menu aria improvements

* small toolbarButton fix

* playwright fixes

* fix lint

* fix build and lint

* fix pw tests

* address PR feedback

* Merge remote-tracking branch 'origin/refactor/multi-ui-libs' into feature/accessibility-improvements

---------

Co-authored-by: Matthew Lipski <[email protected]>
Co-authored-by: Matthew Lipski <[email protected]>

Author: YousefED

docs/pages/docs/advanced/component-libraries.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.
-
-

docs/pages/docs/styling-theming/overriding-css.mdx

@@ -13,6 +13,7 @@ export function RemoveBlockButton(props: SideMenuProps) {
 
   return (
     <Components.SideMenu.Button
+      label="Remove block"
       icon={
         <MdDelete
           size={24}

examples/02-ui-components/04-side-menu-buttons/RemoveBlockButton.tsx

@@ -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/03-theming/03-theming-css/styles.css

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

examples/05-custom-schema/03-font-style/App.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/Form.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/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";
 
@@ -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/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";
 
@@ -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/Panel.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>