fix(react): give comment action buttons an accessible name

[adarshsm]

Summary

Part of #2824 (the "unlabeled buttons" half). The icon-only action buttons on a comment in the threads sidebar / floating thread — Add reaction, Resolve / Re-open and More actions — have no accessible name, so screen readers announce each of them as just "button".

Rationale

The toolbar buttons in all three UI kits (packages/mantine/src/toolbar/ToolbarButton.tsx, packages/ariakit/src/toolbar/ToolbarButton.tsx, packages/shadcn/src/toolbar/Toolbar.tsx) set aria-label from the label prop. mainTooltip is only used for the visual tooltip and data-test. The formatting toolbar buttons pass both (e.g. BasicTextStyleButton, CreateLinkButton), but the four icon-only buttons in Comment.tsx only pass mainTooltip, so their aria-label ends up undefined and the button contains nothing but an SVG.

Changes

• packages/react/src/components/Comments/Comment.tsx: pass label (same dictionary string as mainTooltip) to the add reaction, resolve, re-open and more actions buttons.

The Save / Cancel buttons shown while editing a comment already have visible text, so they're left as they are.

Impact

• These buttons now get an aria-label attribute. Their data-test values (e.g. moreactions, which the comments e2e test uses) still come from mainTooltip, so they don't change. No visual change.
• Not addressed here: the first half of Comment thread actions: hover-only controls and unlabeled buttons in ThreadsSideba #2824 (the actions only render on hover, so keyboard users can't reach them). That needs a decision on show-on-focus behaviour across the three UI kits' Comment components, which I'd rather leave to you.

Testing

• New packages/react/src/components/Comments/Comment.test.tsx. It renders Comment to static markup with the UI kit components stubbed out (the stub button forwards label to aria-label like the real ones) and checks the accessible names of the action buttons, for both a resolved and an unresolved thread.
• Verified it fails on main ([undefined, undefined, undefined]) and passes with the fix.
• vp test --run in packages/react: 3 files / 6 tests pass. vp lint and vp fmt --check are clean on the changed files.
• I couldn't run the Docker browser suite on this machine.

Checklist

• Code follows the project's coding standards.
• Unit tests covering the new feature have been added.
• All existing tests pass. (packages/react unit tests only; e2e not run locally.)
• The documentation has been updated to reflect the new feature (n/a)

🤖 Generated with Claude Code

[vercel]

@adarshsm is attempting to deploy a commit to the TypeCell Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

• Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[pkg-pr-new]

Open in StackBlitz

@blocknote/ariakit

npm i https://pkg.pr.new/@blocknote/ariakit@3137

@blocknote/code-block

npm i https://pkg.pr.new/@blocknote/code-block@3137

@blocknote/core

npm i https://pkg.pr.new/@blocknote/core@3137

@blocknote/diagram-block

npm i https://pkg.pr.new/@blocknote/diagram-block@3137

@blocknote/mantine

npm i https://pkg.pr.new/@blocknote/mantine@3137

@blocknote/math-block

npm i https://pkg.pr.new/@blocknote/math-block@3137

@blocknote/react

npm i https://pkg.pr.new/@blocknote/react@3137

@blocknote/server-util

npm i https://pkg.pr.new/@blocknote/server-util@3137

@blocknote/shadcn

npm i https://pkg.pr.new/@blocknote/shadcn@3137

@blocknote/xl-ai

npm i https://pkg.pr.new/@blocknote/xl-ai@3137

@blocknote/xl-docx-exporter

npm i https://pkg.pr.new/@blocknote/xl-docx-exporter@3137

@blocknote/xl-email-exporter

npm i https://pkg.pr.new/@blocknote/xl-email-exporter@3137

@blocknote/xl-multi-column

npm i https://pkg.pr.new/@blocknote/xl-multi-column@3137

@blocknote/xl-odt-exporter

npm i https://pkg.pr.new/@blocknote/xl-odt-exporter@3137

@blocknote/xl-pdf-exporter

npm i https://pkg.pr.new/@blocknote/xl-pdf-exporter@3137

@blocknote/xl-typst-exporter

npm i https://pkg.pr.new/@blocknote/xl-typst-exporter@3137

commit: e9ae5d5