chore(a11y): support middle mouse button to close (#860)

* chore(a11y): support middle mouse button to close

* chore: add unit test

Author: Wxh16144

src/TabNavList/index.tsx

@@ -311,6 +311,38 @@ const TabNavList = React.forwardRef<HTMLDivElement, TabNavListProps>((props, ref
     setFocusKey(newKey);
   };
 
+  const handleRemoveTab = (removalTabKey: string, e: React.MouseEvent | React.KeyboardEvent) => {
+    const removeIndex = enabledTabs.indexOf(removalTabKey);
+    const removeTab = tabs.find(tab => tab.key === removalTabKey);
+    const removable = getRemovable(
+      removeTab?.closable,
+      removeTab?.closeIcon,
+      editable,
+      removeTab?.disabled,
+    );
+
+    if (removable) {
+      e.preventDefault();
+      e.stopPropagation();
+      editable.onEdit('remove', { key: removalTabKey, event: e });
+
+      // when remove last tab, focus previous tab
+      if (removeIndex === enabledTabs.length - 1) {
+        onOffset(-1);
+      } else {
+        onOffset(1);
+      }
+    }
+  };
+
+  const handleMouseDown = (key: string, e: React.MouseEvent) => {
+    setIsMouse(true);
+    // Middle mouse button
+    if (e.button === 1) {
+      handleRemoveTab(key, e);
+    }
+  };
+
   const handleKeyDown = (e: React.KeyboardEvent) => {
     const { code } = e;
 
@@ -377,25 +409,7 @@ const TabNavList = React.forwardRef<HTMLDivElement, TabNavListProps>((props, ref
       // Backspace
       case 'Backspace':
       case 'Delete': {
-        const removeIndex = enabledTabs.indexOf(focusKey);
-        const removeTab = tabs.find(tab => tab.key === focusKey);
-        const removable = getRemovable(
-          removeTab?.closable,
-          removeTab?.closeIcon,
-          editable,
-          removeTab?.disabled,
-        );
-        if (removable) {
-          e.preventDefault();
-          e.stopPropagation();
-          editable.onEdit('remove', { key: focusKey, event: e });
-          // when remove last tab, focus previous tab
-          if (removeIndex === enabledTabs.length - 1) {
-            onOffset(-1);
-          } else {
-            onOffset(1);
-          }
-        }
+        handleRemoveTab(focusKey, e);
         break;
       }
     }
@@ -449,9 +463,7 @@ const TabNavList = React.forwardRef<HTMLDivElement, TabNavListProps>((props, ref
         onBlur={() => {
           setFocusKey(undefined);
         }}
-        onMouseDown={() => {
-          setIsMouse(true);
-        }}
+        onMouseDown={e => handleMouseDown(key, e)}
         onMouseUp={() => {
           setIsMouse(false);
         }}

tests/accessibility.test.tsx

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import type { TabsProps } from '../src';
@@ -280,4 +280,44 @@ describe('Tabs.Accessibility', () => {
     const firstTab = getByRole('tab', { name: /Tab1/i });
     expect(firstTab).toHaveFocus();
   });
+
+  it('should close tab on middle mouse button click', async () => {
+    const Demo = () => {
+      const [items, setItems] = React.useState(
+        Array.from({ length: 3 }, (_, i) => ({
+          key: `${i + 1}`,
+          label: `Tab${i + 1}`,
+          children: `Content ${i + 1}`,
+        })),
+      );
+      return (
+        <Tabs
+          defaultActiveKey="1"
+          items={items}
+          editable={{
+            onEdit: (type, { key }) => {
+              if (type === 'remove') {
+                setItems(prevItems => prevItems.filter(item => item.key !== key));
+              }
+            },
+          }}
+        />
+      );
+    };
+
+    const { queryByRole } = render(<Demo />);
+
+    // Get the second tab
+    const secondTab = queryByRole('tab', { name: /Tab2/i });
+    expect(secondTab).toBeInTheDocument();
+
+    // Simulate middle mouse button click (button index 1)
+    fireEvent.mouseDown(secondTab, { button: 1 });
+
+    expect(queryByRole('tab', { name: /Tab2/i })).toBeNull();
+
+    // First and third tabs should still be there
+    expect(queryByRole('tab', { name: /Tab1/i })).toBeInTheDocument();
+    expect(queryByRole('tab', { name: /Tab3/i })).toBeInTheDocument();
+  });
 });