fix(material/sidenav): fix tabindex issue on side mode #30979
Conversation
remove tabindex=-1 from mat-drawer when in mode="side" so mobile screen readers like TalkBack does not focus on the container fixes b/286459024
andrewseguin
added
the
dev-app preview
|
Deployed dev-app for a1c6329 to: https://ng-dev-previews-comp--pr-angular-components-30979-dev-a2aqsdxi.web.app Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt. |
DBowen33
requested review from
adolgachev and
crisbeto
and removed request for
a team
| @@ -165,7 +165,7 @@ export class MatDrawerContent extends CdkScrollable implements AfterContentInit | |||
| // this was also done by the animations module which some internal tests seem to depend on. | |||
| // Simulate it by toggling the `hidden` attribute instead. | |||
| '[style.visibility]': '(!_container && !opened) ? "hidden" : null', | |||
| 'tabIndex': '-1', | |||
| '[attr.tabindex]': 'mode === "side" ? null : "-1"', | |||
There was a problem hiding this comment.
Nit: please move up to go after '[attr.align]'.
adolgachev
added
the
requires: TGP
| @@ -165,7 +165,7 @@ export class MatDrawerContent extends CdkScrollable implements AfterContentInit | |||
| // this was also done by the animations module which some internal tests seem to depend on. | |||
| // Simulate it by toggling the `hidden` attribute instead. | |||
| '[style.visibility]': '(!_container && !opened) ? "hidden" : null', | |||
| 'tabIndex': '-1', | |||
| '[attr.tabindex]': 'mode === "side" ? null : "-1"', | |||
There was a problem hiding this comment.
I think that it needs to remain focusable, because this logic falls back to it if it can't find any focusable elements inside the content. Maybe it's more appropriate to clear the tabindex when the sidenav is closed?
There was a problem hiding this comment.
Clearing the tabindex when the sidenav is closed will still cause TB focus to focus on the container when it's open due to the tabindex="-1" still being present.
I was thinking that since mode="side", the autofocus value will always be dialog according to this logic. Since the value is dialog, it won't reach the first-tabbable case when it's side mode.
There was a problem hiding this comment.
I meant that you can do '[attr.tabindex]': 'isOpen ? -1 : null' which would prevent it from receiving focus. Another option can be to mark it as inert.
remove tabindex=-1 from mat-drawer when in mode="side" so that the mat-drawer container it is not focusable by mobile screen readers such as TalkBack
Before Screencast: https://screencast.googleplex.com/cast/NTYzNjAxNjE0Nzc5MTg3MnwzOGVlNmNmZC1jYQ
After Screencast: https://screencast.googleplex.com/cast/NDg5NzA2MTg1NzEzMjU0NHxjZTcyZGY5MS04OA
fixes b/286459024