WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Dynamic Dropdown Form Fields

for

Number of posts in this thread: 12 (In chronological order)

From: David Ashleydale
Date: Fri, Apr 27 2012 5:42PM
Subject: Dynamic Dropdown Form Fields
No previous message | Next message →

I don't have an example to show right now, but I'll try to describe the
situation that I would like thoughts on.

Imagine an online form where the first question is a dropdown (select). The
second question is also a dropdown, but when the page first loads, it is
disabled. This is because the options in it are determined dynamically
based on which selection you make in the first dropdown. We tried to set it
up so that after a user makes a selection in the first dropdown, then they
hit the Tab key, the second dropdown would become enabled and populated
with the correct options, and the user would be taken there.

However, the way it ended up working was that when a keyboard-only user
hits Tab after using the up and down arrows to make a selection in the
first dropdown, they skip over the second question and are taken to the
next "tabbable" object further down the page; even though the second
dropdown becomes enabled when the user hits Tab (onblur).

I believe this is because at the time the user hits the Tab key, the second
dropdown is still disabled. It's kind of a simultaneous issue -- two things
are trying to happen at the same time: the browser wants to take the user
to the next tabbable object and the JavaScript is trying to enable the
formerly disabled dropdown. It seems like the browser has already figured
out where it wants to take the user before they've even hit the Tab key, so
it doesn't care that we changed the next thing in its path from disabled to
enabled.

Hopefully I described the situation sufficiently. Otherwise, I may try to
mock something up to show you. But my questions is: what is the best way to
do this in a keyboard accessible way?

Desired functionality: Form with a dropdown that dynamically enables and
adds options to the next dropdown.
Problem: Hitting the Tab key always jumps over the next disabled dropdown,
even though hitting the Tab key enables it.

Thanks!
David Ashleydale

From: Stella Mudd
Date: Fri, Apr 27 2012 6:24PM
Subject: Re: Dynamic Dropdown Form Fields
← Previous message | Next message →

David,

How are you disabling the form field?

Thanks.

Stella

On Friday, April 27, 2012, David Ashleydale wrote:

> I don't have an example to show right now, but I'll try to describe the
> situation that I would like thoughts on.
>
> Imagine an online form where the first question is a dropdown (select). The
> second question is also a dropdown, but when the page first loads, it is
> disabled. This is because the options in it are determined dynamically
> based on which selection you make in the first dropdown. We tried to set it
> up so that after a user makes a selection in the first dropdown, then they
> hit the Tab key, the second dropdown would become enabled and populated
> with the correct options, and the user would be taken there.
>
> However, the way it ended up working was that when a keyboard-only user
> hits Tab after using the up and down arrows to make a selection in the
> first dropdown, they skip over the second question and are taken to the
> next "tabbable" object further down the page; even though the second
> dropdown becomes enabled when the user hits Tab (onblur).
>
> I believe this is because at the time the user hits the Tab key, the second
> dropdown is still disabled. It's kind of a simultaneous issue -- two things
> are trying to happen at the same time: the browser wants to take the user
> to the next tabbable object and the JavaScript is trying to enable the
> formerly disabled dropdown. It seems like the browser has already figured
> out where it wants to take the user before they've even hit the Tab key, so
> it doesn't care that we changed the next thing in its path from disabled to
> enabled.
>
> Hopefully I described the situation sufficiently. Otherwise, I may try to
> mock something up to show you. But my questions is: what is the best way to
> do this in a keyboard accessible way?
>
> Desired functionality: Form with a dropdown that dynamically enables and
> adds options to the next dropdown.
> Problem: Hitting the Tab key always jumps over the next disabled dropdown,
> even though hitting the Tab key enables it.
>
> Thanks!
> David Ashleydale
> > > >

From: Elle
Date: Fri, Apr 27 2012 7:19PM
Subject: Re: Dynamic Dropdown Form Fields
← Previous message | Next message →

David:

I know exactly what you're describing, and your guess as to why it's
skipping the second (dynamically populated) dropdown is a topic we've been
working through as well. The choreographed dance of dynamic changes and
focus path, that's some crunchy stuff! We're in the wireframe stages right
now for a similar progressive disclosure scenario in a form.

