jQuery UI Menu 是构建可访问下拉菜单和导航菜单的常用组件，它支持鼠标点击和键盘方向键导航。默认情况下，当菜单获得焦点后，用户可以使用上下方向键在菜单项之间移动高亮状态，再按 Enter 或空格键激活当前项。但在实际项目中，经常出现一个令人困扰的焦点管理 Bug：方向键移动时，菜单项的高亮样式（通常是通过添加 ui-state-focus 类实现）确实在变化，但真正的 DOM 焦点（document.activeElement）却始终停留在菜单容器或触发按钮上，并没有移动到对应的高亮菜单项。这个问题会导致屏幕阅读器无法播报当前聚焦的菜单项，用户按 Enter 时也可能触发错误的操作，甚至在某些浏览器中菜单会在焦点移出时意外关闭。

本文将深入分析产生该 Bug 的根本原因，并给出一个完整的手动接管键盘导航、修正焦点管理的解决方案。我们不仅会展示修复代码，还会讨论如何保持菜单的可访问性（ARIA）和跨浏览器兼容性。

问题现象：方向键导航时焦点不跟随菜单项高亮

为了重现这个问题，我们先看一个最基本的 jQuery UI Menu 初始化代码：

<ul id="menu">
    <li><div>首页</div></li>
    <li><div>产品中心</div></li>
    <li><div>关于我们</div></li>
</ul>
<script>
    $("#menu").menu();
</script>

当用户使用 Tab 键将焦点移动到菜单容器 <ul> 上时（menu 组件会自动为容器添加 tabindex="0"），再按下向下方向键，可以看到第一项的高亮样式出现了。然而，如果我们在控制台检查 document.activeElement，会发现它仍然是 <ul> 元素，而不是对应的 <li> 或内部的 <div>。这就是典型的焦点与高亮分离现象。

这种分离带来的最直接后果是可访问性严重受损。屏幕阅读器（如 NVDA、JAWS、VoiceOver）依赖真实的 DOM 焦点来播报内容。焦点没有移动到菜单项上，阅读器就无法告知用户当前选中的是哪一项，用户只能听到“列表”或“菜单”，而不知道该选了什么。此外，键盘事件的目标也始终是容器，这会导致一些依赖 event.target 的自定义逻辑出现判断错误，例如按 Enter 键时无法准确获取当前高亮项的数据。

原因剖析：jQuery UI Menu 的键盘事件处理逻辑

jQuery UI Menu 的内部实现中，键盘导航主要是在 keydown 事件处理器里完成的。当检测到方向键时，它会调用 _move 方法，该方法通过修改菜单项的 CSS 类（添加 ui-state-focus，移除其他项上的该类）来改变高亮位置，但并不会调用任何菜单项的 focus() 方法。菜单项的 DOM 本身也没有设置 tabindex，默认情况下这些元素是不可聚焦的，所以即使我们想在代码里主动 focus() 它们，也需要先设置 tabindex="-1"。

jQuery UI 的开发团队之所以这样设计，可能是出于简化交互的考虑：将焦点保持在容器上可以避免菜单项获得焦点后触发多余的 blur 事件，从而防止菜单被意外关闭。但这种做法忽视了屏幕阅读器用户的需求，也违反了 WAI-ARIA 的最佳实践——在菜单这种复合组件中，实际获得焦点的应该是对应当前激活的菜单项，而不是容器本身。ARIA 规范推荐的菜单键盘交互模式正是“roving tabindex”：容器不参与 Tab 序列（或只在第一次获取焦点时参与），每个菜单项都可以通过编程方式接收焦点，方向键移动时同步更新焦点。

另一个影响因素是浏览器的默认行为。当菜单容器获得焦点后，按下方向键可能会触发页面滚动（例如在长页面中上下方向键会滚动页面）。虽然 jQuery UI Menu 内部调用了 event.preventDefault() 来阻止默认行为，但这并不影响焦点移动，只是阻止了滚动。所以问题依旧存在。

解决方案：手动接管键盘导航并修正焦点管理

