File tree Expand file tree Collapse file tree 1 file changed +7
-1
lines changed Expand file tree Collapse file tree 1 file changed +7
-1
lines changed Original file line number Diff line number Diff line change @@ -122,10 +122,16 @@ duration can be configured globally using the `MAT_TABS_CONFIG` injection token.
122
122
<!-- example(tab-group-animations) -->
123
123
124
124
### 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
125
132
Tabs without text or labels should be given a meaningful label via ` aria-label ` or
126
133
` aria-labelledby ` . For ` MatTabNav ` , the ` <nav> ` element should have a label as well.
127
134
128
-
129
135
#### Keyboard interaction
130
136
131
137
| Shortcut | Action |
You can’t perform that action at this time.
0 commit comments