WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Dynamic Dropdown Form Fields

for

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

You should be able to do that. I know it's possible to intercept keystrokes
with JS. As long as the interception can stop the focus path from traveling
long enough for your first few actions to take place. Other possibility is
having an alert that you can move focus to when the focus is lost that says
"please wait" while your other action are taking place. Kind of another
"buying time" mechanism.


-----Original Message-----
From: David Ashleydale [mailto: <EMAIL REMOVED> ]
Sent: Saturday, April 28, 2012 10:28
To: WebAIM Discussion List
Subject: Re: [WebAIM] Dynamic Dropdown Form Fields

I like the way you think, Tony; it's jogging my brain cells. :)

Now I'm wondering if I can use JavaScript to override what the Tab key
normally does and replace it with my own desired behavior in these cases.

Here's what I want to happen when someone is focused on one of these
dropdowns and they hit the Tab key. In this order:

1. Look at the current value of the dropdown that I'm Tabbing away from.
2. Query the database to find the values I want to populate the next
dropdown.
3. Change the next dropdown from having no options to having the desired
options.
4. Enable it.
5. Focus on it.

I haven't tried it, but it seems doable to me.

And I'll have to try Elle's read-only suggestion, too. That might be a lot
simpler, but I think disabling the field makes slightly more semantic sense
than making it read-only.

Thanks!
David

On Sat, Apr 28, 2012 at 8:03 AM, Tony Olivero < <EMAIL REMOVED> > wrote:

> 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