My goal here was to make a submenu with sane keyboard and screenreader behavior, using:
Here's a starting point showing how submenus (don't) work with the keyboard without any customization:
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://stackoverflow.com/questions/18023493/bootstrap-3-dropdown-sub-menu-missing
*/
.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>Here's a JSFiddle of the above. I'll post my solution in the answers, but I don't think it's perfect; I'm interested in feedback or alternatives.
Here's a JSFiddle of my solution (for some reason it isn't working as a snippet here?). It's a custom directive called custom-submenu that I attach to the outermost level (the li) of the submenu.
Behavior:
As far as screenreaders go, this works great in NVDA in FF and IE, but ChromeVox doesn't like it.
Here's the code for the directive:
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();
});
}
}
}]);
I'd appreciate any suggestions!