The trick is to get it to occur in sequence, not simultaneously, and to
ensure that there's a focus destination as a fallback (perhaps read-only
instead of disabled) for the default state of the dynamic dropdown menu. I
can't remember what steps that we decided on, but I'll ask and send our
solution your way in case it helps.


Cheers,
Elle




On Fri, Apr 27, 2012 at 7:42 PM, David Ashleydale < = EMAIL ADDRESS REMOVED = >wrote:

> I don't have an example to show right now, but I'll try to describe the
> situation that I would like thoughts on.
>
> Imagine an online form where the first question is a dropdown (select). The
> second question is also a dropdown, but when the page first loads, it is
> disabled. This is because the options in it are determined dynamically
> based on which selection you make in the first dropdown. We tried to set it
> up so that after a user makes a selection in the first dropdown, then they
> hit the Tab key, the second dropdown would become enabled and populated
> with the correct options, and the user would be taken there.
>
> However, the way it ended up working was that when a keyboard-only user
> hits Tab after using the up and down arrows to make a selection in the
> first dropdown, they skip over the second question and are taken to the
> next "tabbable" object further down the page; even though the second
> dropdown becomes enabled when the user hits Tab (onblur).
>
> I believe this is because at the time the user hits the Tab key, the second
> dropdown is still disabled. It's kind of a simultaneous issue -- two things
> are trying to happen at the same time: the browser wants to take the user
> to the next tabbable object and the JavaScript is trying to enable the
> formerly disabled dropdown. It seems like the browser has already figured
> out where it wants to take the user before they've even hit the Tab key, so
> it doesn't care that we changed the next thing in its path from disabled to
> enabled.
>
> Hopefully I described the situation sufficiently. Otherwise, I may try to
> mock something up to show you. But my questions is: what is the best way to
> do this in a keyboard accessible way?
>
> Desired functionality: Form with a dropdown that dynamically enables and
> adds options to the next dropdown.
> Problem: Hitting the Tab key always jumps over the next disabled dropdown,
> even though hitting the Tab key enables it.
>
> Thanks!
> David Ashleydale
> > > >



--
If you want to build a ship, don't drum up the people to gather wood,
divide the work, and give orders. Instead, teach them to yearn for the vast
and endless sea.
- Antoine De Saint-Exupéry, The Little Prince

From: Birkir R. Gunnarsson
Date: Fri, Apr 27 2012 9:00PM
Subject: Re: Dynamic Dropdown Form Fields
← Previous message | Next message →

If you don't mind Elle, please share your solution with the rest of the list.
What about placing a button after the first dropdown link saying
(confirm selection). Once user clicks on it it will first populat the
next field, then move user focus to it (may be a bit clumsy, but it
could get the job done I suppose)?


