Skip to content

Commit 55bb979

Browse files
jelbournandrewseguin
authored andcommitted
docs(tabs): describe interaction difference between tab-group & nav-tab-bar (#16563)
1 parent ba508a6 commit 55bb979

File tree

1 file changed

+7
-1
lines changed

1 file changed

+7
-1
lines changed

src/material/tabs/tabs.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,10 +122,16 @@ duration can be configured globally using the `MAT_TABS_CONFIG` injection token.
122122
<!-- example(tab-group-animations) -->
123123

124124
### Accessibility
125+
`<mat-tab-group>` and `<mat-nav-tab-bar>` use different interaction patterns. The
126+
`<mat-tab-group>` component combines `tablist`, `tab`, and `tabpanel` into a single component with
127+
the appropriate keyboard shortcuts. The `<mat-nav-tab-bar>`, however, use a _navigation_ interaction
128+
pattern by using a `<nav>` element with anchor elements as the "tabs". The difference
129+
between these two patterns comes from the fact one updates the page URL while the other does not.
130+
131+
#### Labels
125132
Tabs without text or labels should be given a meaningful label via `aria-label` or
126133
`aria-labelledby`. For `MatTabNav`, the `<nav>` element should have a label as well.
127134

128-
129135
#### Keyboard interaction
130136

131137
| Shortcut | Action |

0 commit comments

Comments
 (0)