This repository was archived by the owner on Sep 5, 2024. It is now read-only.
Repository navigation
This repository was archived by the owner on Sep 5, 2024. It is now read-only.
dialog: shift+tab doesn't loop properly after it reaches the beginning #10963
Description
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.
Activity
EladBezalel commentedon Nov 27, 2017
@Splaktar do you mind taking a look at that?
[-]shift+tab doesn't work properly when md-dialog opens.[/-][+]shift+tab doesn't loop properly after it reaches the beginning in a dialog[/+]Splaktar commentedon Nov 29, 2017
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.
21 remaining items
Splaktar commentedon Dec 15, 2020
We have the above structure with top and bottom focus traps.
Our logic for "redirecting" the focus is flawed:
material/src/components/dialog/dialog.js
Lines 1075 to 1077 in 0e68c8b
The bottom focus trap moves the focus to the
md-dialogand 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-dialogand the next shift+tab moves the focus to themd-dialog. So it just gets stuck there.Splaktar commentedon Dec 15, 2020
I've been investigating pulling in
_getFirstTabbableElement()and_getLastTabbableElement()fromcdk/a11y/focus-trapsince 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 returningnull. I'm working on debugging this atm.fix(dialog): shift+tab does not cycle through tabbable elements
fix(dialog): shift+tab does not cycle through tabbable elements
fix(dialog): shift+tab does not cycle through tabbable elements
fix(dialog): shift+tab does not cycle through tabbable elements