要彻底解决焦点不跟随的问题，我们需要覆盖 jQuery UI Menu 默认的键盘处理逻辑，自己实现一套焦点移动机制。核心思路如下：

• 为每个菜单项设置 tabindex="-1"，使它们可以通过编程方式获得焦点。
• 在菜单容器上监听 keydown 事件，阻止默认的 jQuery UI 处理（通过 event.stopImmediatePropagation() 或直接不使用 menu 组件的键盘逻辑），然后根据按键方向手动移动焦点。
• 维护一个当前焦点索引，根据方向键更新索引，并调用对应菜单项的 focus() 方法。
• 当菜单打开时，将初始焦点设置到第一个菜单项（或者保存之前的焦点，根据交互需求决定）。
• 确保在焦点移出菜单区域时（例如按下 Tab 键或点击菜单外部），菜单能够正确关闭。

下面是一个完整的实现示例。我们仍然使用 jQuery UI Menu 来渲染样式和结构，但键盘导航部分完全由我们自己控制。首先初始化菜单并修改 DOM：

$("#menu").menu({
    // 禁用默认键盘导航，我们稍后手动绑定
    keydown: function(event) {
        // 阻止 jQuery UI 的默认按键处理
        if (event.keyCode === $.ui.keyCode.UP || event.keyCode === $.ui.keyCode.DOWN ||
            event.keyCode === $.ui.keyCode.LEFT || event.keyCode === $.ui.keyCode.RIGHT) {
            event.preventDefault();
            event.stopImmediatePropagation();
        }
    }
});
// 为每个菜单项设置 tabindex=-1，使其可编程聚焦
$("#menu li").attr("tabindex", "-1");
// 保存菜单项引用
var menuItems = $("#menu li");
var currentIndex = -1;
// 绑定自定义键盘导航
$("#menu").on("keydown", function(event) {
    var key = event.keyCode;
    switch (key) {
        case $.ui.keyCode.DOWN:
        case $.ui.keyCode.RIGHT:
            event.preventDefault();
            currentIndex = (currentIndex + 1) % menuItems.length;
            menuItems.eq(currentIndex).focus();
            break;
        case $.ui.keyCode.UP:
        case $.ui.keyCode.LEFT:
            event.preventDefault();
            currentIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;
            menuItems.eq(currentIndex).focus();
            break;
        case $.ui.keyCode.ENTER:
        case $.ui.keyCode.SPACE:
            event.preventDefault();
            if (currentIndex >= 0) {
                // 触发选中项的操作，例如点击或自定义函数
                menuItems.eq(currentIndex).find("div").trigger("click");
            }
            break;
        case $.ui.keyCode.TAB:
            // 焦点移出菜单时关闭菜单（如果它是弹出菜单）
            $("#menu").hide(); // 示例：隐藏菜单
            break;
    }
});
// 菜单显示时将焦点移到第一项
$("#menu").on("menushow", function() {
    currentIndex = 0;
    menuItems.eq(currentIndex).focus();
});

上述代码中，我们通过 stopImmediatePropagation() 阻止了 jQuery UI Menu 自身的方向键处理，然后添加了自己的 keydown 监听器。每次方向键按下时，更新 currentIndex 并调用 focus()，确保真实焦点跟随高亮移动。同时，我们保留了 Enter 和 Space 的激活逻辑，以及 Tab 键关闭菜单的行为。这个方案完全符合 ARIA 的 roving tabindex 模式，能够被屏幕阅读器正确识别。

完整示例与代码解析

为了让读者更直观地理解，这里给出一个完整的 HTML 页面示例，包含样式、菜单结构和修复后的 JavaScript 代码。你可以直接复制到本地测试。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery UI Menu 焦点修复示例</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
    <style>
        .ui-menu { width: 200px; }
    </style>
</head>
<body>
    <ul id="menu">
        <li><div>首页</div></li>
        <li><div>产品中心</div></li>
        <li><div>关于我们</div></li>
    </ul>
    <script>
        $(function() {
            $("#menu").menu({
                keydown: function(event) {
                    if (event.keyCode === $.ui.keyCode.UP || event.keyCode === $.ui.keyCode.DOWN ||
                        event.keyCode === $.ui.keyCode.LEFT || event.keyCode === $.ui.keyCode.RIGHT) {
                        event.preventDefault();
                        event.stopImmediatePropagation();
                    }
                }
            });
            var menuItems = $("#menu li");
            menuItems.attr("tabindex", "-1");
            var currentIndex = -1;
            $("#menu").on("keydown", function(event) {
                var key = event.keyCode;
                switch (key) {
                    case $.ui.keyCode.DOWN:
                    case $.ui.keyCode.RIGHT:
                        event.preventDefault();
                        currentIndex = (currentIndex + 1) % menuItems.length;
                        menuItems.eq(currentIndex).focus();
                        break;
                    case $.ui.keyCode.UP:
                    case $.ui.keyCode.LEFT:
                        event.preventDefault();
                        currentIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;
                        menuItems.eq(currentIndex).focus();
                        break;
                    case $.ui.keyCode.ENTER:
                    case $.ui.keyCode.SPACE:
                        event.preventDefault();
                        if (currentIndex >= 0) {
                            menuItems.eq(currentIndex).find("div").trigger("click");
                        }
                        break;
                    case $.ui.keyCode.TAB:
                        // 假设菜单是弹层，Tab 移出时隐藏
                        $("#menu").hide();
                        break;
                }
            });
            $("#menu").on("menushow", function() {
                currentIndex = 0;
                menuItems.eq(currentIndex).focus();
            });
        });
    </script>
</body>
</html>

代码解析：首先通过 menu() 的 keydown 选项拦截了默认方向键处理，这是为了避免与我们的自定义处理冲突。然后我们为每个 <li> 设置了 tabindex="-1"，使其可以接收焦点。在自定义的 keydown 监听器中，我们处理了四个方向键以及 Enter、Space 和 Tab 键。方向键处理时使用了取模运算来实现循环导航，并且每次调用 focus() 后，浏览器会自动将之前聚焦的元素失焦，无需额外处理。Enter 和 Space 键则模拟了点击当前高亮项。Tab 键的处理是可选的，如果你的菜单是弹出式，需要在焦点移出时关闭菜单；如果是内嵌菜单（一直显示），可以忽略 Tab 处理，让焦点自然离开菜单。

注意事项与最佳实践

在实施上述修复时，有几个要点需要特别留意。首先，stopImmediatePropagation() 的使用非常重要，因为它不仅能阻止 jQuery UI Menu 的默认方向键逻辑，还能阻止其他可能绑定在容器上的键盘事件处理器，确保我们的自定义逻辑独占方向键处理。但如果你还想保留某些其他键盘处理（例如 Page Up/Down 快速跳转），则需要修改拦截条件，只拦截方向键和 Enter 等关键按键，避免误伤其他功能。

其次，菜单项的 tabindex="-1" 必须设置，否则调用 focus() 不会生效。需要注意的是，设置 tabindex="-1" 后，菜单项虽然可以通过编程方式聚焦，但不会出现在 Tab 键的导航序列中，这是符合预期的（we only want programmatic focus）。如果你想允许用户通过 Tab 键直接进入菜单项，可以考虑使用 roving tabindex 模式，即在当前活动项上设置 tabindex="0"，其他项保持 -1，并在焦点移动时动态切换。

最后，测试时一定要使用屏幕阅读器进行验证。你可以用 NVDA（Windows）或 VoiceOver（Mac）打开页面，通过 Tab 键进入菜单，然后使用方向键移动，确认阅读器是否正确播报每个菜单项的内容。同时检查菜单打开时焦点是否自动跳到第一项，以及关闭菜单后焦点是否合理返回（例如回到触发按钮）。这些细节对于提升整体可访问性至关重要。

通过本文介绍的方法，你可以彻底解决 jQuery UI Menu 组件在键盘导航时的焦点管理 Bug，让菜单在鼠标、键盘和辅助技术下都表现出色。