On 4/28/12, Elle < = EMAIL ADDRESS REMOVED = > wrote:
> David:
>
> I know exactly what you're describing, and your guess as to why it's
> skipping the second (dynamically populated) dropdown is a topic we've been
> working through as well. The choreographed dance of dynamic changes and
> focus path, that's some crunchy stuff! We're in the wireframe stages right
> now for a similar progressive disclosure scenario in a form.
>
> The trick is to get it to occur in sequence, not simultaneously, and to
> ensure that there's a focus destination as a fallback (perhaps read-only
> instead of disabled) for the default state of the dynamic dropdown menu. I
> can't remember what steps that we decided on, but I'll ask and send our
> solution your way in case it helps.
>
>
> Cheers,
> Elle
>
>
>
>
> On Fri, Apr 27, 2012 at 7:42 PM, David Ashleydale
> < = EMAIL ADDRESS REMOVED = >wrote:
>
>> I don't have an example to show right now, but I'll try to describe the
>> situation that I would like thoughts on.
>>
>> Imagine an online form where the first question is a dropdown (select).
>> The
>> second question is also a dropdown, but when the page first loads, it is
>> disabled. This is because the options in it are determined dynamically
>> based on which selection you make in the first dropdown. We tried to set
>> it
>> up so that after a user makes a selection in the first dropdown, then
>> they
>> hit the Tab key, the second dropdown would become enabled and populated
>> with the correct options, and the user would be taken there.
>>
>> However, the way it ended up working was that when a keyboard-only user
>> hits Tab after using the up and down arrows to make a selection in the
>> first dropdown, they skip over the second question and are taken to the
>> next "tabbable" object further down the page; even though the second
>> dropdown becomes enabled when the user hits Tab (onblur).
>>
>> I believe this is because at the time the user hits the Tab key, the
>> second
>> dropdown is still disabled. It's kind of a simultaneous issue -- two
>> things
>> are trying to happen at the same time: the browser wants to take the user
>> to the next tabbable object and the JavaScript is trying to enable the
>> formerly disabled dropdown. It seems like the browser has already figured
>> out where it wants to take the user before they've even hit the Tab key,
>> so
>> it doesn't care that we changed the next thing in its path from disabled
>> to
>> enabled.
>>
>> Hopefully I described the situation sufficiently. Otherwise, I may try to
>> mock something up to show you. But my questions is: what is the best way
>> to
>> do this in a keyboard accessible way?
>>
>> Desired functionality: Form with a dropdown that dynamically enables and
>> adds options to the next dropdown.
>> Problem: Hitting the Tab key always jumps over the next disabled
>> dropdown,
>> even though hitting the Tab key enables it.
>>
>> Thanks!
>> David Ashleydale
>> >> >> >>
>
>
>
> --
> If you want to build a ship, don't drum up the people to gather wood,
> divide the work, and give orders. Instead, teach them to yearn for the vast
> and endless sea.
> - Antoine De Saint-Exupéry, The Little Prince
> > > >

From: David Ashleydale
Date: Fri, Apr 27 2012 9:46PM
Subject: Re: Dynamic Dropdown Form Fields
← Previous message | Next message →

I think the dropdown is just disabled using disabled="disabled".

On Friday, April 27, 2012, Stella Mudd wrote:

> David,
>
> How are you disabling the form field?
>
> Thanks.
>
> Stella
>
> On Friday, April 27, 2012, David Ashleydale wrote:
>
> > I don't have an example to show right now, but I'll try to describe the
> > situation that I would like thoughts on.
> >
> > Imagine an online form where the first question is a dropdown (select).
> The
> > second question is also a dropdown, but when the page first loads, it is
> > disabled. This is because the options in it are determined dynamically
> > based on which selection you make in the first dropdown. We tried to set
> it
> > up so that after a user makes a selection in the first dropdown, then
> they
> > hit the Tab key, the second dropdown would become enabled and populated
> > with the correct options, and the user would be taken there.
> >
> > However, the way it ended up working was that when a keyboard-only user
> > hits Tab after using the up and down arrows to make a selection in the
> > first dropdown, they skip over the second question and are taken to the
> > next "tabbable" object further down the page; even though the second
> > dropdown becomes enabled when the user hits Tab (onblur).
> >
> > I believe this is because at the time the user hits the Tab key, the
> second
> > dropdown is still disabled. It's kind of a simultaneous issue -- two
> things
> > are trying to happen at the same time: the browser wants to take the user
> > to the next tabbable object and the JavaScript is trying to enable the
> > formerly disabled dropdown. It seems like the browser has already figured
> > out where it wants to take the user before they've even hit the Tab key,
> so
> > it doesn't care that we changed the next thing in its path from disabled
> to
> > enabled.
> >
> > Hopefully I described the situation sufficiently. Otherwise, I may try to
> > mock something up to show you. But my questions is: what is the best way
> to
> > do this in a keyboard accessible way?
> >
> > Desired functionality: Form with a dropdown that dynamically enables and
> > adds options to the next dropdown.
> > Problem: Hitting the Tab key always jumps over the next disabled
> dropdown,
> > even though hitting the Tab key enables it.
> >
> > Thanks!
> > David Ashleydale
> > > > > > > >
> > > >

From: Elle
Date: Fri, Apr 27 2012 9:57PM
Subject: Re: Dynamic Dropdown Form Fields
← Previous message | Next message →

David:

If it's disabled, it won't receive focus, as it's not in the tab order.
However, if it's read-only, it will. I don't believe that's the total
solution, but it's a start.



Thanks,
Elle




On Fri, Apr 27, 2012 at 11:46 PM, David Ashleydale < = EMAIL ADDRESS REMOVED = >wrote:

