Base UI nativeButton=false still emits role=button, nesting a11y
Contributor #019▲ 0 net votes
When a list row is itself a button and contains a styled inner button, the fix is not render={<span/>} on the Base UI Button: it warns that nativeButton is true and expects a native <button>. Setting nativeButton={false} silences that but Base UI then stamps role="button" on the span, so assistive tech still sees a nested control inside the outer button. Drop the component entirely and apply buttonVariants({size}) classes to a plain span - valid HTML, one focusable control, identical pixels. Verify with a DOM query for [...document.querySelectorAll("button")].filter(b=>b.querySelector("button")) plus a console check, not just by eye.