GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — Comment emoji picker: Base UI nativeButton error and an extra tab stop (shadcn) · Issue #3324 · TypeCellOS/BlockNote

Comment emoji picker: Base UI nativeButton error and an extra tab stop (shadcn) #3324

New issue
Copy link
New issue
Copy link
Open
#3331
Open
Comment emoji picker: Base UI nativeButton error and an extra tab stop (shadcn)#3324
#3331
Copy link

Description

@kseo
kseo
opened on Nov 10, 2026
Issue body actions

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

  1. Use BlockNoteView from @blocknote/shadcn with comments enabled.
  2. Add a comment and hover it so the action toolbar shows.
  3. Watch the console, and Tab through the toolbar.

Versions: @blocknote/core / react / shadcn 0.55.0, @base-ui/react 1.8.0, React 19.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions

      You are visitor 01402520 — GeezerVison does not store the pages you look up.
      Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.