Skip to content

Commit 319942d

Browse files
authored
docs(material/tabs): update MDC changes (#25760)
1 parent 9d5f0f3 commit 319942d

File tree

1 file changed

+8
-9
lines changed

1 file changed

+8
-9
lines changed

guides/v15-mdc-migration.md

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -568,10 +568,14 @@ TODO(mmalerba): link to density docs once they exist.
568568

569569
### Tabs
570570

571-
* Accessibility: `<mat-tab-nav-bar>` now requires an additional `<mat-tab-nav-panel>` element to
572-
be wrapped around the content that it is connected to. A refernece to the tab panel has to be
573-
passed in to the `tabPanel` or an error will be thrown. The addition of the tab panel allows
574-
for better labelling for assistive technology.
571+
* Header label text color matches the theme color when the tab header is selected.
572+
573+
* Header labels stretch to fill the container's width. This can be turned off by
574+
setting the `<mat-tab-group>` input `mat-stretch-tabs` to `false`.
575+
576+
* The `<mat-tab-nav-bar>` requires a reference to a `<mat-tab-nav-panel>` using the `tabPanel` input.
577+
The `<mat-tab-nav-panel>` must wrap the content connected to the nav-bar. This allows
578+
the component to provide correct labeling for assistive technology.
575579

576580
```html
577581
<!-- Before -->
@@ -582,11 +586,6 @@ TODO(mmalerba): link to density docs once they exist.
582586
<mat-tab-nav-panel #tabPanel>...</mat-tab-nav-panel>
583587
```
584588

585-
* The selected tab label now uses a text color from the theme, matching the selection indicator.
586-
587-
* Tab header labels default to stretching the width of the container. This can be turned off by
588-
providing `mat-stretch-tabs="false"`.
589-
590589
### Tooltip
591590

592591
* Background color is opaque instead of slightly transparent. This improves accessibility.

0 commit comments

Comments
 (0)