Angular实现Bootstrap下拉子菜单键盘可访问性的方法？

Question

我在这里的目标是使用以下技术，制作一个具有合理键盘和屏幕阅读器行为的子菜单：

• AngularJS
• jQuery
• Bootstrap 3
• 来自'css - Bootstrap 3 dropdown sub menu missing'的CSS子菜单实现

这是一个起点，展示了没有任何自定义的情况下，子菜单如何（不）与键盘配合工作：

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.selectItem = function (item) {
        alert(item);
    };
}

/* 
 * No submenu in Bootstrap 3 - need to put CSS in manually.
 * All CSS from https://dev59.com/DWMl5IYBdhLWcg3w5aiQ 
 */

.dropdown-submenu {
    position: relative;
}
.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px 6px;
    border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}
.dropdown-submenu > a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width:5px 0 5px 5px;
    border-left-color:#cccccc;
    margin-top:5px;
    margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
    border-left-color: #ffffff;
}
.dropdown-submenu.pull-left {
    float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="MyCtrl">
    <div class="dropdown"> 
        
        <a class="dropdown-toggle btn btn-primary" id="DropdownButton" data-toggle="dropdown" role="button" href="#">DROPDOWN</a>

        <ul class="dropdown-menu" role="menu" aria-labelledby="DropdownButton">
            <li role="presentation"> 
                <a role="menuitem" tabindex="0" href="#" ng-click="selectItem('1')">option 1</a>
            </li>
            <li role="presentation"> 
                <a role="menuitem" tabindex="0" href="#" ng-click="selectItem('2')">option 2</a>
            </li>
            <li role="presentation"> 
                <a role="menuitem" tabindex="0" href="#" ng-click="selectItem('3')">option 3</a>
            </li>
            <li role="presentation" class="dropdown dropdown-submenu" custom-submenu> 
                
                <a class="dropdown-toggle" id="SubmenuButton" role="menuitem" tabindex="0" href="#" aria-haspopup="true">option 4 (has children)</a>

                <ul class="dropdown-menu" role="menu" aria-hidden="true" aria-labelledby="SubmenuButton">
                    <li role="presentation"> 
                        <a role="menuitem" tabindex="0" href="#" ng-click="selectItem('submenu item 1')">
                            child option 1
                        </a>
                    </li>
                    <li role="presentation"> 
                        <a role="menuitem" tabindex="0" href="#" ng-click="selectItem('submenu item 2')">
                            child option 2
                        </a>
                    </li>
                    <li role="presentation"> 
                        <a role="menuitem" tabindex="0" href="#" ng-click="selectItem('submenu item 3')">
                            child option 3
                        </a>
                    </li>
                </ul>
            </li>
            <li role="presentation"> 
                <a role="menuitem" tabindex="0" href="#" ng-click="selectItem('item 5')">option 5</a>
            </li>
        </ul>
    </div>
</div>

这是以上问题的JSFiddle。我会在回答中发布我的解决方案，但我认为它不完美；我对反馈或替代方案很感兴趣。

- melanie johnson

Answer 1

这里是我的 JSFiddle 解决方案（由于某种原因，它在此处作为片段无法工作？）。这是一个名为custom-submenu的自定义指令，我将其附加到子菜单的最外层级别（li）。

行为：

• 向上和向下箭头导航顶级菜单
• 空格打开子菜单，然后您可以向下箭头进入其中
• 向上或向下箭头移出子菜单会关闭子菜单并返回其父级
• Enter键选择项目

就屏幕阅读器而言，在 Firefox 和 IE 中的 NVDA 上运行良好，但 ChromeVox 不喜欢它。

这是指令的代码：

myApp.directive("customSubmenu", ['$timeout', function ($timeout) {
    return {
        link: function ($scope, element, attrs) {

            var toggleButton = $(element).find('.dropdown-toggle');
            var submenu = $(element).find('.dropdown-menu');

            /* 
             * handle keydown on the submenu itself - if we arrow up from the first element or down from the last,
             * close submenu
             */
            submenu.keydown(function (event) {
                if (!(event.keyCode === 38 || event.keyCode === 40)) return;

                var links = $(element).find('li:not(.divider):not(.disabled) a');

                if (event.keyCode === 38 && event.target == links[0]) {
                    // first submenu item - up arrow - close submenu, focus toggle button, stop propagation
                    $(element).removeClass('open');
                    submenu.attr('aria-hidden', true);
                    toggleButton.focus();
                    event.stopPropagation();
                    event.preventDefault();
                } else if (event.keyCode === 40 && event.target == links[links.length - 1]) {
                    // last submenu item - down arrow - close submenu, focus toggle button, stop propagation
                    $(element).removeClass('open');
                    submenu.attr('aria-hidden', true);
                    toggleButton.focus();
                    event.stopPropagation();
                    event.preventDefault();
                }
            });

            /* 
             * handle keydown on toggle button - space toggles submenu visibility, arrows navigate outer menu
             */
            toggleButton.keydown(function (event) {
                if (event.keyCode === 32) { // space bar - open/close submenu
                    if ($(element).hasClass('open')) {
                        $(element).removeClass('open');
                        submenu.attr('aria-hidden', true);
                    } else {
                        $(element).addClass('open');
                        submenu.attr('aria-hidden', false);
                    }
                    event.stopPropagation();
                    event.preventDefault();
                } else if (event.keyCode === 40) { // down arrow
                    if (!$(element).hasClass('open')) {
                        // even though the submenu isn't open, the bootstrap dropdown directive will try to focus the 
                        // hidden submenu items, so intercept the keydown and focus the next outer menu item instead
                        var nextSibling = $(element).nextAll('li:not(.divider):not(.disabled):visible');
                        if (nextSibling && nextSibling[0]) {
                            var nextSiblingLink = $(nextSibling[0]).find('a');
                            if (nextSiblingLink && nextSiblingLink[0]) {
                                // focus next menu item
                                $(nextSiblingLink[0]).focus();

                                // while we're at it, let's attach a handler to that next link, telling it to focus this
                                // one when the up arrow is pressed (instead of trying to go into the hidden submenu items)
                                // (TODO: is this going to chain a bunch of these handlers?)
                                $(nextSiblingLink[0]).keydown(function (e) {
                                    if (e.keyCode === 38) { // up
                                        toggleButton.focus();
                                        e.stopPropagation();
                                        e.preventDefault();
                                    };
                                });
                            }
                        }
                        event.stopPropagation();
                        event.preventDefault();
                    }
                }
            });

            /* 
             * handle click on toggle button - open or close submenu 
             */
            toggleButton.click(function (event) {
                if ($(element).hasClass('open')) {
                    $(element).removeClass('open');
                    submenu.attr('aria-hidden', true);
                } else {
                    $(element).addClass('open');
                    submenu.attr('aria-hidden', false);
                }
                event.stopPropagation();
                event.preventDefault();
            });
        }
    }
}]);

我会感激任何建议！

- melanie johnson