如何在按下按钮时专注于特定元素

Question

我有一个关闭-canvas-菜单 (#mobile-menu)，当 button/trigger (.mobile-menu-toggle) 被点击或按下等

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

所以我正在寻找一种方法，可以在 canvas 菜单打开时将焦点设置在关闭菜单中。

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

$(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 元素内？

Answer 1

在尝试了此处找到的解决方案后：Whosebug。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();
    }
});

注意：我在“导航”标题中添加了 class“可聚焦”和 tabindex（我们有多个“标题”元素），因此它可以聚焦于此：

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

Answer 2

一个选项是为鼠标用户关闭焦点指示器并为键盘 (TAB) 用户打开它们。

您需要将以下内容 class 添加到您的样式表中：

body.focusIndicatorOff :focus { outline: 0; }

此样式隐藏 body 中任何具有焦点的元素的焦点指示器。接下来，添加以下内容：

将上面显示的 .focusIndicatorOff class 样式添加到您的样式表中。
将 focusIndicatorOff class 添加到 body 元素。当您的页面加载时，所有元素的焦点指示器都将隐藏。
向侦听 TAB 键的 body 添加按键侦听器。
向监听鼠标点击的 body 添加鼠标点击监听器。
当检测到 TAB 按下时，从 body 中删除 focusIndicatorOff class。这将使焦点指示器可见。
当检测到鼠标点击时，将 focusIndicatorOff class 添加到 body。这将隐藏焦点指示器。

有了这个实施，更新您的菜单按钮单击事件以简单地将焦点强制到“导航”菜单 header。您不必担心会听到该按钮上的按键声，只需移动焦点即可。我上面描述的代码将检测用户是在使用鼠标还是键盘，并根据他们的需要隐藏或显示焦点指示器。

最后一项：我建议您在“导航”header 上使用tabindex="-1"。使用“-1”可让您强制将焦点放在元素上，但不会将其添加到自然 Tab 键顺序。

如何在按下按钮时专注于特定元素

How to focus on a specific element when a button is pressed

accessibility

focus

keypress

tabindex

off-canvas-menu