mmenu.js v5.7.8 Tab导航聚焦隐藏元素问题求助

问题背景 #

使用mmenu.js v5.7.8（原jQuery mmenu），配置代码如下：

$('#menu').mmenu({ 
      extensions: [ 'effect-slide-menu', 'shadow-page', 'shadow-panels', 'pagedim-black' ],
      keyboardNavigation: true,
      screenReader: true,
      iconPanels: true,
      navbar:{
         title : 'Meny'
      },

      navbars:[
         {
            position : 'top',
            content : [
               'prev',
               'title',
               'close'
            ]
         }
      ],

      offCanvas: {
         position  : "right"
      }
   });

遇到的问题 #

用键盘Tab键导航菜单时，会聚焦到一个隐藏元素，该元素是菜单初始状态下的：

<a href="#mm-1" class="mm-subblocker" tabindex="0"></a>

对应的完整DOM结构如下：

<div class="mm-navbar mm-navbar-top mm-navbar-top-1 mm-navbar-size-1 mm-hasbtns">
    <a class="mm-prev mm-btn mm-hidden" aria-haspopup="true" tabindex="0"><span class="mm-sronly">Close submenu
            ()</span></a>
    <a class="mm-title">Meny</a>
    <a class="mm-close mm-btn" href="#mm-0" tabindex="0">
        <span class="mm-sronly">Stäng meny</span>
    </a>
</div>

<div class="mm-panels">
    <div class="mm-panel mm-opened mm-current mm-iconpanel-0" id="mm-1">
        
        <a href="#mm-1" class="mm-subblocker" tabindex="0"></a>

        <div class="mm-navbar mm-hidden"><a class="mm-title">Meny</a></div><ul class="mm-listview">

        <ul class="mm-listview">
            <li class="notSelected">
                <a href="/" tabindex="0" class="">Startsidan</a>

            </li>
            <li class="notSelected">
                <a class="mm-next" href="#mm-1" data-target="#mm-1" aria-owns="#mm-1" tabindex="0">
                    <span class="mm-sronly">Open submenu (Skola och förskola)</span></a>
                        <a href="/skola-och-forskola" tabindex="0">Skola och förskola</a>
            </li>
            ....
        </ul>   
    </div>
</div>
<input class="mm-tabend" tabindex="0" type="text"> 

实际导航流程：聚焦到关闭按钮后，会出现2次多余的隐藏元素焦点，之后才到第一个菜单项；预期是关闭按钮后直接聚焦第一个菜单项。

问题复现步骤 #

• 打开菜单（点击或键盘操作均可）
• 使用键盘Tab键导航
• 聚焦到关闭按钮后，出现多余的隐藏元素焦点，无法直接跳转到第一个菜单项

原因分析 #

.mm-subblocker是mmenu内置的元素，原本作用是：打开子菜单时，阻止用户点击/聚焦父菜单内容，同时辅助键盘导航和屏幕阅读器的交互逻辑。但在**初始面板（无任何子菜单打开的状态）**下，这个元素被错误保留了tabindex="0"，导致Tab导航时被意外聚焦。

解决建议 #

方案1：动态调整subblocker的tabindex（推荐） #

通过监听菜单的打开和面板切换事件，针对不同面板状态调整subblocker的tabindex：初始面板设为-1（移除可聚焦性），子菜单面板保留0（维持原有功能）。代码示例：

// 初始化菜单并获取实例
const menuInstance = $('#menu').mmenu({ 
    // 你的原有配置
})[0]._instance;

// 菜单打开后处理初始面板的subblocker
menuInstance.bind('open:after', () => {
    $('.mm-panel.mm-current .mm-subblocker').attr('tabindex', '-1');
});

// 面板切换时动态调整
menuInstance.bind('panel:afteropen', () => {
    const currentPanel = $('.mm-panel.mm-current');
    const subblocker = currentPanel.find('.mm-subblocker');
    // 子菜单面板保留tabindex，否则设为-1
    if (currentPanel.hasClass('mm-subpanel')) {
        subblocker.attr('tabindex', '0');
    } else {
        subblocker.attr('tabindex', '-1');
    }
});

方案2：临时隐藏焦点样式（仅视觉优化） #

如果不想修改JS，可通过CSS让该元素聚焦时不显示焦点样式，但本质上仍会被聚焦，仅做视觉补救：

.mm-subblocker:focus {
    outline: none;
}

方案3：检查配置项（可选） #

查看mmenu v5.7.8的文档，确认是否有控制subblocker的配置开关。不过该版本中暂无直接禁用初始面板subblocker的选项，因此优先推荐方案1。

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