引導下拉子菜單的鍵盤導航

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