Accessible click binding

[mural...@gmail.com]

I am binding click event to a <div> element and its not accessible by keyboard(ENTER/SPACE) keys by default. It works fine for <a> and <button> since these elements are triggering click event when I press SPACE/ENTER from keyboard. I assume I also have to bind keypress event. There are number of elements needs similar feature in my application, what is the best way to make an accessible click binding to a non clickable element?

<div data-bind="click: divclick"></div>

Thanks,

Murali

[rpn]

Hi Murali-

I have used a binding that is something like this in the past: http://jsfiddle.net/rniemeyer/vrddLkqa/

It will set a tabIndex on the element, add a "button" role for accessibility, add the normal click handler, and trigger a click when hitting space/enter on the element.

Hope that helps!

Thanks-

Ryan

[Murali Krishnamoorthy]

Awesome, it helps. Thanks Ryan.

--
You received this message because you are subscribed to a topic in the Google Groups "KnockoutJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/knockoutjs/TdzNWVFfoVI/unsubscribe.
To unsubscribe from this group and all its topics, send an email to knockoutjs+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Ian Yates]

Hi Ryan,

Works a treat in Chrome.  When I tried it in IE 11 (Windows 8.1 desktop) the <div> didn't receive any special treatment for tabs.  Would you expect that to be the case?  Just curious, not expecting a solution :)