Tabindex and focus order in forms containing complex controls

classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|

Tabindex and focus order in forms containing complex controls

Dietrich Streifert
Hello everybody,

I'm currently struggling with the focus order when using the tab key
within complex forms.

The form contains not only simple form widgets (text, button) but also
more complex controls which have more then one tab able (focusable)
widget. This are e.g. containers having a radio button and a text field
or radio button groups with multiple radio buttons.

In such a complex widget the ideal behaviour would be that on pressing
the tab key the first sub widget should gain focus and then the second
sub widget. On next tab key press the focus should go to the next widget
outside the complex one (the container).

My forms are based on qx.ui.form.Form and qx.ui.form.AbstractRenderer
and similar to the qx.ui.form.renderer.Double which renders the widgets
in two (or more) columns.

Now I want to change the widget position tab order and have the focus
jump in the first column top down and then in the second column top down.

I've created a playground example (modified widget browser example)
where I'm trying to set the tab index of the widgets (at the bottom of
the code):

http://tinyurl.com/cq8uln9

Setting the focus into the name field the tab order should be top down
in the left column and after the gender radio button group the focus
should continue to the password field.

But after the Age field, the focus jumps to the password field.

I think this does not work because I have to set the tabindex not to the
radio group, but to each single radio button within the group.

In the example this would be simple, but what about more complex widgets
with multiple focusable subwidgets? Do I have to (manually) iterate
through all subwidgets or child controls and assign a tabindex to them?

Or is there something like setting the current tab/focus scope to a
container where the focus order is calculated based only on the
focusable widgets within this container?

Any hints/informations would be great.

Thank you.

Regards.
Dietrich






------------------------------------------------------------------------------
Live Security Virtual Conference
Exclusive live event will cover all the ways today's security and
threat landscape has changed and how IT managers can respond. Discussions
will include endpoint security, mobile security and the latest in malware
threats. http://www.accelacomm.com/jaw/sfrnl04242012/114/50122263/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Tabindex and focus order in forms containing complex controls

Jim Hunter
I wonder if this is why my tabs don't work? All of the controls on my page are custom controls. I have edit controls, but they are contained inside of a container control that also contains a label and one or two other controls. When the edit control has focus, and the tab key is pressed, focus jumps completely out of my 'sequence' to a button on a different container that doesn't even have a TabIndex set. I don't use the qx.ui.form.Form to render the controls because my controls have to be placed in exact locations, I can't leave the placement up to program control.

Any thoughts?

Jim


On Fri, Jul 20, 2012 at 1:33 AM, Dietrich Streifert <[hidden email]> wrote:
Hello everybody,

I'm currently struggling with the focus order when using the tab key
within complex forms.

The form contains not only simple form widgets (text, button) but also
more complex controls which have more then one tab able (focusable)
widget. This are e.g. containers having a radio button and a text field
or radio button groups with multiple radio buttons.

In such a complex widget the ideal behaviour would be that on pressing
the tab key the first sub widget should gain focus and then the second
sub widget. On next tab key press the focus should go to the next widget
outside the complex one (the container).

My forms are based on qx.ui.form.Form and qx.ui.form.AbstractRenderer
and similar to the qx.ui.form.renderer.Double which renders the widgets
in two (or more) columns.

Now I want to change the widget position tab order and have the focus
jump in the first column top down and then in the second column top down.

I've created a playground example (modified widget browser example)
where I'm trying to set the tab index of the widgets (at the bottom of
the code):

http://tinyurl.com/cq8uln9

Setting the focus into the name field the tab order should be top down
in the left column and after the gender radio button group the focus
should continue to the password field.

But after the Age field, the focus jumps to the password field.

I think this does not work because I have to set the tabindex not to the
radio group, but to each single radio button within the group.

In the example this would be simple, but what about more complex widgets
with multiple focusable subwidgets? Do I have to (manually) iterate
through all subwidgets or child controls and assign a tabindex to them?

Or is there something like setting the current tab/focus scope to a
container where the focus order is calculated based only on the
focusable widgets within this container?

Any hints/informations would be great.

Thank you.

Regards.
Dietrich






------------------------------------------------------------------------------
Live Security Virtual Conference
Exclusive live event will cover all the ways today's security and
threat landscape has changed and how IT managers can respond. Discussions
will include endpoint security, mobile security and the latest in malware
threats. http://www.accelacomm.com/jaw/sfrnl04242012/114/50122263/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel


------------------------------------------------------------------------------
LogMeIn Rescue: Anywhere, Anytime Remote support for IT. Free Trial
Remotely access PCs and mobile devices and provide instant support
Improve your efficiency, and focus on delivering more value-add services
Discover what IT Professionals Know. Rescue delivers
http://p.sf.net/sfu/logmein_12329d2d
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Tabindex and focus order in forms containing complex controls

