MenuItems as Link break keyboard input

[Mario-Eis]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

The issue of using menu items as router links or anchors was already discussed here: #204. But all the suggested solutions will break the keyboard navigation of the menu list.

UPDATE: I found out, that deleting the additional <li> seems to restore the keyboard functionality. Unfortunately this breaks the markup. <ul> <a/> <a/> <li/> </ul>

Expected behavior 🤔

When a menu list is focused and the keyboard arrows are pressed, the corresponding menu item is selected. This should also be true for navigational entries like anchors or router links.

Steps to reproduce 🕹

Use menu items as links with the suggested way to do it.

<MenuList>
    <li>
        <MenuItem
            component="a"
            href="https://google.com"
            target="_blank"
        >Google</MenuItem>
    </li>
</MenuList>

Context 🔦

No response

Your environment 🌎

No response

[mnajdova]

It doesn't look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[Mario-Eis]

Here is a sandbox link: https://codesandbox.io/s/relaxed-hamilton-51wx2m?file=/src/App.tsx

In one example, the markup is correct, but keyboard selection is broken. Pressing Enter has no effect.
And another example with working keyboard selection but broken markup.

[PunitSoniME]

@Mario-Eis

Your issue can be fixed by simple solution,

In your above example, remove li tag from first example, and set href values with protocols like https:// or http://

It will work fine.

try below is the solution

<MenuList>
    <MenuItem component="a" href="https://www.google.com" target="_blank">
        Press Enter Key to open the link in a new tab
    </MenuItem>
    <MenuItem>asdasd</MenuItem>
    <MenuItem>Click me and use keyboard up/down arrows</MenuItem>
    <MenuItem>asdasd</MenuItem>
</MenuList>

Let me know if you still have any confusion

CC - @mnajdova

[Mario-Eis]

Well, in that case the DOM is not correct. ul should only contain li elements.
https://www.w3.org/TR/2011/WD-html-markup-20110113/ul.html
This was also mentioned in #204

But yes, I can see that it works without the li and I will go with it. Its on you to decide how important this is :)

[zqylur]

I have a very similar problem with Autocomplete, except that removing the li doesn't fix keyboard navigation. I've created a demo here https://codesandbox.io/s/romantic-yonath-lsjjvb. You can see that clicking the item opens a new tab, but keyboard selection with "Enter" only populates the option value, and does not open a new tab. Even a plain Link component shows the same behavior when rendered as the Autocomplete option

[emillaine]

We're also running into this.

MUI should provide documentation of how to do link as menu item, with proper consideration for accessibility, since it's quite a common use case. Everyone suggests overriding component, but it's not ideal from accessibility standpoint. Here's an example of how to implement link as menu item accessibly: https://www.w3.org/WAI/ARIA/apg/example-index/menu-button/menu-button-links

[mandudeboy]

Since this still seems unresolved, I want to contribute with a work-around to this issue that works well for keyboard navigation, as well as screen readers. It may not be 100% perfect but I think it's good enough while waiting for a semantically correct option in MUI. We go back to using buttons as base component that work well in MUI, but use WAI-ARIA to set role="link" and then javascript and "useHistory" to make it act like a link. Not pretty, but better than broken!

<MenuItem
  key="menuItem-1"
  role="link"
  data-href="/register"
  onClick={() => {
    history.push("/register");
  }}
>

Or with context:

import { useHistory } from 'react-router-dom';

export const AccountMenu = () => {
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const history = useHistory();

  const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };


  return (
    <Button
      aria-controls="menu-appbar"
      aria-haspopup="true"
      onClick={handleMenu}
    >
      Account
    </Button>
    <Menu 
      id="menu-appbar"
      anchorEl={anchorEl}
      getContentAnchorEl={null}
      keepMounted
      anchorOrigin={{
        vertical: 'bottom',
        horizontal: 'right'
      }}
      transformOrigin={{
        vertical: 'top',
        horizontal: 'right'
      }}
      open={Boolean(anchorEl)}
      onClose={handleClose}
    >
      <MenuItem
        key="menuItem-1"
        role="link"
        data-href="/register"
        onClick={() => {
          handleClose();
          history.push("/register");
        }}
      >
        <ListItemText>Register</ListItemText>
      </MenuItem>
      <MenuItem
        key="menuItem-2"
        role="link"
        data-href="/login"
        onClick={() => {
          handleClose();
          history.push("/login");
        }}
      >
        <ListItemText>Login</ListItemText>
      </MenuItem>
    </Menu>
  )
}