> I think the dropdown is just disabled using disabled="disabled".
>
> On Friday, April 27, 2012, Stella Mudd wrote:
>
> > David,
> >
> > How are you disabling the form field?
> >
> > Thanks.
> >
> > Stella
> >
> > On Friday, April 27, 2012, David Ashleydale wrote:
> >
> > > I don't have an example to show right now, but I'll try to describe the
> > > situation that I would like thoughts on.
> > >
> > > Imagine an online form where the first question is a dropdown (select).
> > The
> > > second question is also a dropdown, but when the page first loads, it
> is
> > > disabled. This is because the options in it are determined dynamically
> > > based on which selection you make in the first dropdown. We tried to
> set
> > it
> > > up so that after a user makes a selection in the first dropdown, then
> > they
> > > hit the Tab key, the second dropdown would become enabled and populated
> > > with the correct options, and the user would be taken there.
> > >
> > > However, the way it ended up working was that when a keyboard-only user
> > > hits Tab after using the up and down arrows to make a selection in the
> > > first dropdown, they skip over the second question and are taken to the
> > > next "tabbable" object further down the page; even though the second
> > > dropdown becomes enabled when the user hits Tab (onblur).
> > >
> > > I believe this is because at the time the user hits the Tab key, the
> > second
> > > dropdown is still disabled. It's kind of a simultaneous issue -- two
> > things
> > > are trying to happen at the same time: the browser wants to take the
> user
> > > to the next tabbable object and the JavaScript is trying to enable the
> > > formerly disabled dropdown. It seems like the browser has already
> figured
> > > out where it wants to take the user before they've even hit the Tab
> key,
> > so
> > > it doesn't care that we changed the next thing in its path from
> disabled
> > to
> > > enabled.
> > >
> > > Hopefully I described the situation sufficiently. Otherwise, I may try
> to
> > > mock something up to show you. But my questions is: what is the best
> way
> > to
> > > do this in a keyboard accessible way?
> > >
> > > Desired functionality: Form with a dropdown that dynamically enables
> and
> > > adds options to the next dropdown.
> > > Problem: Hitting the Tab key always jumps over the next disabled
> > dropdown,
> > > even though hitting the Tab key enables it.
> > >
> > > Thanks!
> > > David Ashleydale
> > > > > > > > > > > >
> > > > > > > >
> > > >



--
If you want to build a ship, don't drum up the people to gather wood,
divide the work, and give orders. Instead, teach them to yearn for the vast
and endless sea.
- Antoine De Saint-Exupéry, The Little Prince

From: David Ashleydale
Date: Fri, Apr 27 2012 9:58PM
Subject: Re: Dynamic Dropdown Form Fields
← Previous message | Next message →

Birkir, I had suggested a solution like that -- putting a button after the
dropdown -- but there are actually a few of these questions at the
beginning of the form. The design team felt that it would be too cumbersome
to make users select then click a button 3 times in a row -- select, click,
select, click, select, click. And for keyboard users it would be: tab,
arrows, tab, enter (times 3).

And, Elle, that's kind of along the lines of what I was thinking. I'm
wondering if there's a way to get the browser to realize that there's a new
element in the tab order right after the Tab key is clicked. Like, maybe we
could force it to pause for 50 microseconds or something. :)

David

On Friday, April 27, 2012, Birkir R. Gunnarsson wrote:

