`MenuItem`: custom `onClick` not fired when `tag` is `button` and user presses enter

[OliverJAsh]

Reduced test case: https://stackblitz.com/edit/react-ts-sbkech?file=index.tsx

If you open the menu, focus the a, and then press enter, the custom onClick handler is fired as seen from the logs. ✅

If you open the menu, focus the button, and then press enter, the custom onClick handler is not fired as seen from the logs. ❌

I would expect onClick to work when the user presses enter on a button, just like how it works on an a.

My understanding of what is happening here:

• MenuItem has some code that will preventDefault inside the keydown event if this condition is not met: this.props.tag === 'a' && this.props.href
• therefore, in this case where tag is button, it will preventDefault
• therefore there will be no click event after the keydown event finishes

Note: onClick is called if you actually click, as opposed to using the enter key.

[anna-yeddi]

If removing preventDefault() is not a suitable option, using onKeyPress or onKeyUp event is preferable as it will comply with WCAG 2.1 Success Criterion 2.5.2 Pointer Cancellation so users will not be able to activate it by mistake (including when scrolling on touch screens as it also fires onKeyDown event) and assistive technology (i.e. screen readers and speech-to-text) will be able to activate the control as well.

UPD: Also, for button elements both event.keyCode === 13 (for Enter) and event.keyCode === 32 (for Space) needs to be used. Otherwise, keyboard navigation with Tab and Tab+Shift (or Up/Down arrows) will trigger the event.

[OliverJAsh]

Workaround: pass onKeyDown={undefined}. Reduced test case: https://stackblitz.com/edit/react-ts-fnndrm?file=index.tsx