focus - 按下按钮时如何关注特定元素

Question

我有一个画布外菜单 ( )，当单击或按下#mobile-menu按钮/触发器 ( ) 等时会打开它。.mobile-menu-toggle

菜单在键盘按下时打开正常，但它不在菜单内聚焦，而是焦点在文档流中的下一个元素上 - 菜单实际上位于文档中的“触发器”之前。

所以我正在寻找一种方法来在它打开时在画布菜单中设置焦点。

我已经尝试了很多变体，但没有任何反应，焦点仍然是下一个元素，而不是我指定的元素：

$(document).on("keyup",".mobile-menu-toggle",function(e) {
    if (e.which == 13) {
        $("#mobile-menu ul").focus();
    }
});

这是 html 的简化版本：

 <nav id="mobile-menu" aria-label="Main Mobile Navigation">
    <div class="content">
            
        <a href="#" aria-label="Mobile Homepage Link">... LOGO IMG ...</a>

        <span class="heading">Navigation</span>

        <ul class="page-navigation">
            ... NAV LINKS ...
        </ul>

    </div>
 </nav>
                    
<div id="mobile-nav-trigger">
    <button class="mobile-menu-toggle" aria-label="Open Menu"></button>
</div>

我还发现，如果我尝试在移动菜单中的任何位置添加 tabindex，触发器将不再在按键上打开它。

我怎样才能使它在触发器打开菜单时，焦点在 #mobile-menu 元素内？

标签： focusaccessibilitykeypresstabindexoff-canvas-menu

Answer 1

在尝试了这里找到的解决方案之后：stackoverflow.com/a/15338848/1783695，这给了我一些想法......这个解决方案有效，但它也通过鼠标点击将注意力集中在我只想专注于键盘的地方按。

所以我最终得到了这个，它完全按照我的需要工作：

var input = document.getElementById("mobile-menu-toggle");
input.addEventListener("keyup", function(event) {
    if (event.keyCode === 13) {
        event.preventDefault();
        $('.heading.focusable')[0].focus();
    }
});

注意：我将类“focusable”和 tabindex 添加到“导航”标题（我们有多个“标题”元素），以便它可以集中在那里：

<span class="heading focusable" tabindex="0">Navigation</span>