WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Dynamic Dropdown Form Fields

for

From: Tony Olivero
Date: Apr 28, 2012 9:03AM

David, Elle:

I've done some similar things on a project in the past. It's a little
jankety, I admit, but it worked (at least for that project). Basically,
create a cvariable that gets assigned a number whenever focus moves off the
first element, put a handler on the element that gets focus in the tab order
next, and if the variable is one, bounce focus back to the field that is
"supposed" to have focus. This solved the issue of simulating a "pause" for
the second field to be inserted into the dom. Once the second field has
focus, you reset the check variable to 0 and the next time the link, or
whatever was the focused element following the initial select has focus,
it's kept because you're not telling it to bounce back off.

Actually, the more I think about it, I used this technique when dynamically
inserting errors and focusing the user on the error text, but the concept is
the same and should work for you.

This may be horrible JS, and possibly people smarter than me will tell you
to run far and fast from my solution, but I thought I'd throw it out there
for consideration.

Tony