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]>
TypeCellOS · May 5, 2024 · 8a95f55 · 8a95f55
1 parent 218758d
commit 8a95f55
Show file tree

Hide file tree

Showing 123 changed files with 1,135 additions and 863 deletions.
diff --git a/docs/pages/docs/advanced/component-libraries.mdx b/docs/pages/docs/advanced/component-libraries.mdx
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>

diff --git 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
@@ -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}>

diff --git a/packages/ariakit/src/panel/PanelTextInput.tsx b/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>