> If you don't mind Elle, please share your solution with the rest of the
> list.
> What about placing a button after the first dropdown link saying
> (confirm selection). Once user clicks on it it will first populat the
> next field, then move user focus to it (may be a bit clumsy, but it
> could get the job done I suppose)?
>
>
> On 4/28/12, Elle < = EMAIL ADDRESS REMOVED = > wrote:
> > David:
> >
> > I know exactly what you're describing, and your guess as to why it's
> > skipping the second (dynamically populated) dropdown is a topic we've
> been
> > working through as well. The choreographed dance of dynamic changes and
> > focus path, that's some crunchy stuff! We're in the wireframe stages
> right
> > now for a similar progressive disclosure scenario in a form.
> >
> > The trick is to get it to occur in sequence, not simultaneously, and to
> > ensure that there's a focus destination as a fallback (perhaps read-only
> > instead of disabled) for the default state of the dynamic dropdown menu.
> I
> > can't remember what steps that we decided on, but I'll ask and send our
> > solution your way in case it helps.
> >
> >
> > Cheers,
> > Elle
> >
> >
> >
> >
> > On Fri, Apr 27, 2012 at 7:42 PM, David Ashleydale
> > < = EMAIL ADDRESS REMOVED = >wrote:
> >
> >> I don't have an example to show right now, but I'll try to describe the
> >> situation that I would like thoughts on.
> >>
> >> Imagine an online form where the first question is a dropdown (select).
> >> The
> >> second question is also a dropdown, but when the page first loads, it is
> >> disabled. This is because the options in it are determined dynamically
> >> based on which selection you make in the first dropdown. We tried to set
> >> it
> >> up so that after a user makes a selection in the first dropdown, then
> >> they
> >> hit the Tab key, the second dropdown would become enabled and populated
> >> with the correct options, and the user would be taken there.
> >>
> >> However, the way it ended up working was that when a keyboard-only user
> >> hits Tab after using the up and down arrows to make a selection in the
> >> first dropdown, they skip over the second question and are taken to the
> >> next "tabbable" object further down the page; even though the second
> >> dropdown becomes enabled when the user hits Tab (onblur).
> >>
> >> I believe this is because at the time the user hits the Tab key, the
> >> second
> >> dropdown is still disabled. It's kind of a simultaneous issue -- two
> >> things
> >> are trying to happen at the same time: the browser wants to take the
> user
> >> to the next tabbable object and the JavaScript is trying to enable the
> >> formerly disabled dropdown. It seems like the browser has already
> figured
> >> out where it wants to take the user before they've even hit the Tab key,
> >> so
> >> it doesn't care that we changed the next thing in its path from disabled
> >> to
> >> enabled.
> >>
> >> Hopefully I described the situation sufficiently. Otherwise, I may try
> to
> >> mock something up to show you. But my questions is: what is the best way
> >> to
> >> do this in a keyboard accessible way?
> >>
> >> Desired functionality: Form with a dropdown that dynamically enables and
> >> adds options to the next dropdown.
> >> Problem: Hitting the Tab key always jumps over the next disabled
> >> dropdown,
> >> even though hitting the Tab key enables it.
> >>
> >> Thanks!
> >> David Ashleydale
> >> > >> > >> > >>
> >
> >
> >
> > --
> > If you want to build a ship, don't drum up the people to gather wood,
> > divide the work, and give orders. Instead, teach them to yearn for the
> vast
> > and endless sea.
> > - Antoine De Saint-Exupéry, The Little Prince
> > > > > > > >
> > > Address

From: Tony Olivero
Date: Sat, Apr 28 2012 9:03AM
Subject: Re: Dynamic Dropdown Form Fields
← Previous message | Next message →

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

-----Original Message-----
From: David Ashleydale [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Friday, April 27, 2012 22:58
To: WebAIM Discussion List
Subject: Re: [WebAIM] Dynamic Dropdown Form Fields

Birkir, I had suggested a solution like that -- putting a button after the
dropdown -- but there are actually a few of these questions at the
beginning of the form. The design team felt that it would be too cumbersome
to make users select then click a button 3 times in a row -- select, click,
select, click, select, click. And for keyboard users it would be: tab,
arrows, tab, enter (times 3).

And, Elle, that's kind of along the lines of what I was thinking. I'm
wondering if there's a way to get the browser to realize that there's a new
element in the tab order right after the Tab key is clicked. Like, maybe we
could force it to pause for 50 microseconds or something. :)

David

On Friday, April 27, 2012, Birkir R. Gunnarsson wrote:

