PDA

View Full Version : Tab within Trigger widget for accessibly



miroperez
14 Jul 2015, 8:12 AM
I'm looking into the feasibility of when I have an extension of Ext.form.field.Trigger, to change the behaviour a little so that when the cursor is in the input and I hit tab the focus goes to the trigger to allow for someone hitting something like spacebar to trigger the onTriggerClick. In our case the handler will invoke a modal dialog with other input capabilities and write back the results to the trigger field.

I've been able to do something like this here:

https://fiddle.sencha.com/#fiddle/qen

but I eventually want to also do this same thing in a Property Grid but haven't had much success yet (see commented code at bottom). When I tab something overrides my code and moves to the next property field. A couple of questions:

1) Is there some key combo I'm missing that's already builtin which does this type of thing?
2) Is this going too granular with keyboard accessibility?

Thank,
Miro

Gary Schlosberg
14 Jul 2015, 11:14 AM
It sounds like the property grid is grabbing the event before the combo can get it. I don't know of a built in functionality for this. As far as granularity, I suppose it would depend upon your client/employer requirements.

skirtle
17 Jul 2015, 6:57 PM
If you stop propagation then the focus moves to the trigger in the property grid. The problem is you then can't tab to the next field.

You might be able to get that to work with a keydown handler on the trigger. If the user presses tab you could shift the focus back to the main field input just before the real tab occurs. You'd then need some way to prevent focus going straight back to the trigger in your specialkey listener. Fiddly but I think it would work.

Personally I try to avoid having triggers tabbable, users tend to expect tab to take them to the next field. In general, ARIA requirements usually have tab move between widgets, not within a widget (where I leave the definition of a widget intentional vague). Activating the trigger by pressing Enter or Down Arrow might provide an alternative in this case.