Skip to content

Reevaluate tab navigation interaction pattern #23706

Closed
@jelbourn

Description

@jelbourn

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    AccessibilityThis issue is related to accessibility (a11y)P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: material/tabs

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions