[a11y] Not keyboard accessible for components inside `MenuItem`

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/beautiful-voice-bfgjc9

Steps:

1. Tab into menu and hit the “Enter” button
2. Hit the “down arrow” button until you arrive at the slider/switch
3. Hit “Enter”/“Space” button(s) to focus on slider/switch

Current behavior 😯

The slider/switch will not focus, preventing users from manipulating the input with their keyboard.

Expected behavior 🤔

The slider/switch should focus, allowing users to manipulate the input with their keyboard.

Context 🔦

Allow our keyboard users to manipulate menu input.

Your environment 🌎

npx @mui/envinfo

   System:
    OS: macOS 12.6.1
  Binaries:
    Node: 14.18.3 - ~/.nvm/versions/node/v14.18.3/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v14.18.3/bin/yarn
    npm: 8.1.2 - ~/Projects/vt-llp-ui/node_modules/.bin/npm
  Browsers:
    Chrome: 107.0.5304.121 <= current browser
    Edge: Not Found
    Firefox: 107.0
    Safari: 16.1
  npmPackages:
    @emotion/react: 11.10.0 => 11.10.0 
    @emotion/styled: 11.10.0 => 11.10.0 
    @mui/base:  5.0.0-alpha.94 
    @mui/core-downloads-tracker:  5.10.13 
    @mui/material: 5.10.2 => 5.10.2 
    @mui/private-theming:  5.10.9 
    @mui/styled-engine:  5.10.8 
    @mui/system:  5.10.13 
    @mui/types:  7.2.0 
    @mui/utils:  5.10.9 
    @types/react: 17.0.38 => 17.0.38 
    react: 17.0.2 => 17.0.2 
    react-dom: 17.0.2 => 17.0.2 
    typescript: 4.6.4 => 4.6.4 

[sai6855]

@ber8749

    <MenuItem onFocus={() => ref.current.focus()}>
          <Slider slotProps={{ input: { ref } }} aria-label="Volume" />
        </MenuItem>

[xurxe]

Relevant discussion on the W3C github:

• https://github.com/w3c/aria/issues/1587