keyboard control for submenu

[orish88]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

I need to make my site accesible and The Menu.Submenu is not keyboard accessible, i believe. By adding tabindex i can tab to the submenu, but clicking ENTER nothing happens- the submenu doesn't open.
<Menu.SubMenu onKeyPress={(event) => this.handleKeyPress(event, "EditYourProfileSubMenu")} onTitleClick={()=>{alert('title clicked')}} tabIndex={0} title="Edit Your Profile" style={{ color: 'white' }}>

under handleKeyPress i'm able to register the ENTER click event on the submenu title but i cant get the submenu open and show the items. Is there functionality for that?
It would be very nice if the entire Menu would be keyboard accessible, including navigation with arrows and automatic enter click triggers click events.
Perhaps there's a way and i'm missing something?

What does the proposed API look like?

Functionality to open the SubMenu progrmatically. For example some variable X i can pass to an onKeyPress function(or your own onSubMenuKeyPress) and call X.openSubMenu()/X.closeSubMenu()
Or
Make the entire menu Keyboard accessible, tab and shift tab, arrow navigation between menu items, and pressing enter automatically triggers onClick.

[ztplz]

@orish88 In fact, I found that the menu can be operated with the arrow keys, but not with tab.

[hitsthings]

I've not been able to get this to work either. Especially with Dropdown. There doesn't seem to be a way to navigate the Dropdown with a keyboard, except potentially with the Tab key, but only if you put an a tag in each of your menu items. But arrow keys don't do anything, even in the storybook.

Keyboard navigation with arrow keys seems to almost work in the rc-menu demos but it's a bit sketchy there too (for example, there is no visual indication that you are focused on a menu.

I'm not sure what the difference is, but it seems like Ant Design's dropdowns should be keyboard navigable if rc-menu's are.

[AprilShenk]

I ran into this same problem. After researching a ton I ended up utilizing the openKeys and onOpenChange property for the Menu component. I added tabIndex="0" to all Menu.Items, as well as the SubMenu, utilizing useHistory to push to paths onClick and onKeyPress for Menu.Items. For SubMenu, onKeyPress called a toggle function that changed the state of openKeys to the SubMenu key or an empty array. I hope this helps someone that was in the same position. Below is an excerpt of the main functionality.

const OPEN_KEYS = [];

const NavBar = () => {
  const history = useHistory();
  const [openKeys, setOpenKeys] = useState(OPEN_KEYS);

  const handleToggle = () => {
    !openKeys.length ? setOpenKeys(["item_1"]) : setOpenKeys([]);
  };

  const handleKeyEvent = (e, path) => {
    if (e.code === "Enter") {
      history.push(path);
    }
  };
  return (
    <Menu
      openKeys={openKeys}
      onOpenChange={handleToggle}
    >
      <Menu.Item
        tabIndex="0"
        onClick={() => history.push("/")}
        onKeyPress={(e) => handleKeyEvent(e, "/")}
      >
        Home
      </Menu.Item>
      <SubMenu
        tabIndex="0"
        onKeyPress={handleToggle}
      >
      </SubMenu>
    </Menu>
  );
};

[ekawatani]

Great. The tabIndex attribute is not exposed for TypeScript component, so this still doesn't completely solve the issue.

Also, tabIndex is not enough. We also need to set:

1. aria-haspopup to true
2. aria-expanded to true when the menu is expanded, and false when it's closed.
3. When the menu item is focused via keyboard, this needs to be visually indicated. But, currently nothing happens even for a simple link item.
4. When pressing Escape to close the menu, the focus should be set on the sub menu.

Because of these issues, the Menu component is currently completely not usable.

[afc163]

Supported in #30382