WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [eslint] [react] onchange issue in new browsers

for

From: Mallory
Date: Apr 2, 2017 9:12AM

Additional information for devs in general:
it does depend on the browser whether up/down arrows trigger the
onchange. IE is definitely one of those browsers.

Firefox waits until the user blurs off and then only IF the selected
value is different than it was. Neither IE nor Firefox show all the
options at once (unless you the dev change it by setting the size to
equal the number of options on keyboard focus, then set back to 1 on
blur).

Blink and I thought webkit can show users the little popup box first,
but only if they hit the special keys (I thought ctrl+enter). Otherwise
the select stays closed showing only 1 option at a time like FF and IE.
However when closed, acts like FF (arrows don't call onchange but
blurring with different value does). If the little popup is open,
hitting Enter on that value makes it the new selected value.

I'm curious what Edge does.

Because my previous job had dropdowns who refreshed the whole page
(product filters), and I was not allowed to add a dedicated button to
the select, I rewrote onchange to wait for blurs and enter keys and
expanded the visible options using the size attribute, mostly because
trying to use the pages with IE was impossible and frustrating.

cheers,
_mallory

On Fri, Mar 31, 2017, at 03:53 PM, Graham Armfield wrote:
> Hi Birkir,
>
> Scenario 2 might be more common on WordPress sites that have blog
> functionality.
>
> There is a WordPress widget that shows blog categories to allow users to
> navigate to areas they may be interested in. This can be implemented as a
> list of links, but also alternatively as a dropdown where selecting a
> category from the list takes you to the listing page for the given
> category. This functionality is triggered by the onchange event, which is
> (as we know) triggered by using the up and down arrow keys within the
> dropdown list.
>
> Regards
> Graham Armfield
> Coolfields Consulting
>
> > > >