MartinWittemann
Administrator
Hey,
I just checked the sample initially posted by Dietrich. The sample shows, I don't know if its really a bug or not, but it shows a unexpected behavior. You are setting the tabIndex on the RadioButtonGroup which does not forward the tabinxed to its children. The question is, should we set the tab index to all children or only the selected? Anyway, that could be worth a bug report. ;)
As a workaround you could set the tabIndex for the children manually.
Regards,
Martin


Am 11.12.2012 um 20:31 schrieb Jim Hunter <[hidden email]>:

I wonder if this is why my tabs don't work? All of the controls on my page are custom controls. I have edit controls, but they are contained inside of a container control that also contains a label and one or two other controls. When the edit control has focus, and the tab key is pressed, focus jumps completely out of my 'sequence' to a button on a different container that doesn't even have a TabIndex set. I don't use the qx.ui.form.Form to render the controls because my controls have to be placed in exact locations, I can't leave the placement up to program control.

Any thoughts?

Jim


On Fri, Jul 20, 2012 at 1:33 AM, Dietrich Streifert <[hidden email]> wrote:
Hello everybody,

I'm currently struggling with the focus order when using the tab key
within complex forms.

The form contains not only simple form widgets (text, button) but also
more complex controls which have more then one tab able (focusable)
widget. This are e.g. containers having a radio button and a text field
or radio button groups with multiple radio buttons.

In such a complex widget the ideal behaviour would be that on pressing
the tab key the first sub widget should gain focus and then the second
sub widget. On next tab key press the focus should go to the next widget
outside the complex one (the container).

My forms are based on qx.ui.form.Form and qx.ui.form.AbstractRenderer
and similar to the qx.ui.form.renderer.Double which renders the widgets
in two (or more) columns.

Now I want to change the widget position tab order and have the focus
jump in the first column top down and then in the second column top down.

I've created a playground example (modified widget browser example)
where I'm trying to set the tab index of the widgets (at the bottom of
the code):

http://tinyurl.com/cq8uln9

Setting the focus into the name field the tab order should be top down
in the left column and after the gender radio button group the focus
should continue to the password field.

But after the Age field, the focus jumps to the password field.

I think this does not work because I have to set the tabindex not to the
radio group, but to each single radio button within the group.

In the example this would be simple, but what about more complex widgets
with multiple focusable subwidgets? Do I have to (manually) iterate
through all subwidgets or child controls and assign a tabindex to them?

Or is there something like setting the current tab/focus scope to a
container where the focus order is calculated based only on the
focusable widgets within this container?

Any hints/informations would be great.

Thank you.

Regards.
Dietrich






------------------------------------------------------------------------------
Live Security Virtual Conference
Exclusive live event will cover all the ways today's security and
threat landscape has changed and how IT managers can respond. Discussions
will include endpoint security, mobile security and the latest in malware
threats. http://www.accelacomm.com/jaw/sfrnl04242012/114/50122263/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

------------------------------------------------------------------------------
LogMeIn Rescue: Anywhere, Anytime Remote support for IT. Free Trial
Remotely access PCs and mobile devices and provide instant support
Improve your efficiency, and focus on delivering more value-add services
Discover what IT Professionals Know. Rescue delivers
http://p.sf.net/sfu/logmein_12329d2d_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel


------------------------------------------------------------------------------
LogMeIn Rescue: Anywhere, Anytime Remote support for IT. Free Trial
Remotely access PCs and mobile devices and provide instant support
Improve your efficiency, and focus on delivering more value-add services
Discover what IT Professionals Know. Rescue delivers
http://p.sf.net/sfu/logmein_12329d2d
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Tabindex and focus order in forms containing complex controls

Dietrich Streifert
Hello everybody!

My solution was to have a singleton tabindex counter for each form (within a window) which I use to manually set the tabindex to each form widget. As I'm adding the form widgets the same order the tabindex should work this fits my needs.

Regards
Dietrich

Am 12.12.2012 08:33, schrieb Martin Wittemann:
Hey,
I just checked the sample initially posted by Dietrich. The sample shows, I don't know if its really a bug or not, but it shows a unexpected behavior. You are setting the tabIndex on the RadioButtonGroup which does not forward the tabinxed to its children. The question is, should we set the tab index to all children or only the selected? Anyway, that could be worth a bug report. ;)
As a workaround you could set the tabIndex for the children manually.
Regards,
Martin




------------------------------------------------------------------------------
LogMeIn Rescue: Anywhere, Anytime Remote support for IT. Free Trial
Remotely access PCs and mobile devices and provide instant support
Improve your efficiency, and focus on delivering more value-add services
Discover what IT Professionals Know. Rescue delivers
http://p.sf.net/sfu/logmein_12329d2d
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel