Description
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):
- Eliminate the nav + anchor pattern and exclusively use tablist + tab + tabpanel. (i.e. deprecate and remove
MatTabNavBar
) - Change the visuals of the nav + anchor pattern such that it's more visually distinct
- 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.
- 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