Reputation: 704
I've been reviewing the accessibility of a website and found that the keyboard navigation of an ng-bootstrap ngbNav
-based set of tabs displayed on one page is messy.The rightmost tab has a dropdown submenu.
When I use the Tab key to navigate through the page, all the simple tabs are treated as a single navigation control, so that tabbing from the navigable element immediately preceding the tab bar shifts focus to the active tab; to move the focus among the tabs requires the use of the arrow keys. But the tab with the dropdown is an exception: even though its structurally within the ngbNav
, for purposes of using the Tab key, it's treated as a separate control. that the Tab key does navigate to. To illustrate, if I have
[previous control]
[tab 1]
[tab 2]
[tab 3]
[tab 4]
[dropdown tab]
[next control]
and if [tab 2]
is active and the focus is on the [previous control]
, when I start tabbing, focus moves first to [tab 2]
, then to [dropdown tab]
, then to [next control]
. It shouldn't stop at [dropdown tab]
.
On the other hand, I ''cannot'' reach the [dropdown tab]
using the arrow keys, even though they'll take the focus out of it when it's already there. If focus is on [dropdown tab]
and I started pressing the Right arrow, focus goes from [dropdown tab]
to [tab 1]
, [tab 2]
, [tab 3]
, [tab 4]
, [tab 1]
, [tab 2]
, [tab 3]
, [tab 4]
, [tab 1]
, etc., never to return to [dropdown tab]
.
In addition, once I've put the focus on the dropdown tab, when I click Enter, the dropdown appears. At this point I'd expect the Down arrow to move me into the dropdown, but instead it moves the focus to the first tab--while leaving the dropdown open.
Finally, when the focus is on the dropdown tab and I click the Down arrow, the dropdown menu opens and the focus shifts to the first tab, which is pretty useless.
Wanting to troubleshoot this, I found the example that this must have been taken from at https://ng-bootstrap.github.io/#/components/nav/examples#custom-style. And I discovered that the example there exhibits all the same keyboard navigation problems!
I'm figuring I need a different solution but I'm not sure where to go, or whether the ng-bootstrap team happens to have a release on the horizon that will fix this. Any thoughts?
Upvotes: 0
Views: 13