Material: dialog: shift+tab doesn't loop properly after it reaches the beginning

[frkfir]

Actual Behavior:

• `What is the issue? *
  shift+tab doesn't work properly when md-dialog opens.
  Can't go to the last element/button etc.. that appear on this dialog.
  It get lost. only Tab key works has expected.
• `What is the expected behavior?
  shift+tab will work properly when md-dialog opens and get to the last ellement/button etc that appear on the dialog.
  It's supposed to behave in a circular way. (looped)

CodePen (or steps to reproduce the issue): *

• `CodePen Demo which shows your issue: N/A
• `Details:
  Happens on https://material.angularjs.org/latest/

AngularJS Versions: *

• `AngularJS Version: 1.1.5
• `AngularJS Material Version: 1.1.2 and also happens on 1.1.5

Additional Information:

• `Browser Type: * Chrome, Firefox, Explorer etc...
• `Browser Version: * Chrome Version 62.0.3202.75 (Official Build) (32-bit)
• `OS: * Windows 7
• `Stack Traces: N/A

---

Shortcut to create a new CodePen Demo.
Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.

[EladBezalel]

@Splaktar do you mind taking a look at that?

[Splaktar]

I'm able to reproduce. It loops fine when going forward, but when going backwards it just stops at the 1st tabindex and never loops over to the last tabindex.

[marosoft]

@Splaktar Maybe it is worth to back port the focus trap from Angular Material.
This is how it is used in the dialog: https://github.com/angular/material2/blob/master/src/lib/dialog/dialog-container.ts#L132

The Focus Trap itself: https://github.com/angular/material2/blob/master/src/cdk/a11y/focus-trap/focus-trap.md

[Splaktar]

@marosoft that is an interesting and proven approach. However, I wonder if we can solve it in a way that doesn't involve bringing a lot of new code into the repo. Have you looked at any alternatives that are more simple? Did they present problems that only something like the CDK focus trap can solve?

I'm currently focused on P1 issues, but this P2 issue should get some of my time later this fall.

[Splaktar]

We have the above structure with top and bottom focus traps.

Our logic for "redirecting" the focus is flawed:
https://github.com/angular/material/blob/0e68c8b9430111c1644339d07ccdf3d7320d4ad7/src/components/dialog/dialog.js#L1075-L1077

The bottom focus trap moves the focus to the md-dialog and the next tab moves the focus to the first focusable element in the dialog (button in this case).

The top focus trap moves the focus to the md-dialog and the next shift+tab moves the focus to the md-dialog. So it just gets stuck there.

[Splaktar]

I've been investigating pulling in _getFirstTabbableElement() and _getLastTabbableElement() from cdk/a11y/focus-trap since we currently have no way of getting the last focusable element in a dialog. However, it means that I have to pull in most all of InteractivityChecker as well.

I can avoid pulling in @angular/cdk/platform, so thankfully the web doesn't expand any further than that.

I've currently got this running and refactored a bit to work as part of $mdUtil, but currently $mdUtil.getLastTabbableElement(element[0]) is always returning null. I'm working on debugging this atm.