Skip to content

Accessibility - Incorrect focus order on MatDrawer when positioned 'end' #11992

@satheeshd

Description

@satheeshd

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?

Scenario 3
Scenario 2

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

Metadata

Metadata

Assignees

Labels

AccessibilityThis issue is related to accessibility (a11y)P4A relatively minor issue that is not relevant to core functions

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions