Activate/toggle buttons with space on keyup #858
Conversation
mcking65
requested review from
sh0ji and
jongund
and removed request for
jongund
examples/button/js/button.js
Outdated
| */ | ||
| function actionButtonKeyupHandler (event) { | ||
| // If either enter or space is pressed, activate the button | ||
| if (event.keyCode === 13 || event.keyCode === 32) { |
There was a problem hiding this comment.
The Enter check should be removed here. It's causing activateActionButton to trigger twice on Enter keypresses, effectively making the toggle button pointless.
There was a problem hiding this comment.
Oh, what a blunder. Of course.
examples/button/js/button.js
Outdated
| * @param {KeyboardEvent} event | ||
| */ | ||
| function toggleButtonKeyupHandler (event) { | ||
| if (event.keyCode === 13 || event.keyCode === 32) { |
To resolve issue w3c#610, activate buttons on keyup when space is pressed. Enter key behavior is not changed. Makes behavior consistent with HTML button elements.
To resolve issue w3c#610, activate buttons on keyup when space is pressed. Enter key behavior is not changed. Makes behavior consistent with HTML button elements.
|
My friend is working on her own ARIA practices. We are wondering if there is any reference about this keyup behavior other than the "Change History" section of WAI-ARIA Authoring Practices 1.1. Can anyone point a direction? |
Is it open source?
This was done to better match what the HTML |
Currently it's just a code sandbox.
You are right. Another friend @othree found an answer about this behavior here: https://stackoverflow.com/questions/16090578/why-do-enter-and-space-keys-behave-differently-for-buttons |
Implements #610.
Both action and toggle buttons are now activated with space on the keyup event and no longer on the keydown event. The behavior for pressing enter has not changed.
As brought up in #610, I would like to remove the safety check on lines 66 to 69 (in the new file). What are your thoughts on that?
Also, do you want me to expand the description in the design pattern to reflect this behavior?