Navigating the dropdown sub menus in Bootstrap using keyboard shortcuts

Question

Navigating the dropdown sub menus in Bootstrap using keyboard shortcuts

Enabling WCAG compliance for a dropdown menu requires keyboard navigability, in addition to mouse functionality. It seems that the bootstrap developers removed sub-menu support some time ago due to mobile unfriendliness, but my specific needs are limited to desktop use.

I attempted to incorporate code from this answer for keyboard navigation, but was unsuccessful in navigating through the submenu.

Upon updating to bs4.5 library, key navigation works perfectly on the top-level dropdown and even reaches the first element in the submenu. However, pressing the up and down keys within the submenu only hides the popup.

Even after preventing the menu from hiding with a keydown event listener, I am still unsure how to navigate within the submenu as expected utilizing the active class attribute.

My requirements include:

Navigating the submenu using UP/DOWN keys
'Clicking' submenu elements with the enter key

This is the appearance after activating the submenu with the enter key.

https://i.sstatic.net/CIm1i.png

Here is what happens when moving to the submenu by pressing the down arrow.

https://i.sstatic.net/EZqrz.png

The code (mostly unchanged from the linked question, excluding sub-sub menus):

<html>
    <head>
        <style>
            .dropdown-submenu {
                position: relative;
            }

            .dropdown-submenu a::after {
                transform: rotate(-90deg);
                position: absolute;
                right: 6px;
                top: .8em;
            }

            .dropdown-submenu .dropdown-menu {
                top: 0;
                left: 100%;
                margin-left: .1rem;
                margin-right: .1rem;
            }
        </style>
    </head>
        
    <!-- Bootstrap, jQuery, Popper.js -->
    
</html>

How can I successfully navigate within the submenu?

javascript jquery css bootstrap-4 wcag2.0

Answer 1

Answer №1

Through analyzing the bootstrap dropdown plugin's source code, I managed to successfully navigate the focus caret within the sub menu by implementing the following code snippet.

By incorporating a keydown event handler to the submenus dropdown list, we can extract the list of available items as native elements and identify the current index by locating the target of the key event. Subsequently, we can adjust the index accordingly (either increment or decrement) and set the focus on the new item.

$('.dropdown-submenu .dropdown-menu').on('keydown', function(e) {            

    const items = $(this).find('.dropdown-item').get();
    let index = items.indexOf(event.target)

    if (e.which == 38) {
        index--;
        event.preventDefault()
        event.stopPropagation()
    } else 
    if (e.which == 40) {
        index++;
        event.preventDefault()
        event.stopPropagation()
    }

    if(index < 0 || index > (items.length - 1)) {
        return
    }

    items[index].focus()
});

Answer 2

Through analyzing the bootstrap dropdown plugin's source code, I managed to successfully navigate the focus caret within the sub menu by implementing the following code snippet.

By incorporating a keydown event handler to the submenus dropdown list, we can extract the list of available items as native elements and identify the current index by locating the target of the key event. Subsequently, we can adjust the index accordingly (either increment or decrement) and set the focus on the new item.

$('.dropdown-submenu .dropdown-menu').on('keydown', function(e) {            

    const items = $(this).find('.dropdown-item').get();
    let index = items.indexOf(event.target)

    if (e.which == 38) {
        index--;
        event.preventDefault()
        event.stopPropagation()
    } else 
    if (e.which == 40) {
        index++;
        event.preventDefault()
        event.stopPropagation()
    }

    if(index < 0 || index > (items.length - 1)) {
        return
    }

    items[index].focus()
});

Navigating the dropdown sub menus in Bootstrap using keyboard shortcuts

Answer №1

Similar questions

How to Retrieve the jqXHR Object with jQuery Deferreds and Ajax

Steps to select an option from a drop-down menu that does not have an ID assigned

React is unable to identify the property that was passed to a styled-component in Material UI

What location is most ideal for incorporating JavaScript/Ajax within a document?

What is the best way to use Ajax to return a Blade view in a controller?

Difficulty encountered while implementing the if-else statement in raycasting operations

Using the hash(#) symbol in Vue 3 for routing

javascriptJQuery validation function triggers JSF ajax request

bootstrap class not detected and not visible in Firebug

Getting stuck trying to fetch the queryset from the server and adding it to the select options using AJAX

Oops! You're trying to perform actions that must be plain objects. If you need to handle async actions

Karma is reporting an error with TypeScript, saying it cannot locate the variable 'exports'

Adjusting Screen Size for Lottie Animation in React.js

Identifying the presence of an image in a directory and displaying a standard image if not found

Balanced Height Panels - Utilizing Flexbox and flex-wrap: wrap

Implement the callback-console.log feature from the epic-games-api into an Express.js application

How can I apply a class to a list item when clicked using Vue.js and a template component generated by v-for loop?

Locate the indices of several maximum values within an array

Guide on populating a dropdown menu with values based on the selection of another dropdown menu

Error: Mapping values to cards resulted in a TypeError: Property 'map' cannot be read from undefined source