Uploaded image for project: 'Magnolia UI'
  1. Magnolia UI
  2. MGNLUI-3547

Fix the tab order in backend forms

XMLWordPrintable

    • AX: tab order in forms

      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.

        Acceptance criteria

              Unassigned Unassigned
              weder Andreas Weder
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

                Created:
                Updated:
                Resolved: