移动端侧边栏导航菜单聚焦与高亮问题求助

问题背景 #

使用Magento 2.4的Smartwave Porto主题时，移动端视图下触发导航菜单后，无法通过Tab键聚焦并遍历菜单区域。目前已实现用回车键（keycode=13）和空格键（keycode=32）触发菜单点击，但Tab键无法进入已展开的主菜单，预期实现触发菜单后能通过键盘操作完整遍历菜单。

现有代码 #

require([
      'jquery'
    ], function ($) {
      $(".nav-toggle").keypress(function(e) {
        if ((e.which == 13) || (e.which == 32)) {
          $(e.target).trigger('click');
          //$(e.target).show().focus().click();
        }
      });
    });

相关HTML结构 #

• 导航触发按钮：

<span data-action="toggle-nav" class="action nav-toggle" tabindex="0"><span>Toggle Nav</span></span>

• 展开后需聚焦的菜单区域：

<div class="section-item-title nav-sections-item-title active" data-role="collapsible" role="tab" data-collapsible="true" aria-controls="store.menu" aria-selected="false" aria-expanded="true" tabindex="0">
    <a class="nav-sections-item-switch" data-toggle="switch" href="#store.menu">Menu</a>
</div>

修复方案 #

1. 触发菜单后自动转移焦点 #

核心问题是菜单展开后焦点未自动转移到菜单区域，修改代码在触发点击后将焦点设置到菜单的可交互元素上：

require([
      'jquery'
    ], function ($) {
      $(".nav-toggle").on('keydown', function(e) {
        if ((e.which === 13) || (e.which === 32)) {
          e.preventDefault(); // 阻止默认行为，避免页面滚动干扰
          $(this).trigger('click');
          
          // 等待菜单展开动画完成（根据主题调整延迟时间）
          setTimeout(function() {
            // 聚焦到菜单的可交互链接
            $('.nav-sections-item-switch').focus();
          }, 300);
        }
      });
    });

2. 验证并完善无障碍属性 #

• 确保菜单内所有可交互元素（如子菜单按钮、链接）具备正确的tabindex：链接默认无需额外设置，自定义按钮需添加tabindex="0"
• 确认aria-expanded属性在菜单展开时为true，收起时为false，Porto主题默认逻辑一般已处理，可自行验证

3. 菜单收起时焦点回归（可选） #

为了更完整的无障碍体验，可在菜单收起时将焦点放回导航触发按钮：

// 监听菜单收起事件（适配Porto主题的折叠逻辑）
$('.nav-sections-item-title').on('click', function() {
  var isExpanded = $(this).attr('aria-expanded') === 'true';
  if (!isExpanded) {
    $('.nav-toggle').focus();
  }
});

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