Refactor MatTabNav as ARIA tabs with a new MatTabNavPanel component and [tabPanel] input. #24062

zelliott · 2021-12-06T19:08:33Z

Fixes #23706.

Adds a new MatTabNavPanel component that is intended to be used with MatTabNav. MatTabNavPanel renders the tabpanel, MatTabNav renders the tablist.
Adds a new optional [tabPanel] input to MatTabNav that accepts a MatTabNavPanel. Allows MatTabNav to make changes to MatTabNavPanel (i.e. aria-labelledby).
If [tabPanel] is provided, MatTabNav acts as an ARIA tabs. Otherwise, it continues to act as links within a navigation landmark (no change from status quo).
Adds unit tests for new behavior.
Change made in both non-MDC and MDC tabs.

src/material/tabs/tab-nav-bar/tab-nav-bar.ts

zelliott · 2021-12-08T18:18:35Z

src/material/tabs/tab-nav-bar/tab-nav-bar.ts

@@ -151,6 +183,7 @@ export abstract class _MatTabNavBase
  templateUrl: 'tab-nav-bar.html',
  styleUrls: ['tab-nav-bar.css'],
  host: {
+    '[attr.role]': 'tabPanel ? "tablist" : null',


@crisbeto This - as well as some of the aria-* attribute host bindings changes below - are breaking changes. For example, if a consumer has added role="<something>" to this element, then after this PR is submitted, this host binding will override their specified role and set it to null (as no tabPanel will have been provided). We can avoid this breaking change by modifying this logic to check to see if a role has been provided, and if so, use that. For example:

'[attr.role]': 'existingRole || (tabPanel ? "tablist" : null)'

We'd want to do the same to the other added aria-* host bindings. WDYT?

I don't think that this is a breaking change since our host bindings are implementation details and they won't break people's builds. I also suspect that it's rare for people to actually set these aria- attributes correctly. If we do get issue reports about it, it'll be easy to follow up with a fix.

Updated the PR per our conversation to fallback to the existing ARIA host attributes if no tabPanel is provided, as opposed to removing those attributes with a null attribute binding. This makes this PR now truly 100% opt-in & backwards compatible. Consumer code should not change if tabPanel isn't provided. This makes it much easier to land internally.

After this PR is merged in, I'll:

Migrate the internal instances of consumers overriding ARIA host attributes to the new tabPanel input & associated component.

Remove the code in this PR that "falls back to the existing ARIA host attributes if no tabPanel is provided" (as it calls the DOM directly and not something we want in the component long-term).

Migrate the remaining internal consumer instances onto the new tabPanel input & associated component.

Remove the code in this PR that falls back to the ARIA link / navigation landmark pattern if no tabPanel is provded.

Re-opening to give @crisbeto a chance to ack this.

src/material-experimental/mdc-tabs/tab-nav-bar/tab-nav-bar.spec.ts

src/material-experimental/mdc-tabs/testing/tab-link-harness.ts

src/material-experimental/mdc-tabs/testing/tab-nav-panel-harness.ts

src/material/tabs/tab-nav-bar/tab-nav-bar.ts

crisbeto

LGTM, the last comment isn't a blocker.

src/components-examples/material/tabs/tab-nav-bar-with-panel/tab-nav-bar-with-panel-example.ts

by introducing a new tabpanel component.

jelbourn

Read through the summary and did a quick pass on the code, overall LGTM.

…rn (angular#24062) by introducing a new tabpanel component.

angular-automatic-lock-bot · 2022-02-07T00:02:52Z

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.}

google-cla bot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Dec 6, 2021

crisbeto reviewed Dec 6, 2021

View reviewed changes

crisbeto mentioned this pull request Dec 7, 2021

feat(mat-tab-nav-bar): router-outlet transition animation like mat-tab-group #24053

Open

zelliott force-pushed the tabs branch from 22e1e43 to b30cc24 Compare December 7, 2021 21:42

zelliott changed the title ~~Refactor MatTabNav as ARIA tabs with a new MatTabNavPanel component and [panel] input.~~ Refactor MatTabNav as ARIA tabs with a new MatTabNavPanel component and [tabPanel] input. Dec 7, 2021

zelliott commented Dec 8, 2021

View reviewed changes

zelliott force-pushed the tabs branch 2 times, most recently from 6dc9473 to 5163cd8 Compare December 17, 2021 16:40

zelliott requested review from crisbeto and jelbourn December 19, 2021 15:48

zelliott marked this pull request as ready for review December 20, 2021 20:30

zelliott requested review from andrewseguin and a team as code owners December 20, 2021 20:30

crisbeto reviewed Dec 21, 2021

View reviewed changes

crisbeto approved these changes Dec 22, 2021

View reviewed changes

src/components-examples/material/tabs/tab-nav-bar-with-panel/tab-nav-bar-with-panel-example.ts Outdated Show resolved Hide resolved

crisbeto added G This is is related to a Google internal issue action: merge The PR is ready for merge by the caretaker P2 The issue is important to a large percentage of users, with a workaround target: minor This PR is targeted for the next minor release labels Dec 22, 2021

feat(material/tabs): Refactor MatTabNav to follow the ARIA tabs pattern

a75d4ce

by introducing a new tabpanel component.

zelliott force-pushed the tabs branch from 849bc63 to a75d4ce Compare December 22, 2021 16:21

andrewseguin removed the cla: yes PR author has agreed to Google's Contributor License Agreement label Dec 28, 2021

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Dec 29, 2021

josephperrott removed the request for review from a team January 4, 2022 21:46

jelbourn approved these changes Jan 7, 2022

View reviewed changes

wagnermaciel merged commit ea78a47 into angular:master Jan 7, 2022

zarend pushed a commit to zarend/components that referenced this pull request Jan 7, 2022

feat(material/tabs): Refactor MatTabNav to follow the ARIA tabs patte…

e6e26a1

…rn (angular#24062) by introducing a new tabpanel component.

This was referenced Jan 27, 2022

build(deps): bump @angular/cdk from 12.2.4 to 13.2.0 numbersprotocol/capture-lite#1197

Closed

build(deps): bump @angular/material from 12.2.4 to 13.2.0 numbersprotocol/capture-lite#1236

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Feb 7, 2022

jelbourn added the Accessibility This issue is related to accessibility (a11y) label Mar 4, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor MatTabNav as ARIA tabs with a new MatTabNavPanel component and [tabPanel] input. #24062

Refactor MatTabNav as ARIA tabs with a new MatTabNavPanel component and [tabPanel] input. #24062

zelliott commented Dec 6, 2021 •

edited

zelliott Dec 8, 2021

crisbeto Dec 8, 2021

zelliott Dec 9, 2021

zelliott Dec 17, 2021 •

edited

crisbeto left a comment

jelbourn left a comment

angular-automatic-lock-bot bot commented Feb 7, 2022

Refactor MatTabNav as ARIA tabs with a new MatTabNavPanel component and [tabPanel] input. #24062

Refactor MatTabNav as ARIA tabs with a new MatTabNavPanel component and [tabPanel] input. #24062

Conversation

zelliott commented Dec 6, 2021 • edited

zelliott Dec 8, 2021

Choose a reason for hiding this comment

crisbeto Dec 8, 2021

Choose a reason for hiding this comment

zelliott Dec 9, 2021

Choose a reason for hiding this comment

zelliott Dec 17, 2021 • edited

Choose a reason for hiding this comment

crisbeto left a comment

Choose a reason for hiding this comment

jelbourn left a comment

Choose a reason for hiding this comment

angular-automatic-lock-bot bot commented Feb 7, 2022

zelliott commented Dec 6, 2021 •

edited

zelliott Dec 17, 2021 •

edited