引导下拉子菜单的键盘导航

Question

我正在将下拉菜单转换为符合 WCAG 标准，并且它需要可以通过键盘和鼠标进行导航。 据我所知，引导开发人员前段时间已经删除了子菜单功能，因为它不适合移动设备。 我的要求只是桌面。

我已经从这个答案中获取了代码，但徒劳地试图让它使用键盘导航到子菜单。

当我将库更新到 bs4.5 时，顶级下拉菜单上的键导航一切正常。 它甚至可以导航到子菜单中的第一个元素，但是按此菜单上的向上和向下键只会隐藏弹出窗口。

我已经捕获了keydown事件并阻止了菜单隐藏，但我不知道如何在子菜单中移动导航。 正如我所料，该代码似乎没有使用active的 class 属性。

我的要求如下。

子菜单可通过 UP/DOWN 键导航
可以使用回车键“单击”子菜单元素。

这是我按下回车键激活子菜单后的样子。

这是按下向下箭头移动到子菜单时的样子。

代码（几乎是链接问题中的代码减去子菜单）

<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>
    <body>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropdown link
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        
                        <li class="dropdown-submenu" aria-haspopup="true" aria-expanded="false">
                            <a class="dropdown-item dropdown-toggle" href="#" id="subMenuLink">Submenu</a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="http://www.google.com">Submenu action</a></li>
                                <li><a class="dropdown-item" href="">Another submenu action</a></li>
                            </ul>
                        </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </body>
    <script>        
        $('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
            if (!$(this).next().hasClass('show')) {
                $(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
            }

            var $subMenu = $(this).next('.dropdown-menu');
            $subMenu.toggleClass('show');

            $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
                $('.dropdown-submenu .show').removeClass('show');
            });

            return false;
        });         
    </script>
</html>

如何在子菜单中导航？

Answer 1

我能够使用以下代码使焦点插入符号在子菜单中移动。 这是通过查看引导下拉插件的源代码得到的启发。

如果我们将 keydown 处理程序附加到子菜单下拉列表，我们可以获取列表中可用项目的列表作为原生元素，然后通过搜索键事件的目标来获取当前索引。 然后我们可以根据需要增加或减少索引并将焦点设置到新项目。

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

引导下拉子菜单的键盘导航

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-07-26 10:25:50

引导下拉子菜单的键盘导航

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-07-26 10:25:50

解决方案1
0 已采纳 2020-07-26 10:25:50