React Headless UI Menu组件键盘导航时菜单项无法获焦问题

问题原因 #

你直接在渲染为<li>的Menu.Item内部嵌套了Link，但Headless UI的Menu.Item会接管菜单项的焦点管理和键盘事件，导致内部Link无法直接获取焦点；同时Tab键的默认行为是退出菜单组件，这符合无障碍导航规范，但如果需要通过键盘触发链接跳转，需要正确关联Menu.Item和Link的事件与焦点逻辑。

解决方案 #

调整Menu.Item的事件处理逻辑，让键盘操作（箭头键导航、Enter/Space触发）能正确触发链接跳转，同时关闭菜单。具体修改如下：

function Dropdown({ parent, children }) {
    return (             
        <Menu as="div" className="Submenu">
            {({ close }) => (
                <>
                    <Menu.Button>
                        { parent.label }
                    </Menu.Button>
                    <Menu.Items as="ul" className="subitems">
                        {children.map(child => (
                            <Menu.Item as="li" className="subitem" key={ child.id }>
                                {({ active }) => (
                                    <Link 
                                        href={ child.link }
                                        onClick={() => close()}
                                        className={active ? 'menu-item-active' : ''}
                                    >
                                        { child.label }
                                    </Link>
                                )}
                            </Menu.Item>
                        ))}
                    </Menu.Items>                    
                </>
            )}
        </Menu>
    );
}

关键修改点说明 #

• 解构Menu.Item回调参数：Menu.Item的子元素可接收active（当前是否被键盘导航选中）参数，用来标记菜单项的活跃状态；同时通过外层的close方法在点击链接时关闭菜单。
• 移除手动添加的tabIndex：不要给Link设置tabIndex={0}，避免和Menu.Item自带的焦点管理逻辑冲突。
• 修复组件参数解构：原代码未对Dropdown的参数做解构处理，React函数组件中需用{ parent, children }才能正确获取传入的props。

关于Tab键行为的说明 #

按照无障碍设计规范，下拉菜单的标准键盘交互逻辑是：

• 打开菜单后，用箭头键在菜单项间切换焦点
• 按Enter/Space触发当前选中项的操作
• 按Tab/Esc关闭菜单并退出焦点

如果确实需要让Tab键遍历菜单内的链接，需禁用Headless UI的自动焦点管理，但这会破坏组件的无障碍特性，不推荐。若一定要实现，可尝试给Menu.Items添加static属性，再给每个Link设置tabIndex={0}，同时手动处理菜单的打开/关闭逻辑。

内容的提问来源于stack exchange，提问作者jbmgil_vlrzz