What happens
With @blocknote/shadcn (0.55.0, and the code is unchanged in 0.57.0), hovering a comment logs this Base UI error every time the comment's action toolbar renders, and again for each comment that has reactions:
Base UI: A component that acts as a button expected a native <button> because the nativeButton prop is true. Rendering a non-<button> removes native button semantics, which can impact forms and accessibility.
Why
EmojiPicker (packages/react/src/components/Comments/EmojiPicker.tsx) passes a <div onClick> wrapping the toolbar button as the child of Components.Generic.Popover.Trigger. The shadcn PopoverTrigger (packages/shadcn/src/popover/popover.tsx) hands that child to Base UI's Popover.Trigger as render, and Base UI's default nativeButton: true expects a <button>.
Accessibility impact
The wrapper is rendered as <div tabindex="0" aria-haspopup="dialog" aria-expanded="false"> around the real <button>:
- keyboard users get an extra tab stop with no role or name in front of the button;
aria-expanded / aria-haspopup sit on the wrapper, so screen readers do not hear the open state on the button they actually focus.
Suggested fix
Let the toolbar button itself be the trigger: pass it straight to Popover.Trigger and move the toggle to the popover's onOpenChange, rather than wrapping it in a div. That puts the ARIA state on the focusable button and removes the extra stop. A smaller fix is passing nativeButton={false} when the trigger is not a button, but that leaves the ARIA state on the wrapper.
Reproduce
- Use
BlockNoteView from @blocknote/shadcn with comments enabled.
- Add a comment and hover it so the action toolbar shows.
- Watch the console, and Tab through the toolbar.
Versions: @blocknote/core / react / shadcn 0.55.0, @base-ui/react 1.8.0, React 19.