0

我有一个画布外菜单 ( )，当单击或按下#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 元素内？

4

2 回答 2

0

在尝试了这里找到的解决方案之后：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>

在此处输入图像描述

于 2020-09-24T15:46:13.043 回答
0

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

您需要将以下类添加到样式表中：

body.focusIndicatorOff :focus { outline: 0; }

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

  1. .focusIndicatorOff将上面显示的类样式添加到您的样式表中。
  2. 将focusIndicatorOff类添加到body元素。当您的页面加载时，所有元素的焦点指示器将被隐藏。
  3. body向侦听 TAB 按下的按键添加侦听器。
  4. 将鼠标单击侦听器添加到body侦听鼠标单击的 。
  5. 当检测到 TAB 按下时，focusIndicatorOff从body. 这将使焦点指示器可见。
  6. 当检测到鼠标点击时，将focusIndicatorOff类添加到body. 这将隐藏焦点指示器。

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

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

于 2020-10-02T20:19:24.607 回答