Tabbing order with dynamic panels and boxes

advanced-prototyping
#1

I am looking for assistance on trying to get the tabbing order working on prototypes. In some cases on a simple page i can get it to work with the inverted order i have read about. On my current prototype I am not able to do this. I also have some hidden boxes that layer in that I can not get the tabbing order to work once they layer in. My Team would greatly appreciate some assistance to get these working. The log in page should be a simple order issue which we all cannot get to work. The welcome page is really where my issue lies.https://cnmsrr.axshare.com

#2

It’s not clear what the tab order should be in your example prototype. Also not clear what you mean by “layer in” …but hidden widgets can’t receive focus so can never be “tabbed to” --perhaps you mean they don’t get focus in the correct order when shown? Also note that dynamic panel widgets cannot receive focus, but widgets inside them can receive focus.

Furthermore, if the last widget (first in the Outline list) has focus and the Tab key is pressed, focus will change to the browser chrome (e.g., URL field, info, tabs, etc. depending on browser make) and several more Tab presses would be required to return focus to a widget in your prototype. (It used to be if you set a Lost Focus event on the last focusable widget and assigned action of “Focus myFirstWidget” it would override this, keeping focus on your prototype content. In the current version of Google Chrome browser and Firefox, at least on Win10 this is no longer the case–focus always seems to shift to the browser chrome. I don’t know if it is a browser thing or an Axure thing.)

I’d say the field titles in your prototype should not get focus …which they shouldn’t unless you assigned a Focused Style and/or they have a Focus event set or are clickable.

If you post your .rp file it would be much easier to see what is going on, your intent, and how it might be fixed.

In the meantime, here is a demo showing a few text fields, checkboxes, and a button.
Tab-Focus Order.rp (230.9 KB)

On Page 1, I placed two text fields, two checkboxes, and a button–all of which can receive focus. Tab order is straightforward. The checkboxes show some child widgets “hidden” in various ways:

  • Option 1 : shows two hidden radio buttons
  • Option 2 : shows 3 widgets in a dynamic panel, by changing states
    • checkbox
    • droplist
    • shape icon (not focusable)

I noticed a few things, in addition to the focus “escaping the prototype” issue --Maybe something here is root of your issues?

  • Showing hidden focusable widgets doesn’t change tab order–it works logically.
  • Focusable widgets inside a dynamic panel receive tab focus in the order they occur–it works logically.
  • If radio button widgets are in a selection group, only the selected radio button receives focus.
    • Once the tab order is within this “radio group” navigation is done via the Left, Right, Up and Down arrow keys on a keyboard.
    • Because they are (standard HTML) single-select radio button widgets, navigating to a radio button widget via keyboard will select it.
  • If you have widgets in a selection group which are not radio buttons, each widget can receive focus via the Tab key.
    The checkboxes show some child widgets “hidden” in various ways:
  • Option 1 : shows two hidden radio buttons
  • Option 2 : shows 3 radio buttons in a dynamic panel state
  • Option 3 : shows 2 text fields in a dynamic panel state

Page 2 shows similar arrangement. Option 3 checkbox shows that individual widgets (two droplists) inside a dynamic panel which can be tabbed to normally.

Page 3 demonstrates the “radio button selection group” behavior, and a workaround if you need each radio button to be Tab-focused–basically build your own radio buttons from images or shapes/icons.