Angular对话框键盘无障碍问题：登录后无法默认聚焦对话框

1. 主动触发对话框焦点（核心解决方法） #

仅靠HTML属性无法确保对话框自动获取焦点，必须在对话框完全显示后通过JavaScript手动调用focus()方法：

// 登录成功后显示对话框的逻辑
const dialog = document.getElementById('dialog1');
// 根据你的实际隐藏方式显示对话框，比如移除hidden类
dialog.classList.remove('hidden');
// 关键步骤：主动让对话框获得焦点
dialog.focus();

如果对话框带有过渡动画，需等动画结束后再调用焦点，避免失效：

dialog.classList.remove('hidden');
dialog.addEventListener('transitionend', () => {
  dialog.focus();
}, { once: true }); // once参数确保事件只触发一次

2. 确保对话框的可聚焦属性正确 #

保留你原有的HTML属性，这些是无障碍访问的必要条件，同时保证元素可被聚焦：

<div role="dialog" id="dialog1" aria-labelledby="dialog1_label" tabindex="0" aria-modal="true">
  <!-- 对话框内容 -->
  <h2 id="dialog1_label">登录成功提示</h2>
</div>

3. 解决页面元素抢焦点的问题 #

你之前给页面头部/主体/底部加tabindex="-1"无效，是因为页面内的原生可聚焦元素（按钮、输入框、链接等）默认自带tabindex="0"，仍会被Tab键遍历。正确的处理方式是：

• 对话框打开时，给页面非对话框区域添加aria-hidden="true"，让焦点遍历和屏幕阅读器忽略这些区域：

  const pageRegions = document.querySelectorAll('header, main, footer');
  // 打开对话框时隐藏页面区域
  pageRegions.forEach(region => region.setAttribute('aria-hidden', 'true'));
  // 关闭对话框时恢复
  pageRegions.forEach(region => region.removeAttribute('aria-hidden'));
  

4. 可选：实现焦点陷阱（完善用户体验） #

为了让Tab键在对话框内循环，不会跳到页面其他区域，可以添加焦点陷阱逻辑：

const dialog = document.getElementById('dialog1');
// 获取对话框内所有可聚焦元素
const focusableElements = dialog.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
const firstFocusable = focusableElements[0];
const lastFocusable = focusableElements[focusableElements.length - 1];

dialog.addEventListener('keydown', (e) => {
  if (e.key === 'Tab') {
    // Shift+Tab时从第一个元素跳到最后一个
    if (e.shiftKey && document.activeElement === firstFocusable) {
      e.preventDefault();
      lastFocusable.focus();
    }
    // Tab时从最后一个元素跳到第一个
    else if (!e.shiftKey && document.activeElement === lastFocusable) {
      e.preventDefault();
      firstFocusable.focus();
    }
  } else if (e.key === 'Escape') {
    // 按ESC关闭对话框（可选逻辑）
    dialog.classList.add('hidden');
    // 恢复页面区域和焦点
    pageRegions.forEach(region => region.removeAttribute('aria-hidden'));
    document.querySelector('#login-btn')?.focus(); // 回到登录按钮或其他元素
  }
});

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