Trumbowyg工具栏按钮按下状态实现aria-pressed后NVDA无法识别问题

现有实现的问题 #

• 错误移除tabindex属性：原生button元素默认支持键盘聚焦，移除后按钮无法通过Tab键导航选中，NVDA不会监测不可聚焦元素的状态变更
• aria-pressed值类型不符合规范：WAI-ARIA要求该属性值为字符串格式的"true"/"false"，直接传入布尔值会被NVDA识别为无效状态
• 冗余设置role="button"：原生<button>自带button语义，重复赋值可能导致NVDA语义解析冲突
• 事件绑定逻辑不完善：仅绑定click事件，未适配键盘触发场景，且无差别调用preventDefault()会阻断编辑器原生格式切换逻辑
• 状态切换逻辑独立于编辑器本身：手动切换aria-pressed未和编辑器实际的格式激活状态同步，会出现状态不一致的问题

修正后代码 #

function addValuesToTextEditorButtons() {
  const toggleButton = (element, forceState = null) => {
    // 优先用传入的强制状态（和编辑器实际状态同步），没有则取反当前状态
    const currentPressed = element.getAttribute("aria-pressed") === "true";
    const newPressed = forceState !== null ? forceState : !currentPressed;
    // 统一转为字符串赋值，符合ARIA规范
    element.setAttribute("aria-pressed", String(newPressed));
  }

  const handleBtnInteraction = (event) => {
    // 仅在按下空格时阻止默认滚动行为，不影响回车等其他按键的原生逻辑
    if (event.type === "keydown" && event.code === "Space") {
      event.preventDefault();
    }
    // 等待编辑器原生格式切换完成后，同步更新aria-pressed状态
    setTimeout(() => {
      // 通过按钮是否有trumbowyg-active类判断实际激活状态，和编辑器本身状态对齐
      const isActive = event.target.classList.contains("trumbowyg-active");
      toggleButton(event.target, isActive);
    }, 0);
  }

  const buttons = $('.trumbowyg-button-pane .trumbowyg-button-group button[type="button"]');
  buttons.each(function (index, element) {
    const title = element.title.split(' ')[0];
    element.value = title;
    element.setAttribute('aria-label', title);
    // 初始化状态和按钮本身的激活类对齐
    const initActive = element.classList.contains("trumbowyg-active");
    element.setAttribute('aria-pressed', String(initActive));
    // 同时绑定点击和键盘触发事件
    element.addEventListener('click', handleBtnInteraction);
    element.addEventListener('keydown', handleBtnInteraction);
  });
}

验证说明 #

使用NVDA搭配Edge或Firefox浏览器测试，通过Tab键导航到工具栏按钮后，按空格或回车切换状态，即可听到NVDA正常播报「[按钮名称] 已按下」「[按钮名称] 已取消按下」的状态提示。

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