[MGNLUI-3547] Fix the tab order in backend forms Created: 04/Sep/15  Updated: 12/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: Epic Priority: Neutral
Reporter: Andreas Weder Assignee: Unassigned
Resolution: Obsolete Votes: 0
Labels: accessibility, usability, ux
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File Good tab order within form.png    
Issue Links:
relation
is related to MGNLUI-1978 As a user field focussing and tabbing... Closed
Template:
Epic Name: AX: tab order in forms
Acceptance criteria:
Empty

 Description   

This epic collects a set of issues describing still existing problems and glitches with the tab order in forms.

We've done some work in fixing the tab order, and it's actually quite good, but it also still fails in several cases, making it hard to work with Magnolia effectively and efficiently. Investing in this improves usability and significantly improves accessibility of our forms.

A good tab order

The purpose of a good, guided tab order is to guide the user from input field to input field and the action buttons at the end. Meta-functions are typically covered using separate keyboard command (e.g. the "full-screen" option of dialogs or text area fields) or are otherwise linked to fields (such as the per-field help texts, which will at one point be linked using ARIA-recommended options).

Mapped to our case, the rules for a good tab order are:

WIthin an input field or container:

  • traverse input fields and buttons from left-to-right, then top-to-bottom

Within a form (see attachment):

  1. traverse the form fields
  2. traverse the action buttons
  3. traverse all tabs

Always leave out:

  • a) meta-functions in the dialog header
  • b) buttons within a form that refer to meta-functions (we already skip those - great)

This is the first set of rules. Once achieved, a tab order may then be further optimized (e.g. traversing the default button before all others).

Note that for modal dialogs, a tab order must also be restrained to work within that dialog only - see MGNLUI-2747.


Generated at Mon Feb 12 09:07:42 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.