Bug: Keydown.enter and Keydown.space do not emit the click event on buttons
Describe the bug Triggering the keydown event on a button for space or enter will not trigger the click event (which it does in an actual browser)
To Reproduce https://stackblitz.com/edit/github-bbenms-4fnuwh?file=src%2FButton.vue&view=editor
Expected behavior The click event should be triggered to accurately test keyboard navigation for accessibility
Related information:
System:
OS: Linux 5.15 Linux Mint 21.3 (Virginia)
CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H
Memory: 14.30 GB / 31.02 GB
Container: Yes
Shell: 0.96.0 - /home/n/.cargo/bin/nu
npmPackages:
@vue/test-utils: ^2.4.5 => 2.4.6
vitest: ^1.5.0 => 1.6.0
vue: ^3.5.12 => 3.5.12
Additional context
Hi @spthiel
Are you sure your repro is accurate?
<script setup>
const emit = defineEmits(['keydown']);
function onClick(event) {
emit('click');
}
</script>
<template>
<button @click="click">Button</button>
</template>
You want to define an emit keydown but emit a click event, and @click calls click instead of onClick?
You want to define an emit keydown but emit a click event, and @click calls click instead of onClick?
You are entirely correct, I am terribly sorry! I updated the repro to fix the issue and added a test case to test the general functionality works (so that I can assure you it's in the correct state now)
Thanks for the updated repro.
OOC, have you tried with the attachTo option?
VTU doesn't do anything to support this use-case I think. And I don't know how this is supposed to work if the event is triggered via JS. Maybe for that kind of use case you should rely on another type like component testing or e2e testing.
For HTMLButtonElement, browsers trigger a click when Enter or Space keys are pressed (unless prevented by keydown event handlers).
For HTMLAnchorElement, they do the same for Enterkey, but notSpace` key.
I believe VTU should replicate this.