[Tabs] Fix modifier keys + Left/Right Arrow key from being consumed by tab navigation

packages/mui-material/src/Tabs/Tabs.js

@@ -815,6 +815,11 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
   });
 
   const handleKeyDown = (event) => {
+    // Check if a modifier key (Alt, Shift, Ctrl, Meta) is pressed
+    if (event.altKey || event.shiftKey || event.ctrlKey || event.metaKey) {
+      return;
+    }
+
     const list = tabListRef.current;
     const currentFocus = ownerDocument(list).activeElement;
     // Keyboard navigation assumes that [role="tab"] are siblings

packages/mui-material/src/Tabs/Tabs.test.js

@@ -1381,6 +1381,30 @@ describe('<Tabs />', () => {
         '-1',
       ]);
     });
+
+    ['Alt', 'Shift', 'Ctrl', 'Meta'].forEach((modifierKey) => {
+      it(`does not navigate when ${modifierKey} is pressed with ArrowLeft`, async () => {
+        const { getAllByRole } = render(
+          <Tabs value={1}>
+            <Tab />
+            <Tab />
+          </Tabs>,
+        );
+
+        const [firstTab, secondTab] = getAllByRole('tab');
+        await act(async () => {
+          secondTab.focus();
+        });
+
+        fireEvent.keyDown(secondTab, {
+          key: 'ArrowLeft',
+          [`${modifierKey.toLowerCase()}Key`]: true,
+        });
+
+        expect(secondTab).toHaveFocus();
+        expect(firstTab).not.toHaveFocus();
+      });
+    });
   });
 
   describe('dynamic tabs', () => {