[useButton][base] Fix tabIndex not being forwarded (#38417)

mui · Aug 11, 2023 · 38b7936 · 38b7936
1 parent 27fddcf
commit 38b7936
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 0 deletions.
diff --git a/packages/mui-base/src/useButton/useButton.test.tsx b/packages/mui-base/src/useButton/useButton.test.tsx
@@ -197,4 +197,46 @@ describe('useButton', () => {
       });
     });
   });
+
+  describe('tabIndex', () => {
+    it('does not return tabIndex in getRootProps when host component is BUTTON', () => {
+      function TestComponent() {
+        const ref = React.useRef(null);
+        const { getRootProps } = useButton({ rootRef: ref });
+
+        expect(getRootProps().tabIndex).to.equal(undefined);
+
+        return <button {...getRootProps()} />;
+      }
+
+      const { getByRole } = render(<TestComponent />);
+      expect(getByRole('button')).to.have.property('tabIndex', 0);
+    });
+
+    it('returns tabIndex in getRootProps when host component is not BUTTON', () => {
+      function TestComponent() {
+        const ref = React.useRef(null);
+        const { getRootProps } = useButton({ rootRef: ref });
+
+        expect(getRootProps().tabIndex).to.equal(ref.current ? 0 : undefined);
+
+        return <span {...getRootProps()} />;
+      }
+
+      const { getByRole } = render(<TestComponent />);
+      expect(getByRole('button')).to.have.property('tabIndex', 0);
+    });
+
+    it('returns tabIndex in getRootProps if it is explicitly provided', () => {
+      const customTabIndex = 3;
+      function TestComponent() {
+        const ref = React.useRef(null);
+        const { getRootProps } = useButton({ rootRef: ref, tabIndex: customTabIndex });
+        return <button {...getRootProps()} />;
+      }
+
+      const { getByRole } = render(<TestComponent />);
+      expect(getByRole('button')).to.have.property('tabIndex', customTabIndex);
+    });
+  });
 });
diff --git a/packages/mui-base/src/useButton/useButton.ts b/packages/mui-base/src/useButton/useButton.ts
@@ -187,6 +187,10 @@ export function useButton(parameters: UseButtonParameters = {}): UseButtonReturn
 
   const buttonProps: AdditionalButtonProps = {};
 
+  if (tabIndex !== undefined) {
+    buttonProps.tabIndex = tabIndex;
+  }
+
   if (hostElementName === 'BUTTON') {
     buttonProps.type = type ?? 'button';
     if (focusableWhenDisabled) {