Focus trap does not respect tabindex

[Eddman]

Bug, feature request, or proposal:

Bug.

What is the expected behavior?

Focus trap will focus elements with respect to tabindex attribute.

What is the current behavior?

When a dialog body (or any other focus trap) contains a HTML like this:

<input type="text" tabindex=2 ...>
<button tabindex=1 ...>

the input is focused, but the button should be obviously.

In addition using higher tabindex then 0 causes the focus trap to stop working at all. The anchors have tabindex 0 and are focused after all other elements on the page with tabindex not set. User is therfore able to focus elements under dialog overlay.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

@angular 4.2.4
@angular/material 2.0.0-beta.7

[devversion]

There are solutions to properly resolve the element order by respecting the tabIndex values.

But it turns out to be a bigger problem that needs a full solution (that may involve reworking the whole trap).

One of the issues would be that users are always able to reach out of the focus-trap if there are other elements with a positive tabIndex value.

// This needs more discussion & maybe a design doc at some point.

[ilovett]

Also seeing this issue, focus trap doesnt seem to be working properly with dialogs

[crysislinux]

For someone just want set the initial focused element but don't require detail orders. Use cdkFocusInitial directive on the element you want it to focus on first.

[sinedied]

Any news on this? It's quite problematic that focus trap stops working once a tabIndex is set inside a dialog 😕

[crisbeto]

There's a new focus trap implementation in the pipeline that will resolve this https://github.com/angular/components/blob/master/src/cdk/a11y/focus-trap/event-listener-inert-strategy.ts.