MatSidenav with position="end" is in the wrong tab order #15247
Assignees
Labels
Accessibility
This issue is related to accessibility (a11y)
area: material/sidenav
P3
An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Comments
josephperrott
added
Accessibility
crisbeto
added a commit
to crisbeto/material2
that referenced
this issue
Jan 4, 2020
We project all sidenavs before the content in the DOM since we can't know ahead of time what their position will be. This is problematic when the drawer is in the end position, because the visual order of the content no longer matches the tab order. These changes fix the issue by moving the sidenav after the content manually when it's set to `end` and then moving it back if it's set to `start` again.
A couple of notes:
1. We could technically do this with content projection, but it would only work when the `position` value is static (e.g. `position="end"`). I did it this way so we can cover the case where it's data bound.
2. Currently the focus trap anchors are set around the sidenav, but that's problematic when we're moving the element around since the anchors will be left at their old positions. To avoid adding extra logic for moving the anchors, I've moved the focus trap to be inside the sidenav. Here's what the DOM looks like at the moment:
```html
<container>
<anchor/>
<sidenav>Content</sidenav>
<anchor/>
</container>
```
And this is what I've changed it to:
```html
<container>
<sidenav>
<anchor/>
Content
<anchor/>
</sidenav>
</container
```
Fixes angular#15247.
|
This also seems to be relevant issue #11992 |
crisbeto
added a commit
to crisbeto/material2
that referenced
this issue
Jan 19, 2020
We project all sidenavs before the content in the DOM since we can't know ahead of time what their position will be. This is problematic when the drawer is in the end position, because the visual order of the content no longer matches the tab order. These changes fix the issue by moving the sidenav after the content manually when it's set to `end` and then moving it back if it's set to `start` again.
A couple of notes:
1. We could technically do this with content projection, but it would only work when the `position` value is static (e.g. `position="end"`). I did it this way so we can cover the case where it's data bound.
2. Currently the focus trap anchors are set around the sidenav, but that's problematic when we're moving the element around since the anchors will be left at their old positions. To avoid adding extra logic for moving the anchors, I've moved the focus trap to be inside the sidenav. Here's what the DOM looks like at the moment:
```html
<container>
<anchor/>
<sidenav>Content</sidenav>
<anchor/>
</container>
```
And this is what I've changed it to:
```html
<container>
<sidenav>
<anchor/>
Content
<anchor/>
</sidenav>
</container
```
Fixes angular#15247.
crisbeto
added a commit
to crisbeto/material2
that referenced
this issue
Jul 4, 2020
We project all sidenavs before the content in the DOM since we can't know ahead of time what their position will be. This is problematic when the drawer is in the end position, because the visual order of the content no longer matches the tab order. These changes fix the issue by moving the sidenav after the content manually when it's set to `end` and then moving it back if it's set to `start` again.
A couple of notes:
1. We could technically do this with content projection, but it would only work when the `position` value is static (e.g. `position="end"`). I did it this way so we can cover the case where it's data bound.
2. Currently the focus trap anchors are set around the sidenav, but that's problematic when we're moving the element around since the anchors will be left at their old positions. To avoid adding extra logic for moving the anchors, I've moved the focus trap to be inside the sidenav. Here's what the DOM looks like at the moment:
```html
<container>
<anchor/>
<sidenav>Content</sidenav>
<anchor/>
</container>
```
And this is what I've changed it to:
```html
<container>
<sidenav>
<anchor/>
Content
<anchor/>
</sidenav>
</container
```
Fixes angular#15247.
crisbeto
added a commit
to crisbeto/material2
that referenced
this issue
Oct 15, 2020
…sual order
We project all sidenavs before the content in the DOM since we can't know ahead of time what their
position will be. This is problematic when the drawer is in the end position, because the visual
order of the content no longer matches the tab order. These changes fix the issue by moving the
sidenav after the content manually when it's set to `end` and then moving it back if it's set to
`start` again.
A couple of notes:
1. We could technically do this with content projection, but it would only work when the `position`
value is static (e.g. `position="end"`). I did it this way so we can cover the case where it's
data bound.
2. Currently the focus trap anchors are set around the sidenav, but that's problematic when we're
moving the element around since the anchors will be left at their old positions. To avoid adding
extra logic for moving the anchors, I've moved the focus trap to be inside the sidenav. Here's
what the DOM looks like at the moment:
```html
<container>
<anchor/>
<sidenav>Content</sidenav>
<anchor/>
</container>
```
And this is what I've changed it to:
```html
<container>
<sidenav>
<anchor/>
Content
<anchor/>
</sidenav>
</container
```
Fixes angular#15247.
jelbourn
changed the title
crisbeto
added a commit
to crisbeto/material2
that referenced
this issue
Nov 26, 2020
…sual order
We project all sidenavs before the content in the DOM since we can't know ahead of time what their
position will be. This is problematic when the drawer is in the end position, because the visual
order of the content no longer matches the tab order. These changes fix the issue by moving the
sidenav after the content manually when it's set to `end` and then moving it back if it's set to
`start` again.
A couple of notes:
1. We could technically do this with content projection, but it would only work when the `position`
value is static (e.g. `position="end"`). I did it this way so we can cover the case where it's
data bound.
2. Currently the focus trap anchors are set around the sidenav, but that's problematic when we're
moving the element around since the anchors will be left at their old positions. To avoid adding
extra logic for moving the anchors, I've moved the focus trap to be inside the sidenav. Here's
what the DOM looks like at the moment:
```html
<container>
<anchor/>
<sidenav>Content</sidenav>
<anchor/>
</container>
```
And this is what I've changed it to:
```html
<container>
<sidenav>
<anchor/>
Content
<anchor/>
</sidenav>
</container
```
Fixes angular#15247.
crisbeto
added a commit
to crisbeto/material2
that referenced
this issue
May 6, 2021
…sual order
We project all sidenavs before the content in the DOM since we can't know ahead of time what their
position will be. This is problematic when the drawer is in the end position, because the visual
order of the content no longer matches the tab order. These changes fix the issue by moving the
sidenav after the content manually when it's set to `end` and then moving it back if it's set to
`start` again.
A couple of notes:
1. We could technically do this with content projection, but it would only work when the `position`
value is static (e.g. `position="end"`). I did it this way so we can cover the case where it's
data bound.
2. Currently the focus trap anchors are set around the sidenav, but that's problematic when we're
moving the element around since the anchors will be left at their old positions. To avoid adding
extra logic for moving the anchors, I've moved the focus trap to be inside the sidenav. Here's
what the DOM looks like at the moment:
```html
<container>
<anchor/>
<sidenav>Content</sidenav>
<anchor/>
</container>
```
And this is what I've changed it to:
```html
<container>
<sidenav>
<anchor/>
Content
<anchor/>
</sidenav>
</container
```
Fixes angular#15247.
crisbeto
added a commit
to crisbeto/material2
that referenced
this issue
Aug 16, 2021
…sual order
We project all sidenavs before the content in the DOM since we can't know ahead of time what their
position will be. This is problematic when the drawer is in the end position, because the visual
order of the content no longer matches the tab order. These changes fix the issue by moving the
sidenav after the content manually when it's set to `end` and then moving it back if it's set to
`start` again.
A couple of notes:
1. We could technically do this with content projection, but it would only work when the `position`
value is static (e.g. `position="end"`). I did it this way so we can cover the case where it's
data bound.
2. Currently the focus trap anchors are set around the sidenav, but that's problematic when we're
moving the element around since the anchors will be left at their old positions. To avoid adding
extra logic for moving the anchors, I've moved the focus trap to be inside the sidenav. Here's
what the DOM looks like at the moment:
```html
<container>
<anchor/>
<sidenav>Content</sidenav>
<anchor/>
</container>
```
And this is what I've changed it to:
```html
<container>
<sidenav>
<anchor/>
Content
<anchor/>
</sidenav>
</container
```
Fixes angular#15247.
crisbeto
added a commit
to crisbeto/material2
that referenced
this issue
Dec 9, 2021
…sual order
We project all sidenavs before the content in the DOM since we can't know ahead of time what their
position will be. This is problematic when the drawer is in the end position, because the visual
order of the content no longer matches the tab order. These changes fix the issue by moving the
sidenav after the content manually when it's set to `end` and then moving it back if it's set to
`start` again.
A couple of notes:
1. We could technically do this with content projection, but it would only work when the `position`
value is static (e.g. `position="end"`). I did it this way so we can cover the case where it's
data bound.
2. Currently the focus trap anchors are set around the sidenav, but that's problematic when we're
moving the element around since the anchors will be left at their old positions. To avoid adding
extra logic for moving the anchors, I've moved the focus trap to be inside the sidenav. Here's
what the DOM looks like at the moment:
```html
<container>
<anchor/>
<sidenav>Content</sidenav>
<anchor/>
</container>
```
And this is what I've changed it to:
```html
<container>
<sidenav>
<anchor/>
Content
<anchor/>
</sidenav>
</container
```
Fixes angular#15247.
crisbeto
added a commit
to crisbeto/material2
that referenced
this issue
Jan 14, 2022
…sual order
We project all sidenavs before the content in the DOM since we can't know ahead of time what their
position will be. This is problematic when the drawer is in the end position, because the visual
order of the content no longer matches the tab order. These changes fix the issue by moving the
sidenav after the content manually when it's set to `end` and then moving it back if it's set to
`start` again.
A couple of notes:
1. We could technically do this with content projection, but it would only work when the `position`
value is static (e.g. `position="end"`). I did it this way so we can cover the case where it's
data bound.
2. Currently the focus trap anchors are set around the sidenav, but that's problematic when we're
moving the element around since the anchors will be left at their old positions. To avoid adding
extra logic for moving the anchors, I've moved the focus trap to be inside the sidenav. Here's
what the DOM looks like at the moment:
```html
<container>
<anchor/>
<sidenav>Content</sidenav>
<anchor/>
</container>
```
And this is what I've changed it to:
```html
<container>
<sidenav>
<anchor/>
Content
<anchor/>
</sidenav>
</container
```
Fixes angular#15247.
andrewseguin
pushed a commit
that referenced
this issue
Jan 18, 2022
…sual order (#18101) We project all sidenavs before the content in the DOM since we can't know ahead of time what their position will be. This is problematic when the drawer is in the end position, because the visual order of the content no longer matches the tab order. These changes fix the issue by moving the sidenav after the content manually when it's set to `end` and then moving it back if it's set to `start` again. A couple of notes: 1. We could technically do this with content projection, but it would only work when the `position` value is static (e.g. `position="end"`). I did it this way so we can cover the case where it's data bound. 2. Currently the focus trap anchors are set around the sidenav, but that's problematic when we're moving the element around since the anchors will be left at their old positions. To avoid adding extra logic for moving the anchors, I've moved the focus trap to be inside the sidenav. Here's what the DOM looks like at the moment: ```html <container> <anchor/> <sidenav>Content</sidenav> <anchor/> </container> ``` And this is what I've changed it to: ```html <container> <sidenav> <anchor/> Content <anchor/> </sidenav> </container ``` Fixes #15247.
andrewseguin
pushed a commit
that referenced
this issue
Jan 18, 2022
…sual order (#18101) We project all sidenavs before the content in the DOM since we can't know ahead of time what their position will be. This is problematic when the drawer is in the end position, because the visual order of the content no longer matches the tab order. These changes fix the issue by moving the sidenav after the content manually when it's set to `end` and then moving it back if it's set to `start` again. A couple of notes: 1. We could technically do this with content projection, but it would only work when the `position` value is static (e.g. `position="end"`). I did it this way so we can cover the case where it's data bound. 2. Currently the focus trap anchors are set around the sidenav, but that's problematic when we're moving the element around since the anchors will be left at their old positions. To avoid adding extra logic for moving the anchors, I've moved the focus trap to be inside the sidenav. Here's what the DOM looks like at the moment: ```html <container> <anchor/> <sidenav>Content</sidenav> <anchor/> </container> ``` And this is what I've changed it to: ```html <container> <sidenav> <anchor/> Content <anchor/> </sidenav> </container ``` Fixes #15247. (cherry picked from commit c489f37)
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
forsti0506
pushed a commit
to forsti0506/components
that referenced
this issue
Apr 3, 2022
…sual order (angular#18101) We project all sidenavs before the content in the DOM since we can't know ahead of time what their position will be. This is problematic when the drawer is in the end position, because the visual order of the content no longer matches the tab order. These changes fix the issue by moving the sidenav after the content manually when it's set to `end` and then moving it back if it's set to `start` again. A couple of notes: 1. We could technically do this with content projection, but it would only work when the `position` value is static (e.g. `position="end"`). I did it this way so we can cover the case where it's data bound. 2. Currently the focus trap anchors are set around the sidenav, but that's problematic when we're moving the element around since the anchors will be left at their old positions. To avoid adding extra logic for moving the anchors, I've moved the focus trap to be inside the sidenav. Here's what the DOM looks like at the moment: ```html <container> <anchor/> <sidenav>Content</sidenav> <anchor/> </container> ``` And this is what I've changed it to: ```html <container> <sidenav> <anchor/> Content <anchor/> </sidenav> </container ``` Fixes angular#15247.
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Bug, feature request, or proposal:
Sidenav doesn't seem to meet https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence.html and https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html. Visual order should generally match DOM order and tab sequence.
What is the expected behavior?
Being able to position sidenav either before or after the main content.
What is the current behavior?
Sidenav always appears first in DOM and tab order even if positioned after the content.
Looking at this example you will notice that as you tab from the url to the page it goes from the right panel (Link2) to the main content (Link1), rather than the other way around.
What are the steps to reproduce?
Providing a StackBlitz reproduction is the best way to share your issue.
StackBlitz starter: https://goo.gl/wwnhMV
https://stackblitz.com/edit/angular-xww88d
What is the use-case or motivation for changing an existing behavior?
To meet WCAG 2.1 requirements
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Material 7.3.1
Is there anything else we should know?
Would be nice if this allowed users the option to control order in the DOM. It may need to change depending on the sidenav mode (over, push, side).
The text was updated successfully, but these errors were encountered: