Javascript JQuery-通过Firefox和IE中的选项卡导航时焦点不工作

Javascript JQuery-通过Firefox和IE中的选项卡导航时焦点不工作,javascript,jquery,html,internet-explorer,accessibility,Javascript,Jquery,Html,Internet Explorer,Accessibility,我有一个简单的导航栏,我打算首先使用键盘导航。导航栏的工作原理如下: 使用选项卡键,您应该能够浏览每个 导航类别及其元素 使用Right*和**Left键,您只能在导航类别中导航 使用Down键还可以打开导航类别 使用ESC键关闭(隐藏)当前可见的导航类别 这是我开发的 为了简单起见,请关注JavaScript代码,因为HTML代码无法因我无法控制的需求原因而更改。我认为问题在于Firefox/IE如何以不同于Chrome的方式处理focus事件 $(document).ready(func

我有一个简单的导航栏,我打算首先使用键盘导航。导航栏的工作原理如下:

  • 使用选项卡键,您应该能够浏览每个 导航类别及其元素

  • 使用Right*和**Left键,您只能在导航类别中导航

  • 使用Down键还可以打开导航类别

  • 使用ESC键关闭(隐藏)当前可见的导航类别

这是我开发的

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

$(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());
    }
});

它显示了问题的根源。我目前正在修改我的代码,以更好地区分我如何听我的键盘笔划;以及在关注我的元素时显示更好的收听效果。

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

子菜单上按
选项卡
时,事件也会被
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();

这让我有点激动,我需要坐下来分析一下,因为即使我明白你说的话,我也不知道如何修复它。我试图区分我如何处理动作,我缩小了算法的范围,以便我只在菜单、菜单元素、子菜单和子菜单元素中单独听按键。这确实有助于解决问题。