如何将键盘焦点设置到列表的代表父元素

Question

我在下拉菜单列表上通过键盘输入实现了可访问性的简单实现，我使用 HTML/CSS 制作了它，其事件通过 JS/jQuery 控制。

通过键盘访问的 objective 是这样的：

通过按 tab 键浏览下拉菜单元素。
按 向下箭头 键打开焦点菜单。
在此类菜单中，按 tab 键 将帮助您浏览菜单元素。
在此类菜单中，按 esc 键将关闭下拉菜单。
菜单关闭后，将键盘焦点保持在菜单的代表父元素上。

这是我制作的 jsFiddle 作为完全成熟实施示例的示例。

问题具体出在 jQuery 代码中，最后一个语句是我试图确定问题解决方案的地方（阅读下文）。

我的问题： 我该怎么做才能在按下 esc 键时关闭下拉菜单；我回到了下拉菜单父元素，我首先使用它通过 向下箭头 键访问下拉菜单元素？这样做的原因是，在我的实现中，如果我们退出下拉菜单，我们实际上是在要求用户按 Tab 键转到他们所在的元素。

这是我试图通过尝试（但失败）将焦点设置到我刚刚访问的父元素来修复的意外行为。

非常感谢任何帮助！

HTML

<ul class="menu">
    <li>
        <a href="#">Menu Elem</a>
        <div class="subMenu">
            <ul>
                <li>
                    <a href="#">Sub Menu Elem</a>
                </li>
                <li>
                    <a href="#">Sub Menu Elem</a>
                </li>
                <li>
                    <a href="#">Sub Menu Elem</a>
                </li>
            </ul>
        </div>
    </li>
    <li>
        <a href="#">Menu Elem</a>
        <div class="subMenu">
            <ul>
                <li>
                    <a href="#">Sub Menu Elem</a>
                </li>
                <li>
                    <a href="#">Sub Menu Elem</a>
                </li>
                <li>
                    <a href="#">Sub Menu Elem</a>
                </li>
            </ul>
        </div>
    </li>
    <li>
        <a href="#">Menu Elem</a>
        <div class="subMenu">
            <ul>
                <li>
                    <a href="#">Sub Menu Elem</a>
                </li>
                <li>
                    <a href="#">Sub Menu Elem</a>
                </li>
                <li>
                    <a href="#">Sub Menu Elem</a>
                </li>
            </ul>
        </div>
    </li>
</ul>

CSS

.menu > li {
    display: inline-block;
    text-align: center;
    color: white;
    background-color: orange;
    width: 100px;
    height: 70px;
        position: fixed;
}

.menu > li:hover {
    cursor: pointer;
}
.menu > :nth-child(1) {
    left: 1px;
}
.menu > :nth-child(2){
    left: 102px;
}

.menu > :nth-child(3){
    left: 203px;
}
.menu > li > a {
    line-height: 70px;
}
.menu > li > .subMenu {
    display: none;
    width: 200px;
    margin-top: 1px;
    outline: 1px solid black;
}
.menu > li > .subMenu > ul > li {
    height: 100px;
    background-color: green;
    margin-left: -40px;
    line-height: 100px;
}
.menu > li > .subMenu > ul > li:hover {
    background-color: purple;
    cursor: pointer;
}
a {
    text-decoration: none;
    color: white;
}

JS/jQuery

$(document).ready(function(){
    var menuElem = $(".menu > li");

    $(menuElem).hover(function(){
        $(this).find(".subMenu").toggle();
    });

    $(menuElem).keydown(function(e) {
        // down arrow key
        if(e.keyCode === 40 && $(this).find(".subMenu").is(":hidden")){
            $(this).find(".subMenu").toggle();
        }
        // esc key
        else if(e.keyCode === 27 && $(this).find(".subMenu").is(":visible")){
            $(this).find(".subMenu").toggle();

            // ***** problematic code here *****
            // Need to target the <a> element, or the <li> element, or the <div>, or the <ul> element, not sure which one will work.
            // Currently: trying to get whichever element represents the selected menu, in the below case the anchor element

            $(menuElem).eq($(this).index()).find("a").addClass("selected");
        }
    });
});

Answer 1

您可以尝试使用 .focus()

将焦点设置到父元素的 a 元素

如何将键盘焦点设置到列表的代表父元素

How to set keyboard focus to a representing parent element of a list

html

javascript

css

jquery

accessibility