Autocomplete With Grouped Options Loses Highlight Visibility At High Zoom Level When Using the Up Arrow Key

Steps to reproduce

Steps:

1. Open this link to live example: https://mui.com/material-ui/react-autocomplete/#grouped
2. Zoom in to a high level 400%-500%
3. Use the up arrow key to navigate the options of the Autocomplete with grouped options
4. Notice how when moving between options, the currently highlighted option can no longer be seen

Current behavior

When the Autocomplete options dropdown is open at a high zoom level 400%-500% and you move between the options using the up arrow key, at certain points the option that should currently be highlighted can no longer be seen.

https://github.com/user-attachments/assets/d3371e8c-ff05-4c24-89fa-09b1d0276ecd

Expected behavior

When moving between the Autocomplete dowpdown's options using the keyboard arrow keys, the highlighted option should be visible so that the user knows what option is currently highlighted.

Context

We are trying to meet the requirements for WCAG success criterion 2.4.7 regarding focus visible elements:
https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html

Your environment

  System:
    OS: macOS 15.5
  Binaries:
    Node: 22.14.0 - ~/.nvm/versions/node/v22.14.0/bin/node
    npm: 10.9.2 - ~/.nvm/versions/node/v22.14.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 138.0.7204.101
    Safari: 18.5
  npmPackages:
    @emotion/react: 11.13.5 => 11.13.5 
    @emotion/styled: 11.13.5 => 11.13.5 
    @mui/core-downloads-tracker:  6.3.0 
    @mui/material: 6.3.0 => 6.3.0 
    @mui/private-theming:  6.3.0 
    @mui/styled-engine:  6.3.0 
    @mui/system: 6.3.0 => 6.3.0 
    @mui/types:  7.2.15 
    @mui/utils: 6.3.0 => 6.3.0 
    @mui/x-date-pickers: 7.23.3 => 7.23.3 
    @mui/x-internals:  7.23.0 
    @types/react: 19.1.2 => 19.1.2 
    react: 19.1.0 => 19.1.0 
    react-dom: 19.1.0 => 19.1.0 
    typescript: 5.8.3 => 5.8.3 ```
</details>


**Search keywords**: Autocomplete, Grouped, Zoom, Highlight