Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/shadow-dom-test-tabs-component-78x4c8

Steps:

1. Open the sandbox and observe the two Tabs components (one in regular DOM, one in shadow DOM)
2. Focus on the first tab of the component rendered inside the shadow DOM
3. Try to navigate between tabs using arrow keys (Left/Right)
4. Notice that keyboard navigation doesn't work

Current behavior

When the Tabs component is rendered inside a shadow DOM, keyboard navigation using arrow keys doesn't work. The focus doesn't move between tabs when pressing the Left/Right arrow keys, unlike the same component rendered in the regular DOM where keyboard navigation works as expected.

Expected behavior

The Tabs component should support keyboard navigation consistently, regardless of whether it's rendered inside a shadow DOM or in the regular DOM. Arrow keys should move focus between tabs in both scenarios.

Context

This issue affects applications that use Web Components or micro-frontends architecture where Material-UI components need to be encapsulated within shadow DOM for style isolation. The lack of keyboard navigation support breaks accessibility for users relying on keyboard-only navigation.

Your environment

 System:
    OS: Linux 6.6 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
  Binaries:
    Node: 22.14.0
    npm: 10.9.2 
    pnpm: 10.18.1 
  Browsers:
    Chrome: 131.0.6778.204
    Firefox: Not Found
  npmPackages:
    @emotion/react:  11.14.0 
    @emotion/styled:  11.14.0 
    @mui/core-downloads-tracker:  6.4.10 
    @mui/icons-material:  6.4.10 
    @mui/material:  6.4.10 
    @mui/private-theming:  6.4.9 
    @mui/styled-engine:  6.4.9 
    @mui/system:  6.4.10 
    @mui/types: ^7.2.21 => 7.2.24 
    @mui/utils:  6.4.9 
    @mui/x-date-pickers: ^7.23.3 => 7.24.0 
    @mui/x-internals:  7.24.0 
    @types/react: 18.3.18 => 18.3.18 
    react:  18.3.1 
    react-dom:  18.3.1 
    typescript: 5.7.2 => 5.7.2 

Search keywords: I have searched the existing issues