WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Dynamic Dropdown Form Fields

for

From: Stella Mudd
Date: Apr 29, 2012 2:24AM


David,

To get focus to a disabled select after it was enabled from selecting an
appropriate option from the preceding select, and then pressing TAB, I
think you are looking for something like the following:

http://jsfiddle.net/stellamudd/wud7J/

Yes/no?

As Elle pointed out, disabled inputs have some usability concerns. It
helps for visual users if the disabled input has some help text and for
screen reader users if the dropdown that activates the disabled dropdown is
required and proper required notification is given. Then, you have less of
a chance of the following dropdown being missed by screen reader users.
However, there could be a chance your users will not do what you are
expecting, i.e. pressing TAB after a particular form field, which you may
want to consider.

Hope this helps.

- Stella


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

> 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
> > > >
> > > >