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


Tags: javascript,jquery,html,css,accessibility

Problem :

I have a simple implementation on accessibility via keyboard input on a list of drop down menus, which I made using HTML/CSS and whose events are controlled via JS/jQuery.

The objective of accessibility via keyboard is like so:

  1. Navigate the drop down menu elements by pressing on the tab key.
  2. Press the down arrow key to open a focused menu.
  3. Within such menu, pressing the tab key will help you navigate through the menu elements.
  4. Within such menu, pressing the esc key will close the drop down menu.
  5. Once the menu is closed, maintain keyboard focus upon the representing parent element of the menu.

Here is the jsFiddle I made as an example of a fully fledged implementation.

The problem lies specifically in the jQuery code, the last statement is the one which is where I am trying to determine the solution to my problem (read below).

My problem: How do I make it so that when the esc key is pressed to close the drop down menu; I am back to the drop down menu parent element which I first used to access the drop down menu elements via the down arrow key? The reason for this is that, in my implementation, if we exit the drop down menu we are effectively asking the user to tab their way to the element they where on.

That is the unintended behavior I am trying to fix by trying (and failing) to set the focus to the parent element I just visited.

Any help is very appreciated!

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");
        }
    });
});


Solution :

You could try to set the focus to the parent's a element, by using .focus()


    CSS Howto..

    How to select a language from a popup click button in css/html ?

    SVG, how to evaluate the property of the svg object

    how to make header title with buttons

    How to show scrollbar when the inner content is aligned to bottom?

    How to stop text from vertically centering in a table?

    IcoMoon App icon fonts are shown as 

    How to create a vertical line with a text in the middle

    How can I highlight position in nav bar for single-page website?

    sunken border when background-color css specified - how to avoid?

    How can I get my divs to process separately?

    Added ellipsis for long text but it showing below the text

    How to make an svg masked image compatible with Internet Explorer

    How to resize two divs on the click of a link

    How to fix hover on transparent photo

    I want to override some CSS that says border:none to have border bottom. How can I do this?

    How to resize and float right a background image using css?

    How do I get the element after my horizontal css navigation bar to appear below it?

    How to change 'inherited' font families using the CSS style sheet

    How to change the color render setting for anchor in a css file?

    How do I create tabs in vertical alignment?

    How browser auto resize website to mobile browse?

    how to wrap a text around a image?

    How to change html td background colour through Javascript?

    After ul li's float left ,how can I make text-align center?

    How to avoid an hover on a menu item to affect the menu items on the right

    How to use 100% CSS background-image with scrolling content?

    How to apply CSS to the first letter after :before content?

    How i can get the td data getting from css to attach to my current row ,and use for my logic

    How to avoid ui-block div (jquery mobile) to overlap in internet explorer?

    How to put css class in to html:select element in jsp