Fixed action toolbar in comments not being keyboard accessible

packages/ariakit/src/comments/Comment.tsx

@@ -1,12 +1,8 @@
 import { Group as AriakitGroup } from "@ariakit/react";
 
 import { assertEmpty } from "@blocknote/core";
-import {
-  ComponentProps,
-  useDictionary,
-  useFocusWithin,
-} from "@blocknote/react";
-import { forwardRef, useState } from "react";
+import { ComponentProps, useDictionary } from "@blocknote/react";
+import { forwardRef } from "react";
 
 const AuthorInfo = forwardRef<
   HTMLDivElement,
@@ -64,27 +60,12 @@ export const Comment = forwardRef<
 
   assertEmpty(rest, false);
 
-  const [hovered, setHovered] = useState(false);
-  const { focused, ref: focusRef } = useFocusWithin();
-
-  const doShowActions =
-    actions &&
-    (showActions === true ||
-      showActions === undefined ||
-      (showActions === "hover" && hovered) ||
-      focused ||
-      emojiPickerOpen);
-
   return (
-    <AriakitGroup
-      ref={ref}
-      className={className}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-    >
-      {doShowActions ? (
+    <AriakitGroup ref={ref} className={className}>
+      {actions && (showActions !== false || emojiPickerOpen) ? (
         <AriakitGroup
-          ref={focusRef}
+          className={"bn-comment-toolbar"}
+          data-show={emojiPickerOpen ? true : (showActions ?? true)}
           style={{
             position: "absolute",
             right: 0,

packages/mantine/src/comments/Comment.tsx

@@ -1,7 +1,6 @@
 import { assertEmpty } from "@blocknote/core";
-import { ComponentProps, mergeRefs, useDictionary } from "@blocknote/react";
+import { ComponentProps, useDictionary } from "@blocknote/react";
 import { Avatar, Group, Skeleton, Text } from "@mantine/core";
-import { useHover } from "@mantine/hooks";
 import { forwardRef } from "react";
 
 const AuthorInfo = forwardRef<
@@ -64,21 +63,14 @@ export const Comment = forwardRef<
     ...rest
   } = props;
 
-  const { hovered, ref: hoverRef } = useHover();
-  const mergedRef = mergeRefs([ref, hoverRef]);
   assertEmpty(rest, false);
 
-  const doShowActions =
-    actions &&
-    (showActions === true ||
-      showActions === undefined ||
-      (showActions === "hover" && hovered) ||
-      emojiPickerOpen);
-
   return (
-    <Group pos="relative" ref={mergedRef} className={className}>
-      {doShowActions ? (
+    <Group pos="relative" ref={ref} className={className}>
+      {actions && (showActions !== false || emojiPickerOpen) ? (
         <Group
+          className={"bn-comment-toolbar"}
+          data-show={emojiPickerOpen ? true : (showActions ?? true)}
           style={{
             position: "absolute",
             right: 0,

packages/react/src/components/Comments/Comment.tsx

@@ -270,6 +270,7 @@ export const Comment = ({
           >
             <Components.Generic.Toolbar.Button
               key={"add-reaction"}
+              label={dict.comments.actions.add_reaction}
               mainTooltip={dict.comments.actions.add_reaction}
               variant="compact"
             >
@@ -281,6 +282,7 @@ export const Comment = ({
           (thread.resolved ? (
             <Components.Generic.Toolbar.Button
               key={"reopen"}
+              label={dict.comments.actions.reopen}
               mainTooltip={dict.comments.actions.reopen}
               variant="compact"
               onClick={onReopen}
@@ -290,6 +292,7 @@ export const Comment = ({
           ) : (
             <Components.Generic.Toolbar.Button
               key={"resolve"}
+              label={dict.comments.actions.resolve}
               mainTooltip={dict.comments.actions.resolve}
               variant="compact"
               onClick={onResolve}
@@ -306,6 +309,7 @@ export const Comment = ({
             <Components.Generic.Menu.Trigger>
               <Components.Generic.Toolbar.Button
                 key={"more-actions"}
+                label={dict.comments.actions.more_actions}
                 mainTooltip={dict.comments.actions.more_actions}
                 variant="compact"
               >

packages/react/src/components/Comments/EmojiPicker.tsx

@@ -3,6 +3,7 @@ import { ReactNode, useState } from "react";
 import { useBlockNoteContext } from "../../editor/BlockNoteContext.js";
 import { useComponentsContext } from "../../editor/ComponentsContext.js";
 import { usePortalElement } from "../../editor/PortalElementOverride.js";
+import { useDictionary } from "../../i18n/dictionary.js";
 import Picker from "./EmojiMartPicker.js";
 
 export const EmojiPicker = (props: {
@@ -11,6 +12,7 @@ export const EmojiPicker = (props: {
   children: ReactNode;
 }) => {
   const [open, setOpen] = useState(false);
+  const dict = useDictionary();
 
   const Components = useComponentsContext()!;
   const blockNoteContext = useBlockNoteContext()!;
@@ -20,6 +22,9 @@ export const EmojiPicker = (props: {
     <Components.Generic.Popover.Root open={open} portalElement={portalElement}>
       <Components.Generic.Popover.Trigger>
         <div
+          aria-label={dict.comments.actions.add_reaction}
+          // The child control handles keyboard activation.
+          tabIndex={-1}
           onClick={(event) => {
             // Needed as the Picker component's onClickOutside handler
             // fires immediately after otherwise, preventing the popover

packages/react/src/components/Comments/a11y/Comment.a11y.test.ts

@@ -0,0 +1,34 @@
+import { focusCommentAction, openComments } from "./helpers.js";
+import { expect, test } from "vite-plus/test";
+import { page } from "vite-plus/test/browser";
+import { pressKey } from "@root/tests/a11y/helpers.js";
+
+test("comment actions toolbar: Add reaction", async () => {
+  await openComments();
+  await focusCommentAction("Add reaction");
+  await pressKey("Enter");
+  await expect
+    .element(page.getByRole("dialog", { name: "Add reaction" }))
+    .toBeVisible();
+});
+
+test("comment actions toolbar: Resolve", async () => {
+  const { threadStore, threadId } = await openComments();
+  await focusCommentAction("Resolve");
+  await pressKey("Enter");
+  await expect.poll(() => threadStore.getThread(threadId).resolved).toBe(true);
+});
+
+test("comment actions toolbar: Re-open", async () => {
+  const { threadStore, threadId } = await openComments({ resolved: true });
+  await focusCommentAction("Re-open");
+  await pressKey("Enter");
+  await expect.poll(() => threadStore.getThread(threadId).resolved).toBe(false);
+});
+
+test("comment actions toolbar: More actions", async () => {
+  await openComments();
+  await focusCommentAction("More actions");
+  await pressKey("Enter");
+  await expect.element(page.getByRole("menu")).toBeVisible();
+});

packages/react/src/components/Comments/a11y/helpers.ts

@@ -0,0 +1,65 @@
+import { createUserStore } from "@blocknote/core";
+import {
+  CommentsExtension,
+  DefaultThreadStoreAuth,
+} from "@blocknote/core/comments";
+import { YjsThreadStore } from "@blocknote/core/y";
+import { ThreadsSidebar } from "@blocknote/react";
+import { createElement } from "react";
+import * as Y from "@y/y";
+
+import { expect } from "vite-plus/test";
+import { page } from "vite-plus/test/browser";
+import { openEditor, pressKey } from "@root/tests/a11y/helpers.js";
+
+export async function openComments({ resolved = false } = {}) {
+  const doc = new Y.Doc();
+  const threadStore = new YjsThreadStore(
+    "user",
+    doc.get("threads"),
+    new DefaultThreadStoreAuth("user", "editor"),
+  );
+  const thread = await threadStore.createThread({
+    initialComment: { body: [{ type: "paragraph", content: "A comment" }] },
+  });
+  if (resolved) {
+    await threadStore.resolveThread({ threadId: thread.id });
+  }
+  const users = createUserStore(async () => [
+    {
+      id: "user",
+      username: "Test user",
+      avatarUrl: "/image.svg",
+    },
+  ]);
+  await users.loadUsers(["user"]);
+  await openEditor([{ type: "paragraph", content: "Commented document" }], {
+    extensions: [CommentsExtension({ threadStore, resolveUsers: users })],
+    children: createElement(ThreadsSidebar, { filter: "all" }),
+  });
+  return { threadStore, threadId: thread.id };
+}
+
+export async function focusCommentAction(control: string) {
+  const toolbar = page.getByRole("toolbar");
+  const button = toolbar.getByRole("button", { name: control, exact: true });
+  await expect.element(button).toBeEnabled();
+  // Start at "Before editor" and reach the action without hovering the comment.
+  for (let step = 0; step < 10; step++) {
+    if (button.element() === document.activeElement) {
+      break;
+    }
+    await pressKey("Tab");
+  }
+  await expect
+    .element(button, { message: `${control} is reachable with Tab` })
+    .toHaveFocus();
+  await expect
+    .poll(
+      () =>
+        getComputedStyle(button.element().closest(".bn-comment-toolbar")!)
+          .opacity,
+    )
+    .toBe("1");
+  return { toolbar, button };
+}

packages/react/src/editor/styles.css

@@ -276,6 +276,18 @@ SideMenuController offsets its position to keep it centered on the line. */
   flex-grow: 1;
 }
 
+/* Keep hover actions in the tab order and reveal them when focus enters. */
+.bn-comment-toolbar[data-show="hover"] {
+  opacity: 0;
+  pointer-events: none;
+}
+
+*:hover > .bn-comment-toolbar[data-show="hover"],
+*:focus-within > .bn-comment-toolbar[data-show="hover"] {
+  opacity: 1;
+  pointer-events: auto;
+}
+
 /* Thread sidebar styling */
 .bn-threads-sidebar {
   border-radius: var(--bn-border-radius-medium);

packages/shadcn/src/comments/Comment.tsx

@@ -1,10 +1,6 @@
 import { assertEmpty } from "@blocknote/core";
-import {
-  ComponentProps,
-  useDictionary,
-  useFocusWithin,
-} from "@blocknote/react";
-import { forwardRef, useState } from "react";
+import { ComponentProps, useDictionary } from "@blocknote/react";
+import { forwardRef } from "react";
 
 import { cn } from "../lib/utils.js";
 import { useShadCNComponentsContext } from "../ShadCNComponentsContext.js";
@@ -77,26 +73,13 @@ export const Comment = forwardRef<
 
   assertEmpty(rest);
 
-  const [hovered, setHovered] = useState(false);
-  const { focused, ref: focusRef } = useFocusWithin();
-
-  const doShowActions =
-    actions &&
-    (showActions === true ||
-      showActions === undefined ||
-      (showActions === "hover" && hovered) ||
-      focused ||
-      emojiPickerOpen);
-
   return (
-    <div
-      ref={ref}
-      className={cn(className, "relative flex flex-col gap-2")}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-    >
-      {doShowActions ? (
-        <div className={"absolute top-0 right-0 z-10"} ref={focusRef}>
+    <div ref={ref} className={cn(className, "relative flex flex-col gap-2")}>
+      {actions && (showActions !== false || emojiPickerOpen) ? (
+        <div
+          className={"bn-comment-toolbar absolute top-0 right-0 z-10"}
+          data-show={emojiPickerOpen ? true : (showActions ?? true)}
+        >
           {actions}
         </div>
       ) : null}

tests/a11y/helpers.tsx

@@ -1,8 +1,9 @@
-import type { PartialBlock } from "@blocknote/core";
+import type { ExtensionFactoryInstance, PartialBlock } from "@blocknote/core";
 import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
 import { useCreateBlockNote } from "@blocknote/react";
+import type { ReactNode } from "react";
 import { render } from "vitest-browser-react";
 import axe from "axe-core";
 import { expect, type TestContext } from "vite-plus/test";
@@ -27,17 +28,23 @@ function EditorFixture({
   initialContent,
   editable,
   theme,
+  extensions,
+  children,
 }: {
   initialContent: PartialBlock[];
   editable: boolean;
   theme: "light" | "dark";
+  extensions?: ExtensionFactoryInstance[];
+  children?: ReactNode;
 }) {
-  const editor = useCreateBlockNote({ initialContent });
+  const editor = useCreateBlockNote({ initialContent, extensions });
   return (
     <main style={{ maxWidth: 900, margin: "80px auto", padding: 24 }}>
       <h1>BlockNote accessibility fixture</h1>
       <button type="button">Before editor</button>
-      <BlockNoteView editor={editor} theme={theme} editable={editable} />
+      <BlockNoteView editor={editor} theme={theme} editable={editable}>
+        {children}
+      </BlockNoteView>
       <button type="button">After editor</button>
     </main>
   );
@@ -48,19 +55,29 @@ export async function openEditor(
   {
     editable = true,
     theme = "light",
-  }: { editable?: boolean; theme?: "light" | "dark" } = {},
+    extensions,
+    children,
+  }: {
+    editable?: boolean;
+    theme?: "light" | "dark";
+    extensions?: ExtensionFactoryInstance[];
+    children?: ReactNode;
+  } = {},
 ) {
   await page.viewport(1280, 900);
   await render(
     <EditorFixture
       initialContent={initialContent}
       editable={editable}
       theme={theme}
-    />,
+      extensions={extensions}
+    >
+      {children}
+    </EditorFixture>,
   );
-  await expect.element(page.getByRole("textbox")).toBeVisible();
+  await expect.element(page.getByRole("textbox").first()).toBeVisible();
   await expect
-    .element(page.getByRole("textbox"))
+    .element(page.getByRole("textbox").first())
     .toHaveAttribute("contenteditable", String(editable));
   await document.fonts.ready;
   if (screenReader) {