> If you don't mind Elle, please share your solution with the rest of the
> list.
> What about placing a button after the first dropdown link saying
> (confirm selection). Once user clicks on it it will first populat the
> next field, then move user focus to it (may be a bit clumsy, but it
> could get the job done I suppose)?
>
>
> On 4/28/12, Elle < = EMAIL ADDRESS REMOVED = > wrote:
> > David:
> >
> > I know exactly what you're describing, and your guess as to why it's
> > skipping the second (dynamically populated) dropdown is a topic we've
> been
> > working through as well. The choreographed dance of dynamic changes and
> > focus path, that's some crunchy stuff! We're in the wireframe stages
> right
> > now for a similar progressive disclosure scenario in a form.
> >
> > The trick is to get it to occur in sequence, not simultaneously, and to
> > ensure that there's a focus destination as a fallback (perhaps read-only
> > instead of disabled) for the default state of the dynamic dropdown menu.
> I
> > can't remember what steps that we decided on, but I'll ask and send our
> > solution your way in case it helps.
> >
> >
> > Cheers,
> > Elle
> >
> >
> >
> >
> > On Fri, Apr 27, 2012 at 7:42 PM, David Ashleydale
> > < = EMAIL ADDRESS REMOVED = >wrote:
> >
> >> I don't have an example to show right now, but I'll try to describe the
> >> situation that I would like thoughts on.
> >>
> >> Imagine an online form where the first question is a dropdown (select).
> >> The
> >> second question is also a dropdown, but when the page first loads, it
is
> >> disabled. This is because the options in it are determined dynamically
> >> based on which selection you make in the first dropdown. We tried to
set
> >> it
> >> up so that after a user makes a selection in the first dropdown, then
> >> they
> >> hit the Tab key, the second dropdown would become enabled and populated
> >> with the correct options, and the user would be taken there.
> >>
> >> However, the way it ended up working was that when a keyboard-only user
> >> hits Tab after using the up and down arrows to make a selection in the
> >> first dropdown, they skip over the second question and are taken to the
> >> next "tabbable" object further down the page; even though the second
> >> dropdown becomes enabled when the user hits Tab (onblur).
> >>
> >> I believe this is because at the time the user hits the Tab key, the
> >> second
> >> dropdown is still disabled. It's kind of a simultaneous issue -- two
> >> things
> >> are trying to happen at the same time: the browser wants to take the
> user
> >> to the next tabbable object and the JavaScript is trying to enable the
> >> formerly disabled dropdown. It seems like the browser has already
> figured
> >> out where it wants to take the user before they've even hit the Tab
key,
> >> so
> >> it doesn't care that we changed the next thing in its path from
disabled
> >> to
> >> enabled.
> >>
> >> Hopefully I described the situation sufficiently. Otherwise, I may try
> to
> >> mock something up to show you. But my questions is: what is the best
way
> >> to
> >> do this in a keyboard accessible way?
> >>
> >> Desired functionality: Form with a dropdown that dynamically enables
and
> >> adds options to the next dropdown.
> >> Problem: Hitting the Tab key always jumps over the next disabled
> >> dropdown,
> >> even though hitting the Tab key enables it.
> >>
> >> Thanks!
> >> David Ashleydale
> >> > >> > >> > >>
> >
> >
> >
> > --
> > If you want to build a ship, don't drum up the people to gather wood,
> > divide the work, and give orders. Instead, teach them to yearn for the
> vast
> > and endless sea.
> > - Antoine De Saint-Exupéry, The Little Prince
> > > > > > > >
> > > Address

From: David Ashleydale
Date: Sat, Apr 28 2012 9:27AM
Subject: Re: Dynamic Dropdown Form Fields
← Previous message | Next message →

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

From: Tony Olivero
Date: Sat, Apr 28 2012 9:48AM
Subject: Re: Dynamic Dropdown Form Fields
← Previous message | Next message →

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

From: Stella Mudd
Date: Sun, Apr 29 2012 2:24AM
Subject: Re: Dynamic Dropdown Form Fields
← Previous message | Next message →

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

From: Stella Mudd
Date: Mon, Apr 30 2012 12:13PM
Subject: Re: Dynamic Dropdown Form Fields
← Previous message | No next message

Whoops... forgot to add support for Mobile. Should work now.

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

Question for Screen Reader users, how does jsfiddle.net work out for you?
Should we be using another service to show HTML examples? Does such as
service with accessibility support need to be made? Either way, if you
have time let us know. Thanks!!

-Stella

On Sun, Apr 29, 2012 at 1:24 AM, Stella Mudd < = EMAIL ADDRESS REMOVED = > wrote:

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