如何在Svelte表单中无障碍友好处理Esc键并消除A11y警告？

警告原因 #

表单(<form>)默认属于非可交互元素（无法被聚焦），直接给它绑定键盘事件会违反无障碍设计规范，因此触发了A11y警告。我们需要将事件绑定到表单内的可交互元素上（比如输入框、按钮）来解决这个问题。

方案一：给所有可交互元素绑定Esc处理事件 #

定义一个通用的Esc键处理函数，移除表单上的on:keydown，然后给输入框和按钮分别绑定事件，覆盖所有用户可能操作的场景：

<script>
  // 假设已有todo、name、onSave、onCancel这些变量/函数
  function handleEsc(e) {
    if (e.key === 'Escape') {
      onCancel();
    }
  }
</script>

<form on:submit|preventDefault={onSave} class="stack-small">
  <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"
      on:keydown={handleEsc}
    />
  </div>
  <div class="btn-group">
    <button 
      class="btn todo-cancel" 
      on:click={onCancel} 
      type="button"
      on:keydown={handleEsc}
    >
      Cancel<span class="visually-hidden">renaming {todo.name}</span>
    </button>
    <button 
      class="btn btn__primary todo-edit" 
      type="submit" 
      disabled={!name}
      on:keydown={handleEsc}
    >
      Save<span class="visually-hidden">new name for {todo.name}</span>
    </button>
  </div>
</form>

方案二：仅绑定输入框+自动聚焦（简洁版） #

如果用户的核心操作场景是在输入框中编辑，可以只给输入框绑定Esc事件，并在进入编辑模式时自动聚焦输入框，这样用户按Esc时必然触发取消操作：

<script>
  import { onMount } from 'svelte';
  
  // 假设已有todo、name、onSave、onCancel这些变量/函数
  let inputElement;

  function handleEsc(e) {
    if (e.key === 'Escape') {
      onCancel();
    }
  }

  onMount(() => {
    // 进入编辑模式后自动聚焦输入框
    inputElement?.focus();
  });
</script>

<form on:submit|preventDefault={onSave} class="stack-small">
  <div class="form-group">
    <label for="todo-{todo.id}" class="todo-label">New name for '{todo.name}'</label>
    <input 
      bind:this={inputElement}
      bind:value={name} 
      type="text" 
      id="todo-{todo.id}" 
      autoComplete="off" 
      class="todo-text"
      on:keydown={handleEsc}
    />
  </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>

内容的提问来源于stack exchange，提问作者opensas