Green Grasso Holm
Green Grasso Holm

Reputation: 704

Confusing, inconsistent keyboard navigation with ngbNav dropdown in ng-bootstrap

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

Answers (0)

Related Questions