jQuery-在Firefox和IE中通过Tab浏览时，焦点无法正常工作

Question

我有一个简单的导航栏，打算在所有键盘可访问的导航上方使用。 导航栏的工作方式如下：

• 使用Tab键，您应该能够浏览每个导航类别及其元素。

• 使用向右键*和**向左键 ，您只能浏览各个导航类别。

• 使用向下键还可以打开导航类别。

• 使用ESC键关闭（隐藏）当前可见的导航类别。

这是我开发的jsFiddle 。

为简单起见，请专注于JavaScript代码，因为HTML代码由于我无法控制的需求原因而无法更改。 我认为问题在于Firefox / IE处理focus事件的方式与Chrome不同。

$(document).ready(function(){
    var utilitymenu = new menuBar("#utility-nav"),
        navInner = new menuBar("#nav-inner"),
        mainHeader = $(".main-header");

    // Adding tabindex to all clickable anchor links
    mainHeader.find("a").each(function(i, elem){
        $(elem).attr("tabindex", i+1);
    });
});

function menuBar(id){
    var linksBlock = id + " > li",
        linksBlockSelector = " > li",
        submenuHeader = linksBlock + " > a",
        submenu = linksBlock + " div[class*='sub-menu']",
        submenuSelector = "div[class*='sub-menu']",
        textBlock = submenu + " > ul",
        textBlockSelector = submenuSelector + " > ul",
        submenuElem = textBlock + " > li a",
        keepMenuClosed = false;

    // Adding ARIA attributes to the different sections of the navigation menus
    $(linksBlock).attr({
        "role": "navigation",
        "aria-haspopup": "true",
        "aria-labelledby": "menu-title",
        "aria-describedby": "menu-description"
    });
    $(submenuHeader).attr({
        "aria-haspopup": "true",
        "id": "menu-title"
    });
    $(submenuHeader).each(function(i, elem){
        $(elem).attr("aria-label", $(elem).text().trim());
    });
    $(submenu).attr({
        "tabindex": "-1",
        "id": "menu-description"
    });
    $(textBlock).attr({
        "aria-expanded": "false",
        "aria-hidden": "true"
    });

    // Hides visible menus when clicking outside the menu area
    $(document).click(function(event) {
        if(!$(event.target).closest().length){
            $(submenu + ":visible").hide().find(textBlock).attr("aria-expanded", "false");
            $(submenu + ":visible").hide().find(textBlock).attr("aria-hidden", "true");
        }
    });

    // Drop Down Menu event handler (not inner elements)
    $(linksBlock)
    .focus(function(){
        if($(this).find(submenuSelector).is(":hidden") && !keepMenuClosed){
            $(this).find(submenuSelector).toggle();
            $(this).find(textBlockSelector).attr("aria-expanded", "true");
            $(this).find(textBlockSelector).attr("aria-hidden", "false");
            keepDropdownClosed = false;
        }
        else if($(this).find(submenuSelector).is(":visible")){
            $(this).find(submenuSelector).toggle();
            $(this).find(textBlockSelector).attr("aria-expanded", "false");
            $(this).find(textBlockSelector).attr("aria-hidden", "true");
        }
    })
    .mouseover(function(){
        $(this).find(submenuSelector).show();
        $(this).find(textBlockSelector).attr("aria-expanded", "true");
        $(this).siblings().find(submenuSelector).hide();
        $(this).siblings().find(textBlockSelector).attr("aria-expanded", "false");
        $(this).find(textBlockSelector).attr("aria-hidden", "true");
    })
    .mouseout(function(){
        $(this).find(submenuSelector).hide();
        $(this).find(textBlockSelector).attr("aria-expanded", "false");
        $(this).find(textBlockSelector).attr("aria-hidden", "true");
    })
    .keydown(function(event){
        switch(event.keyCode){
            //tab key
            case 9:
                keepMenuClosed = true;
                if($(this).find(submenuSelector).is(":visible")){
                    $(this).find(submenuSelector).toggle();
                    $(this).find(textBlockSelector).attr("aria-expanded", "false");
                    $(this).find(textBlockSelector).attr("aria-hidden", "true");
                }
                else if($(this).find(submenuSelector).is(":hidden")){
                    $(this).find(submenuSelector).toggle();
                    $(this).find(textBlockSelector).attr("aria-expanded", "true");
                    $(this).find(textBlockSelector).attr("aria-hidden", "false");
                }
                break;

            // esc key
            case 27:
                if($(this).find(submenuSelector).is(":visible")){
                    $(this).find(submenuSelector).toggle();
                    $(this).find(textBlockSelector).attr("aria-expanded", "false");
                    $(this).find(textBlockSelector).attr("aria-hidden", "true");
                    $(this).closest(linksBlock).focus();
                }
                break;

            // key left
            case 37:
                if($(this).find(submenuSelector).is(":hidden")){
                    $(this).prev().find(" > a").focus();
                    keepMenuClosed = true;
                }
                break;

            // key right
            case 39:
                if($(this).find(submenuSelector).is(":hidden")){
                    $(this).next().find(" > a").focus();
                    keepMenuClosed = true;
                }
                break;

            // key up/down
            case 38, 40:
                event.preventDefault();
                $(this).find(submenuSelector).show();
                break;
        }
    });
    // Sub Menu Elements keyboard handler
    $(submenuElem)
    .keydown(function(event){
        switch(event.keyCode){
            // tab key
            case 9:
                $(this).parent().next().find("a").focus();
                break;
            // esc key
            case 27:
                if($(this).closest(submenuSelector).is(":visible")){
                    $(this).closest("div").siblings("a ").focus();
                }
                break;
            // key up
            case 38:
                event.preventDefault();
                $(this).parent().prev().find("a").focus();
                break;
            // key down
            case 40:
                event.preventDefault();
                $(this).parent().next().find("a").focus();
                break;
        }
    });
}

TLDR

我要做的就是了解为什么导航仅在Chrome中起作用，而在IE和Firefox中不起作用。 我在做什么错/什么都不做？ 我一直在寻找IE / FF focus已知问题， preventDefault但无济于事。 我不认为我的ARIA代码引起了问题，但我准备探索所有建议！

编辑

在@Adam的建议之后，我添加了以下代码以显示我在Firefox / IE上遇到的问题：

$(this).keydown(function(e){
    if(e.keyCode === 9){
        alert($(':focus').toArray());
    }
});

它显示了问题的根源。 我目前正在修改我的代码，以更好地区分我如何监听键盘笔触。 以及在我的元素专注于时更好地倾听。

Answer 1

隐藏元素时，它会失去焦点

当您在子submenuElem按下tab键时，该事件也会被linksBlock拦截

由于该特定原因，当您使用以下行时

 $(this).parent().next().find("a").focus();

它会触发focus（）事件，然后执行切换以隐藏子菜单。 这里失去了焦点。

$(linksBlock)
.focus(function(){
   [...]

   else if($(this).find(submenuSelector).is(":visible")){
   $(this).find(submenuSelector).toggle();

然后，将第二个事件触发到主块，这将显示未设置焦点的隐藏元素：

$(linksBlock)
.keydown(function(event){
     [...]
            else if($(this).find(submenuSelector).is(":hidden")){
                $(this).find(submenuSelector).toggle();