wip: misc accessibility fixes

examples/03-theming/03-theming-css/styles.css

@@ -4,6 +4,9 @@
 }
 
 /* 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-slash-menu
+  .mantine-Menu-item[aria-selected="true"],
+.bn-container[data-theming-css-demo] .bn-slash-menu .mantine-Menu-item:hover {
   background-color: blue;
 }

packages/core/src/blocks/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.ts

@@ -1,4 +1,5 @@
 import { InputRule } from "@tiptap/core";
+import { getCurrentBlockContentType } from "../../../api/getCurrentBlockContentType";
 import {
   PropSchema,
   createBlockSpecFromStronglyTypedTiptapNode,
@@ -7,7 +8,6 @@ import {
 import { createDefaultBlockDOMOutputSpec } from "../../defaultBlockHelpers";
 import { defaultProps } from "../../defaultProps";
 import { handleEnter } from "../ListItemKeyboardShortcuts";
-import { getCurrentBlockContentType } from "../../../api/getCurrentBlockContentType";
 
 export const bulletListItemPropSchema = {
   ...defaultProps,
@@ -124,6 +124,7 @@ const BulletListItemBlockContent = createStronglyTypedTiptapNode({
       {
         ...(this.options.domAttributes?.blockContent || {}),
         ...HTMLAttributes,
+        role: "listitem",
       },
       this.options.domAttributes?.inlineContent || {}
     );

packages/core/src/blocks/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.ts

@@ -1,4 +1,5 @@
 import { InputRule } from "@tiptap/core";
+import { getCurrentBlockContentType } from "../../../api/getCurrentBlockContentType";
 import {
   PropSchema,
   createBlockSpecFromStronglyTypedTiptapNode,
@@ -8,7 +9,6 @@ import { createDefaultBlockDOMOutputSpec } from "../../defaultBlockHelpers";
 import { defaultProps } from "../../defaultProps";
 import { handleEnter } from "../ListItemKeyboardShortcuts";
 import { NumberedListIndexingPlugin } from "./NumberedListIndexingPlugin";
-import { getCurrentBlockContentType } from "../../../api/getCurrentBlockContentType";
 
 export const numberedListItemPropSchema = {
   ...defaultProps,
@@ -145,6 +145,7 @@ const NumberedListItemBlockContent = createStronglyTypedTiptapNode({
       {
         ...(this.options.domAttributes?.blockContent || {}),
         ...HTMLAttributes,
+        role: "listitem",
       },
       this.options.domAttributes?.inlineContent || {}
     );

packages/core/src/editor/BlockNoteEditor.ts

@@ -27,10 +27,10 @@ import {
   PartialBlock,
 } from "../blocks/defaultBlocks";
 import { FormattingToolbarProsemirrorPlugin } from "../extensions/FormattingToolbar/FormattingToolbarPlugin";
+import { ImagePanelProsemirrorPlugin } from "../extensions/ImagePanel/ImageToolbarPlugin";
 import { LinkToolbarProsemirrorPlugin } from "../extensions/LinkToolbar/LinkToolbarPlugin";
 import { SideMenuProsemirrorPlugin } from "../extensions/SideMenu/SideMenuPlugin";
 import { SuggestionMenuProseMirrorPlugin } from "../extensions/SuggestionMenu/SuggestionPlugin";
-import { ImagePanelProsemirrorPlugin } from "../extensions/ImagePanel/ImageToolbarPlugin";
 import { TableHandlesProsemirrorPlugin } from "../extensions/TableHandles/TableHandlesPlugin";
 import { UniqueID } from "../extensions/UniqueID/UniqueID";
 import {
@@ -781,7 +781,7 @@ export class BlockNoteEditor<
    * @param styles The styles to remove.
    */
   public removeStyles(styles: Styles<SSchema>) {
-    this._tiptapEditor.view.focus();
+    // this._tiptapEditor.view.focus();
 
     for (const style of Object.keys(styles)) {
       this._tiptapEditor.commands.unsetMark(style);
@@ -793,7 +793,7 @@ export class BlockNoteEditor<
    * @param styles The styles to toggle.
    */
   public toggleStyles(styles: Styles<SSchema>) {
-    this._tiptapEditor.view.focus();
+    // this._tiptapEditor.view.focus();
 
     for (const [style, value] of Object.entries(styles)) {
       const config = this.schema.styleSchema[style];

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";
 
@@ -92,10 +92,22 @@ 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: () => {
+            return this.editor.commands.blur();
+          },
+        };
+      },
+    }),
+
     // nodes
     Doc,
     BlockContainer.configure({
-      editor: opts.editor as any,
+      editor: opts.editor,
       domAttributes: opts.domAttributes,
     }),
     BlockGroup.configure({

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 },
+        {
+          ...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.