[Solved] onblur for keyboard user (a11y)

[Ed]

We have a dropdownlist control which is a Language/Locale selector.  When the user changes their language selection, we make an AJAX call to change the user's current language on the server and then the client will refresh the page on AJAX success (this is the changeLanguage js function).

Because of WCAG 2 AA testing, we need to allow keyboard navigation.  There are 2 ways I see the keyboard user can navigate the dropdown list.
1 - tab onto the control, click Alt-Down Arrow, use the up/down arrow keys to choose the option you want, tab out of the control
2 - tab onto the control, use the up/down arrow keys choose the option you want, tab out of the control

Scenario 1: Tabbing out of the control should fire the change event and the close event.  If we associate changeLanguage function with either of these, we're looking good.
Scenario 2: We don't want to use the change event since the user may want to arrow up/down through several options before tabbing off the control, and that tabbing off the control should make their selection and fire the event.  The close event doesn't fire since we never opened the dropdown.  What makes sense would be to have an onblur event, but that event is not available via Kendo (AFAIK)

For both Scenario 1 & 2, the onblur event should work - or we can attach the changeLanguage function both both close and onblur, which should cover both scenarios.

So, for the onblur event, do I need to go outside the kendo events and use jQuery?  If I need to use jQuery onblur, on which element of the dropdownlist should I attach the event handler to?

Thanks,
--Ed

[Georgi Krustev]

Hello Ed,

In general, the change event should be sufficient as it will be raised on value change. When popup is closed and user uses UP/DOWN arrows to pick different item, then change event will be raised on every item change (this is how the SELECT element behaves). If you would like to run your logic only on widget blur, then you will need to wire the blur event of the DropDownList wrapper element using jQuery. Here is a Dojo demo that demonstrates how to accomplish this task.

Regards,
Georgi Krustev
Telerik