-
Notifications
You must be signed in to change notification settings - Fork 6.8k
Description
Bug, feature request, or proposal:
Bug/Feature request:
Accessibility Hurdles: incorrect tab order when MatDrawer is positioned at the 'end'.<mat-drawer [position]="'end'"></mat-drawer>
What is the expected behavior?
Scenario 1:
If the <mat-drawer-container></mat-drawer-container>
contains only a 'start' positioned MatDrawer, then the tab order should be as below:
first: <mat-drawer [position]="'start'"></mat-drawer>
second: <mat-drawer-content></mat-drawer-content>
Scenario 2:
If the <mat-drawer-container></mat-drawer-container>
contains both 'start' positioned and 'end' positioned MatDrawers, then the tab order should be as below:
first: <mat-drawer [position]="'start'"></mat-drawer>
second: <mat-drawer-content></mat-drawer-content>
third: <mat-drawer [position]="'end'"></mat-drawer>
Scenario 3:
If the <mat-drawer-container></mat-drawer-container>
contains only an 'end' positioned MatDrawer, then the tab order should be as below:
first: <mat-drawer-content></mat-drawer-content>
second: <mat-drawer [position]="'end'"></mat-drawer>
What is the current behavior?
If the contains an 'end' positioned MatDrawer, then the tab order is incorrect as below:
first: <mat-drawer [position]="'end'"></mat-drawer>
second:<mat-drawer-content></mat-drawer-content>
What are the steps to reproduce?
What is the use-case or motivation for changing an existing behavior?
for accessibility & usability reasons, when the page content is in LTR mode, the tab order has to be from left content to right. Currently the end positioning of is achieved using the 'positioning right' strategy using 'css'. This causes the DOM elements still remain before the items. This causes tab order related issues. The main content can be reached only after the 'end' positioned contents are reached.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Material: 6.3.1
Is there anything else we should know?
WCAG Recommendations:
WCAG (2.4.3)
Quick refrences