Skip to content

Commit fc751ae

Browse files
authored
docs(material/tabs): expand nav-tab a11y guidance (#23705)
Expands the a11y guidance for nav-tabs to mention focus manage and potentially setting an aria landmark.
1 parent def02b6 commit fc751ae

File tree

1 file changed

+8
-2
lines changed

1 file changed

+8
-2
lines changed

src/material/tabs/tabs.md

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,14 +95,20 @@ between content within a single page.
9595
`MatTabNavBar`, implements a navigation interaction pattern by using a `<nav>` element with anchor
9696
elements as the "tabs". You should use this component when you want your cross-page navigation to
9797
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.
99105

100106
#### Labels
101107

102108
Always provide an accessible label via `aria-label` or `aria-describedby` for tabs without
103109
descriptive text content.
104110

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.
106112

107113
#### Keyboard interaction
108114

0 commit comments

Comments
 (0)