此bounty已结束。回答此问题可获得+100声望奖励。奖励宽限期将在21小时后结束。Oleksandr Tkalenko希望吸引更多人关注此问题。
假设我有一个带有MenuItems的Material UI MenuList。菜单在屏幕上从上到下显示,我可以使用Tab/Tab+Shift键或向上/向下箭头键导航菜单。
然而,在一些情况下,
一些MenuItem有子项,我使用Collapse组件展开这些子菜单。我仍然可以使用Tab键导航菜单中的每个项,包括子菜单(由于所有项都具有tabIndex=0),但是当使用箭头键时,我只能导航“顶部”菜单项,而不是子菜单。不过,也可以使用Tab键进入子菜单,然后在子菜单中使用箭头键。(虽然它仍然有点bug,但当我到达子菜单的末尾时,焦点会移到第一个顶部菜单项)
Collapse组件破坏了MenuList的子级列表,我无法找到覆盖此行为的方法。
See Codesandbox example
最简单的解决方案是使Up/Down键具有与Tab键相同的功能,但我认为不可能在按下Down键时只调度Tab键事件。
1条答案
按热度按时间tnkciper1#
要使Up/Down键具有与Tab键相同的功能,最简单的方法是使用React.useEffect挂钩。这将允许您在按下Down键时调度一个keypress事件。
更改这些行:
对此:
这将使向上/向下键具有与Tab键相同的功能。