The synthetic click event that happens on native <button> elements occurs on keydown for Enter and keyup for Space, but the button pattern doesn't describe this behavior and the example does not exhibit it. For instance, holding down the space bar on the "Mute" button toggles it off and on until you release the space bar--it should only trigger once on key release.
I tested this behavior using this codepen example on Firefox, Chrome, and Safari on Mac to be certain about it. Holding down space bar on the "real button" only triggers the click even on release, whereas holding down enter triggers it repeatedly until release. I added a "fake button" to demonstrate how this behavior can be replicated in JavaScript.
The synthetic click event that happens on native
<button>elements occurs on keydown for Enter and keyup for Space, but the button pattern doesn't describe this behavior and the example does not exhibit it. For instance, holding down the space bar on the "Mute" button toggles it off and on until you release the space bar--it should only trigger once on key release.I tested this behavior using this codepen example on Firefox, Chrome, and Safari on Mac to be certain about it. Holding down space bar on the "real button" only triggers the click even on release, whereas holding down enter triggers it repeatedly until release. I added a "fake button" to demonstrate how this behavior can be replicated in JavaScript.