handle Esc key on form in a A11y friendly way

I have a form in a Svelte app like this:

<!-- markup for editing todo: label, input text, Cancel and Save Button --><form on:submit|preventDefault={onSave} class="stack-small" on:keydown={e => e.key === 'Escape'&& onCancel()}><div class="form-group"><label for="todo-{todo.id}" class="todo-label">New name for '{todo.name}'</label><input bind:value={name} type="text" id="todo-{todo.id}" autoComplete="off" class="todo-text" /></div><div class="btn-group"><button class="btn todo-cancel" on:click={onCancel} type="button">        Cancel<span class="visually-hidden">renaming {todo.name}</span></button><button class="btn btn__primary todo-edit" type="submit" disabled={!name}>        Save<span class="visually-hidden">new name for {todo.name}</span></button></div></form>

I want to execute onCancel() when the user press the esc key on the input or in any button, but I get the following warning:

A11y: Non-interactive element <form> should not be assigned mouse or keyboard event listeners.

What would be the correct way to handle it?