[ButtonUnstyled] Don't set redundant role=button

packages/mui-core/src/ButtonUnstyled/ButtonUnstyled.test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { createMount, createClientRender, describeConformanceUnstyled } from 'test/utils';
 import ButtonUnstyled, { buttonUnstyledClasses } from '@mui/core/ButtonUnstyled';
+import { expect } from 'chai';
 
 describe('<ButtonUnstyled />', () => {
   const mount = createMount();
@@ -19,4 +20,35 @@ describe('<ButtonUnstyled />', () => {
       },
     },
   }));
+
+  describe('role attribute', () => {
+    it('is set when the root component is an HTML element other than a button', () => {
+      const { getByRole } = render(<ButtonUnstyled component="span" />);
+      expect(getByRole('button')).not.to.equal(null);
+    });
+
+    it('is set when the root component is a component that renders an HTML component other than a button', () => {
+      const WrappedSpan = React.forwardRef(
+        (
+          props: React.HTMLAttributes<HTMLSpanElement>,
+          ref: React.ForwardedRef<HTMLSpanElement>,
+        ) => <span role={props.role} ref={ref} />,
+      );
+
+      const { getByRole } = render(<ButtonUnstyled component={WrappedSpan} />);
+      expect(getByRole('button')).not.to.equal(null);
+    });
+
+    it('is not set when the root component is a component that renders an HTML button component', () => {
+      const WrappedButton = React.forwardRef(
+        (
+          props: React.HTMLAttributes<HTMLButtonElement>,
+          ref: React.ForwardedRef<HTMLButtonElement>,
+        ) => <button role={props.role} ref={ref} />,
+      );
+
+      const { getByRole } = render(<ButtonUnstyled component={WrappedButton} />);
+      expect(getByRole('button')).not.to.have.attribute('role');
+    });
+  });
 });

packages/mui-core/src/ButtonUnstyled/useButton.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+  unstable_setRef as setRef,
   unstable_useEventCallback as useEventCallback,
   unstable_useForkRef as useForkRef,
   unstable_useIsFocusVisible as useIsFocusVisible,
@@ -145,11 +146,21 @@ export default function useButton(props: UseButtonProps) {
     },
   );
 
+  const handleOwnRef = useForkRef(focusVisibleRef, buttonRef);
+  const handleRef = useForkRef(ref, handleOwnRef);
+
+  const [hostElementName, setHostElementName] = React.useState<string>('');
+
+  const updateRef = (instance: HTMLElement | null) => {
+    setHostElementName(instance?.tagName ?? '');
+    setRef(handleRef, instance);
+  };
+
   const buttonProps: Record<string, unknown> = {};
-  if (elementType === 'button') {
+  if (hostElementName === 'BUTTON') {
     buttonProps.type = type ?? 'button';
     buttonProps.disabled = disabled;
-  } else {
+  } else if (hostElementName !== '') {
     if (!href && !to) {
       buttonProps.role = 'button';
     }
@@ -158,9 +169,6 @@ export default function useButton(props: UseButtonProps) {
     }
   }
 
-  const handleOwnRef = useForkRef(focusVisibleRef, buttonRef);
-  const handleRef = useForkRef(ref, handleOwnRef);
-
   const getRootProps = (otherHandlers?: Record<string, React.EventHandler<any>>) => {
     const propsEventHandlers = extractEventHandlers(props);
     const externalEventHandlers = { ...propsEventHandlers, ...otherHandlers };
@@ -187,7 +195,7 @@ export default function useButton(props: UseButtonProps) {
     return {
       tabIndex: disabled ? -1 : tabIndex,
       type,
-      ref: handleRef as React.Ref<any>,
+      ref: updateRef,
       ...buttonProps,
       ...mergedEventHandlers,
     };