Adding keydown events alongside click listeners - which key events to listen to?

Question

I am trying to add more accessibility to my app so i've added eslint-plugin-jsx-a11y to my eslint process. This has been great, however I have a question in regards to the click-events-have-key-events rule (https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/click-events-have-key-events.md ).

I want to add an onKeyDown or an onKeyPress anywhere I'm using the onClick in my react code. However I am not sure which keycode I should be listening to.

If, for example, I just do

  <div
     onClick={this.myFunction}
     onKeyDown={this.myFunction}
     />

That onKeyDown function fires when i just tab away from that div. So I am thinking I need to filter keyCodes, however when trying to meed accessibility standards, I'm not sure which keyCodes I need to listen for. Is the enter keyCodes enough - do all screen readers respect this for example?

Looking for some insight into this to help make my app more accessible and screen reader friendly.

Answer 1

You didn't ask specifically about this but the best solution is to use a native html element if possible. See the first rule of ARIA use. Native elements have the behavior built in to the element and work great with screen readers.

However, sometimes you need to create a custom element and that's where ARIA comes in. But you need both attributes and a role to make a custom element, and additionally you need keyboard/mouse handlers if the element will be interactive.

The types of keyboard events you listen for depends on the role. For example, if you were creating your own link element, instead of using an <a>, you'd listen for the ENTER key. If you were creating your own button, you'd listen for both the ENTER and SPACE keys.

The types of keys you listen for are explained in the design patterns in "WAI-ARIA Authoring Practices 1.1". For example, see the "Keyboard Interaction" section for buttons.