Skip to content

Commit 91bffff

Browse files
committed
docs(material/tabs): update tab nav panel changes in MDC migration doc
Resolves a TODO in the MDC migration doc about elaborating further on the new a11y pattern for the tab nav bar.
1 parent 3d76bcb commit 91bffff

File tree

1 file changed

+13
-3
lines changed

1 file changed

+13
-3
lines changed

guides/v15-mdc-migration.md

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -570,9 +570,19 @@ TODO(mmalerba): link to density docs once they exist.
570570

571571
### Tabs
572572

573-
* Accessibility: `MatTabNav` now throws an error if the `[tabPanel]` input is not provided. The
574-
`[tabPanel]` input and associated `mat-tab-nav-panel` component improve accessibility.
575-
TODO(crisbeto): This point needs further elaboration.
573+
* Accessibility: `<mat-tab-nav-bar>` now requires an additional `<mat-tab-nav-panel>` element to
574+
be wrapped around the content that it is connected to. A refernece to the tab panel has to be
575+
passed in to the `tabPanel` or an error will be thrown. The addition of the tab panel allows
576+
for better labelling for assistive technology.
577+
578+
```html
579+
<!-- Before -->
580+
<mat-tab-nav-bar>...</mat-tab-nav-bar>
581+
582+
<!-- After -->
583+
<mat-tab-nav-bar [tabPanel]="tabPanel">...</mat-tab-nav-bar>
584+
<mat-tab-nav-panel #tabPanel>...</mat-tab-nav-panel>
585+
```
576586

577587
* The selected tab label now uses a text color from the theme, matching the selection indicator.
578588

0 commit comments

Comments
 (0)