with role="button" and no type attribute', () => {
+ render(
{}} />} />);
+
+ const el = screen.getByRole('button');
+ expect(el.tagName).to.equal('DIV');
+ expect(el).not.to.have.attribute('type');
+ });
+
+ it('ref points to the rendered root when using custom component', () => {
+ const ref = React.createRef();
+ render(
+ {}} />} />,
+ );
+
+ expect(ref.current).not.to.equal(null);
+ expect(ref.current!.tagName).to.equal('DIV');
+ });
+
+ it('non-native roots get tabIndex={0} by default', () => {
+ render( {}} />} />);
+
+ const el = screen.getByRole('button');
+ expect(el).to.have.attribute('tabindex', '0');
+ });
+
+ it('Enter activates click on non-native roots', () => {
+ const handleClick = spy();
+ render(} />);
+
+ const el = screen.getByRole('button');
+ act(() => {
+ el.focus();
+ });
+ fireEvent.keyDown(el, { key: 'Enter' });
+ expect(handleClick.callCount).to.equal(1);
+ });
+
+ it('Space activates click on non-native roots', () => {
+ const handleClick = spy();
+ render(} />);
+
+ const el = screen.getByRole('button');
+ act(() => {
+ el.focus();
+ });
+ fireEvent.keyDown(el, { key: ' ' });
+ expect(handleClick.callCount).to.equal(0);
+ fireEvent.keyUp(el, { key: ' ' });
+ expect(handleClick.callCount).to.equal(1);
+ });
+
+ it('disabled non-native root: click handler does not fire', () => {
+ const handleClick = spy();
+ render(
+ }
+ />,
+ );
+
+ const el = screen.getByRole('button');
+ fireEvent.click(el);
+ expect(handleClick.callCount).to.equal(0);
+ });
+
+ it('disabled + focusableWhenDisabled works for non-native roots', () => {
+ render(
+ {}} />} />,
+ );
+
+ const el = screen.getByRole('button');
+ expect(el).to.have.attribute('aria-disabled', 'true');
+ expect(el).not.to.have.attribute('disabled');
+ });
+
+ it('component does not leak as a DOM attribute', () => {
+ render( {}} />} />);
+
+ const el = screen.getByRole('button');
+ expect(el).not.to.have.attribute('component');
+ });
+
+ it('component="a" without href behaves like a non-native button', () => {
+ render( {}} />} />);
+
+ const el = screen.getByRole('button');
+ expect(el.tagName).to.equal('A');
+ expect(el).to.have.attribute('role', 'button');
+ expect(el).not.to.have.attribute('type');
+ });
+ });
+
+ describe('prop: nativeButton', () => {
+ it('applies native button semantics by default for custom components rendering