[MGNLUI-2747] Keyboard focus should remain inside a modal dialog Created: 17/Mar/14 Updated: 11/Dec/18 Resolved: 11/Dec/18 |
|
| Status: | Closed |
| Project: | Magnolia UI |
| Component/s: | user interaction |
| Affects Version/s: | 5.4.1 |
| Fix Version/s: | None |
| Type: | Bug | Priority: | Neutral |
| Reporter: | Andreas Weder | Assignee: | Unassigned |
| Resolution: | Obsolete | Votes: | 0 |
| Labels: | accessibility, keyboard, next, usability, ux | ||
| Remaining Estimate: | Not Specified | ||
| Time Spent: | Not Specified | ||
| Original Estimate: | Not Specified | ||
| Issue Links: |
|
||||||||||||||||||||||||||||||||||||
| Template: |
|
||||||||||||||||||||||||||||||||||||
| Acceptance criteria: |
Empty
|
||||||||||||||||||||||||||||||||||||
| Task DoD: |
[ ]*
Doc/release notes changes? Comment present?
[ ]*
Downstream builds green?
[ ]*
Solution information and context easily available?
[ ]*
Tests
[ ]*
FixVersion filled and not yet released
[ ] 
Architecture Decision Record (ADR)
|
||||||||||||||||||||||||||||||||||||
| Bug DoR: |
[ ]*
Steps to reproduce, expected, and actual results filled
[ ]*
Affected version filled
|
||||||||||||||||||||||||||||||||||||
| Epic Link: | AX: tab order in forms | ||||||||||||||||||||||||||||||||||||
| Story Points: | 8 | ||||||||||||||||||||||||||||||||||||
| Description |
|
The tab order in modal dialogs is currently problematic once you're tabbing beyond the first or last element of the dialog. The browser then switches to another element in the UI, which is confusing, since it's supposed to stay inside the modal dialog. The tab order should remain inside a modal dialog. For embedded forms, it can go beyond that. Christopher has already done some research on this. It seems that it's not easy to constrain the tab order inside a closed set of elements without "manual" intervention using JS. Two options we shortly touched in a discussion was to have listeners on the first and the last element in a dialog that react once a user wants to tab beyond the dialog; or to remove or otherwise disable the "tabindex" HTML attribute for all UI elements, which are currently not part of a modal dialog. |
| Comments |
| Comment by Andreas Weder [ 17/Mar/14 ] |
|
Research notes from In a browser, hitting tab tabs through all visible tabbing elements. This does not work in our modal dialogs because the tabbing goes through to the elements in the sub app below the modal area. This is a known html problem. It is necessary to resort to javascript trickery to constrain the tabbing to a specific element. Here are some notes that may be helpful: |