Keyboard Events to support Accessibility .
I’m not sure I am going to give you the answer you need. Let me know, and/or ask again.
First it’s a good idea to run through tab key events on your app. React can allow for multipage, and modals that will sometimes sit outside or are hidden from the tab order. Be sure to use tabIndex=“0” on elements. Also you can create focus() when a componentDidMount().
Make sure that when a user tabs to an element that has an expected action (link, button, toggle) that a keyboard spacebar or enter key action will be associated as an event trigger on that element.
One can use aria-label or aria-labelledby attribute to give better A11y labeling support though I’m not an expert so be sure to read the documentation like at MDM Web Docs.
onKeyDown={this.handleKeyPress} can be added as an event listener to a focused container/div. You can then assign arguments based on keys you would want to assign to keyboard shortcuts.
handleKeyPress = (ev) => {
ev.stopPropagation()
if (ev.key === ‘ArrowRight’) {
this.handleNext(ev)
}
}
React’s synthetic events make it fairly simple.
Hope that helps 