MatTabNavBar: space key does not activate the selected tab

[nirkai]

Reproduction

Without router-outlet directive

The mat-tab-nav-bar directive not activate tabs with Enter&Space by default (like in 'real' tabs).

Official example (without router-outlet).

Steps to reproduce:

1. Focus on unselected tab (with arrow keys) and press Enter or Space
2. The selected tab not activated and the route page isn't display.

With router-outlet directive

The mat-tab-nav-bar directive with routerLink (like shown here) activate selected tabs with Enter but not with Space.

Custom example (with router-outlet).

Steps to reproduce:

1. Focus on unselected tab and press Enter.
2. The selected tab activated.
3. Focus on unselected tab and press Space.
4. The selected tab not activated and the route page isn't display.

Expected Behavior

Select tabs with Enter or Space keys will activate the selected tab.

There is also a function call that should handle it. here is the call and here is the function.

Actual Behavior

When tab selected by Space the route not activated.

Environment

• Angular: 9
• CDK/Material: 9.2.4

[crisbeto]

I believe that this intentional for the tab nav bar. It is set up to work with links and as such, it gives up the responsibility for highlighting the current tab to the link via the active input.

Technically it'll be easy to make it work, but I can see it being confusing for both space and enter key presses, because links don't do anything on space.

[nirkai]

Thanks for your replay @crisbeto

Technically you are right of course, the element is indeed a tag element.
But, conceptually, the mat-tab-nav-bar and the mat-tab-link is more like Tabs (design and behavior).
The behavior of the router-outlet is peculiar. It's route link, but in app routing.

What i'm not understand is what prevent the _keydown function to exec, like I mentioned in the question.

Without routerLinkActive directive even the Enter key is not fire the event. But the End and Home work as expected.

BTW, same question for the Tab press.
If we consider it more like tab, we can make the Tab behavior to be like in real tab. Just bind the tabindex to the active property.
But maybe this will force to change all the aria attributes to be like in other tabs.

[Splaktar]

AngularJS Material's md-nav-bar has pretty good keyboard accessibility which is described here. We use the Tabs with Manual Activation Example from WAI-ARIA. A related example is the Navigation Menubar Example.

Jeremy pointed out that md-nav-bar, mat-tab-group, and the Navigation Menubar Example all wrap the links in a list (ul, li) whereas mat-tab-nav-bar does not (it's just raw anchors nested in some divs under the nav).

My feeling is that if this interaction does need to stay diverged like this, then we should document the nav tabs in a separate section instead of combining it with the mat-tab-group docs like we do today.

We'll have to consult with the a11y team on how we should handle this interaction.

[nirkai]

Please pay attention that the current behavior of the Tab with the Arrow keys is very confused. Here is more details about it.

The Arrow interaction is usually reserved for lists.
The <nav> usually hold a list element. It seems the mat-nav-bar is missing the relevant roles, or the <a> list will be within a list element.

[zarend]

Hello, I believe this was fixed in v15. I can select tabs with both the space and enter keys.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}