File tree 1 file changed +8
-2
lines changed
1 file changed +8
-2
lines changed Original file line number Diff line number Diff line change @@ -95,14 +95,20 @@ between content within a single page.
95
95
` MatTabNavBar ` , implements a navigation interaction pattern by using a ` <nav> ` element with anchor
96
96
elements as the "tabs". You should use this component when you want your cross-page navigation to
97
97
look like a tabbed interface. As a rule of thumb, you should consider ` MatTabNavBar ` if changing
98
- tabs would change the browser URL.
98
+ tabs would change the browser URL. For all navigation, including with ` MatTabNavBar ` , always move
99
+ browser focus to an element at the beginning of the content to which the user is navgating.
100
+ Furthermore, consider placing your ` <router-outlet> ` inside of a
101
+ [ landmark region] ( https://www.w3.org/TR/wai-aria-1.1/#dfn-landmark ) appropriate to the page.
102
+
103
+ Avoid mixing both ` MatTabGroup ` and ` MatTabNavBar ` in your application. The inconsistent interaction
104
+ patterns applied between the components may confuse users.
99
105
100
106
#### Labels
101
107
102
108
Always provide an accessible label via ` aria-label ` or ` aria-describedby ` for tabs without
103
109
descriptive text content.
104
110
105
- When using ` MatTabNavGroup ` , you should also specify a label for the ` <nav> ` element.
111
+ When using ` MatTabNavGroup ` , always specify a label for the ` <nav> ` element.
106
112
107
113
#### Keyboard interaction
108
114
You can’t perform that action at this time.
0 commit comments