用 aria-disabled 与 aria-busy 实现提交按钮防重复点击且不丢焦点

问题场景

表单提交时，常见做法是给按钮加 disabled。这能阻止重复点击，但按钮一旦被禁用，会从 Tab 序列中移除；如果它正持有焦点，焦点可能被移到文档或相邻元素，键盘用户会失去当前位置。屏幕阅读器也可能不再播报按钮状态。改用 aria-disabled='true' 可以保留可聚焦性和语义，但它是“告知”而非“禁止”，点击、回车和表单隐式提交仍需在脚本中拦截。

aria-busy='true' 用来表达区域正在更新，配合 role='status' 的 live region 播报「提交中/已完成」。注意：aria-busy 不会自动阻止提交，也不能替代服务端幂等。

最小可运行示例

将下面内容保存为 submit-demo.html，用浏览器打开。点击提交后按钮保持焦点，状态区先播报提交中，约 1.2 秒后播报完成；连续点击或按 Enter 不会重复发起。真实项目把 fakeSubmit 换成 fetch，并检查响应状态。

<!doctype html>
<html lang='zh-CN'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <title>提交按钮防重示例</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 2rem; }
    label { display: block; margin-bottom: .5rem; }
    input { padding: .5rem; width: 16rem; max-width: 100%; }
    button { margin-top: .75rem; padding: .5rem 1rem; }
    button[aria-disabled='true'] { opacity: .6; cursor: not-allowed; }
    button:focus-visible { outline: 3px solid #4d90fe; outline-offset: 2px; }
    #status { min-height: 1.5em; margin-top: .75rem; }
  </style>
</head>
<body>
  <form id='demo-form'>
    <label for='name'>名称</label>
    <input id='name' name='name' autocomplete='off' value='示例值'>
    <button id='submit-btn' type='submit' aria-disabled='false' aria-busy='false'>提交</button>
    <p id='status' role='status' aria-live='polite' aria-atomic='true'></p>
  </form>

  <script>
    (() => {
      const form = document.querySelector('#demo-form');
      const btn = document.querySelector('#submit-btn');
      const status = document.querySelector('#status');
      let busy = false;

      function setBusy(next, message) {
        busy = next;
        btn.setAttribute('aria-disabled', String(next));
        btn.setAttribute('aria-busy', String(next));
        status.textContent = message;
      }

      async function fakeSubmit(payload) {
        await new Promise((resolve) => setTimeout(resolve, 1200));
        console.log('模拟提交数据', payload);
      }

      form.addEventListener('submit', async (event) => {
        event.preventDefault();
        if (busy) return;

        setBusy(true, '提交中，请稍候');
        try {
          const data = new FormData(form);
          await fakeSubmit(Object.fromEntries(data.entries()));
          setBusy(false, '提交已完成');
        } catch (error) {
          setBusy(false, '提交失败，请重试');
        }
      });

      btn.addEventListener('click', (event) => {
        if (busy) {
          event.preventDefault();
          status.textContent = '正在提交，请稍候';
        }
      });

      form.addEventListener('keydown', (event) => {
        if (event.key === 'Enter' && busy) {
          event.preventDefault();
        }
      });
    })();
  </script>
</body>
</html>

关键点说明

1. 不写 disabled 属性。按钮始终在 Tab 序列中，提交时焦点留在按钮上；视觉上的不可用通过 [aria-disabled='true'] 样式表达。
2. busy 是提交锁。submit 事件里先 preventDefault()，再判断 busy，避免 Enter 触发的隐式提交造成重复。
3. aria-busy='true' 表示按钮处于更新中，role='status' 区域用简短文本播报状态。状态区应在页面加载时就存在，后续只改文本内容，便于辅助技术监听。
4. 失败分支要解除 busy，否则按钮永远无法再次提交；同时保留焦点，不主动 focus() 到其他元素。

运行与验证

保存文件后直接用浏览器打开。用键盘 Tab 到按钮并按 Enter，再快速连按几次，观察控制台只出现一次模拟提交。打开开发者工具的无障碍/辅助功能面板，查看按钮的 aria-disabled、aria-busy 与状态区文本变化。若使用屏幕阅读器，可听到状态区的礼貌播报；不同浏览器和读屏组合的播报时机可能不同。

边界与限制

• aria-disabled 只是语义标记，不会阻止点击或回车；必须配合脚本守卫和服务端幂等，不能把它当作安全控制。
• aria-busy 也不会自动禁用交互。把它放在按钮上时，不要同时让状态区的祖先处于 aria-busy='true'，否则播报可能被延后或合并。
• role='status' 默认是礼貌播报，快速连续更新可能被合并；状态文案应简短，避免每毫秒刷新。
• 前端锁只能约束当前页面。多标签页、刷新、网络重试仍可能重复提交，实际接口应使用幂等键或唯一请求 ID。
• 不要用 pointer-events: none 代替逻辑判断，它只影响鼠标，键盘仍可触发；也不要在提交时移动焦点到状态区，除非业务明确需要。