This content originally appeared on DEV Community and was authored by Andreas Riedmüller
If you add a click event to a non-interactive html element such as a div you should also add keyboard support. For interactive elements like a button this is already taken care of by the browser.
If you use eslint-plugin-jsx-a11y you will see this warning when you add an onClick event:
71:13 warning Visible, non-interactive elements with click handlers must have at least one keyboard listener jsx-a11y/click-events-have-key-events
To get rid of this warning, my default approach is to add an additional handler for onKeyDown, filter for the enter key and trigger the same event as I have for onClick.
Additionally I add the role and tabIndex attributes as recommended.
function handleClick() { setWhatever(true) }
function handleKeyDown(e) {
if (e.keyCode === 13) {
handleClick();
}
}
return <div
role={'button'}
tabIndex={0}
onClick={handleClick}
onKeyDown={handleKeyDown}
>Click me!</div>
In comparison to a button this adds quite lot of code and markup and makes simple components often look more complex than they really are:
function handleClick() { setWhatever(true) }
return <button onClick={handleClick}>Click me!</button>
To avoid this, you can add a simple helper function that returns all required attributes, I called mine accessibleOnClick:
export function filterKeyEnter(handler) {
return e => {
if (e.keyCode === 13) {
handler(e);
}
}
}
export function accessibleOnClick(handler) {
return {
role: 'button',
tabIndex: tabIndex || 0,
onKeyDown: filterKeyEnter(handler),
onClick: handler
}
}
In your JSX you can now use the spread opperator to add all attributes returned by accessibleOnClick.
function handleClick() { setWhatever(true) }
return <div
{...accessibleOnClick(handleClick)}
>Click me!</button>
This is one of my favorite helper functions and I use it on a regular basis.
Do you have a similar/different approach for this type of click handlers? Let me know!
This content originally appeared on DEV Community and was authored by Andreas Riedmüller
Andreas Riedmüller | Sciencx (2021-06-14T10:01:29+00:00) Easy Accessible Click Handlers. Retrieved from https://www.scien.cx/2021/06/14/easy-accessible-click-handlers/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.