[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:
Relates
relates to MGNLUI-2673 Support of ESC and ENTER in dialogs, ... Closed
dependency
depends upon MGNLUI-2876 Form Tabs should be part of the focus... Closed
depends upon MGNLDAM-440 Change FilePreviewComponent and DamUp... Closed
duplicate
duplicates MGNLUI-2619 Tabbing must be scoped to current dialog Closed
duplicates MGNLUI-321 Dialogs: fix focus order and put focu... Closed
duplicates MGNLUI-1781 Dialogs should ensure the Tab key is ... Closed
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 MGNLUI-2619 by Christopher:

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:
http://stackoverflow.com/questions/11351983/how-to-limit-tab-indexes-to-just-an-overlay-and-its-elements
https://github.com/spirytoos/TABGuard/

Generated at Mon Feb 12 08:59:45 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.