Steps to reproduce

Steps:

1. Open this link to live example: https://codesandbox.io/p/sandbox/xgl5m2 (Not in a new tab, ensure that your browser has history so that the back button would work)
2. Focus the tabs by clicking on one of them
3. Press Alt+{Left Arrow}

Current behavior

In some environments nothing seems to happen. Though most will move the focus between tabs

Expected behavior

Your browser should navigate to the previous page, as if you clicked the "Back" button on your browser.

Context

In Chrome, Firefox, and Edge, Alt+{Left Arrow} and Alt+{Right Arrow} are shortcuts for the browser Back and Forward buttons, respectively. The Tabs components have arrow key shortcuts to navigate between tabs, however this seems to consume all left and right arrow key inputs for horizontal tabs, regardless of if modifiers are held or not. And so the browser will not respond to Alt+{Left Arrow} and Alt+{Right Arrow} shortcuts while a tab component is in focus.

I believe that this could present accessibility concerns and the component should not consume arrow key inputs while the alt key is being held.

Your environment

  System:
    OS: Linux 5.15 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
  Binaries:
    Node: 22.11.0 - /opt/node/bin/node
    npm: 10.9.0 - /opt/node/bin/npm
    pnpm: 10.2.1 - /opt/node/bin/pnpm
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: 11.14.0 => 11.14.0
    @emotion/styled: 11.14.0 => 11.14.0
    @mui/material: 6.4.4 => 6.4.4
    @types/react: 18.2.38 => 18.2.38
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript: 4.4.4 => 4.4.4

• Chrome 133.0.6943.99
• Firefox 128.7.0esr
• Edge 133.0.3065.59

Search keywords: tab tabs tablist tabcontext alt arrowkeys shortcut back forward accessibility