I have a button than when clicked will expand a card with more information
Do I need to add onKeyDown to button for accessibility compliance?
Or is that redundant because the element is already a button?
I am missing something else to comply with WCAG 2.0?
Here is my collapsible button code with react
const ariaPressed = checked ? "true" : "false";
return (
<button
tabIndex={0}
role="button"
component="button"
aria-pressed={ariaPressed}
aria-expanded={ariaPressed}
onClick={toggleChecked}
>
{checked ? "Hide Versions" : "View Versions"}
</button>
);
>Solution :
No, you don’t need onKeyDown since you’re using a native <button>. A button will drive the onClick() whether you click with a mouse, press ENTER or SPACE with the keyboard, or tap on a mobile device.
As a side note, you also don’t need tabindex=0 since <button>s are natively keyboard focusable.
And you don’t need role=button since that’s the default role for a native <button>.
I would also get rid of aria-pressed since you’re using aria-expanded. As long as you toggle the value of aria-expanded between "true" and "false", that’s all you need.

