Reevaluate tab navigation interaction pattern

We currently support two interaction patterns for our tabs component: tablist + tab + tabpanel, and nav + anchor.

We’ve received feedback that the nav + anchor pattern can be confusing, since it looks like tabs, but behaves differently. Furthermore, if these two interaction patterns are mixed, the inconsistency can be confusing for users. These issues would affected users with some degree of vision that use assistive technology to supplement their experience.

We should explore ways to reduce or eliminate the confusion here. Some options include (but are not limited to):

1. Eliminate the nav + anchor pattern and exclusively use tablist + tab + tabpanel. (i.e. deprecate and remove MatTabNavBar)
2. Change the visuals of the nav + anchor pattern such that it’s more visually distinct
3. Keep both patterns, but add additional guidance and/or checks to ensure that users aren’t introducing confusing behaviors, such as assertions that nav-tabs apply focus management or warning if both are used in the same app.
4. Change nav-tabs to use tablist + tab while still using anchor elements and routing for the content (i.e., keep MatNavTabBar, but change its interaction pattern)

It’s worth mentioning that using anchors is desirable for use cases where you want the URL to change and/or want to support opening in new browser tabs. Using routing to drive tab navigation also easily fits into Angular’s route-based lazy-loading system.

cc @zelliott

[jelbourn]

What’s the difference between bullets 1 and 4? Is 1 remove/deprecate <nav mat-tab-nav-bar> and 4 change it to the tab / tablist pattern?

Yeah, that was what I meant to convey; I updated the original to clarify.

Based on some of those examples, I have a feeling it would be worth raising this to the Material Design team to explore option two above (changing the visuals of nav tabs) so that, while they kind of look like tabs in general, they’re distinctive from the thing that the specification calls tabs (i.e., introduce a new component).

[angular-automatic-lock-bot[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.}