Add Keyboard Accessibility to Top Nav Menu

Question

I am trying to get the top nav bar's drop down menu working with the keyboard. What should happen is when a user presses the tab key and the top menu item is reached, the drop down should show just like the mouse hover event does.

Typically, I just add a function to the onfocus event that calls the mouseover event, but that isn't working. The following code causes a "TypeError: Object doesn't support property or method 'mouseover'" error.

var hoverMenuItems = document.getElementsByTagName('li');
for (x = 0; x < hoverMenuItems.length; x++) {
    if (hoverMenuitem[x].className.indexOf('dynamic-children') != -1) {
        hoverMenuItems[x].onfocusin = function () { try { this.mouseover(); } catch (err) { alert(err); } }
        hoverMenuItems[x].onfocusout = function () { try { this.mouseout(); } catch (err) { alert(err); } }
    }
}

I've already been informed that I can't modify any of the existing source code, so I need to find a solution that will modify the page after it's rendered.

Any help would be greatly appreciated.

Answer 1

It took a lot of trial and error, but I finally found a way to get keyboard users able to see the drop down menus. The fix below will only work in IE (I'm working on the cross-browser version, so if you need it, let me know).

While I was tracing the events, I discovered that the only changes were the addition of the class name to the li elements and the styles to the child ul element. I also discovered that for some reason, the tabIndex attribute had to be added to make this work.

var hoverMenuItems = document.getElementsByTagName('li');
for (x = 0; x < hoverMenuItems.length; x ++) {
    if (hoverMenuItems[x].className.indexOf('dynamic-children') != -1) {
        hoverMenuItems[x].tabIndex=-1;
        hoverMenuItems[x].onfocusin = function () {
            this.className = "static dynamic-children hover";
            this.getElementsByTagName('ul')[0].style.cssText="top:25px; left:1px;";
        }
        hoverMenuItems[x].onfocusout = function () {
            this.className = "static dynamic-children";
            this.getElementsByTagName('ul')[0].style.cssText="";
        }
    }
}