如何实现对话框聚焦陷阱？解决iframe内元素可聚焦问题

针对dialog显示时iframe内元素仍可聚焦的问题，有以下几个更优的无障碍友好方案，替代display:none的临时处理：

1. 使用inert属性（现代浏览器首选） #

当dialog打开时，直接给页面中的iframe元素添加inert属性，关闭dialog时移除该属性：

// 打开dialog时
document.querySelectorAll('iframe').forEach(iframe => iframe.setAttribute('inert', ''));
// 关闭dialog时
document.querySelectorAll('iframe').forEach(iframe => iframe.removeAttribute('inert'));

inert会使目标元素及其所有子内容（包括跨域iframe内的元素）完全不可交互，既阻止键盘聚焦，也会被屏幕阅读器忽略，完全符合无障碍要求。目前Chrome、Firefox、Safari 15.4+都支持该属性，无需额外polyfill（如需兼容旧浏览器，可引入wicg-inert polyfill）。

2. 结合aria-hidden与tabindex #

如果需要兼容不支持inert的旧环境，可给iframe设置aria-hidden="true"和tabindex="-1"：

// 打开dialog时
document.querySelectorAll('iframe').forEach(iframe => {
  iframe.setAttribute('aria-hidden', 'true');
  iframe.setAttribute('tabindex', '-1');
});
// 关闭dialog时
document.querySelectorAll('iframe').forEach(iframe => {
  iframe.removeAttribute('aria-hidden');
  iframe.removeAttribute('tabindex');
});

同时确保你的dialog设置了aria-modal="true"，这样屏幕阅读器会自动忽略aria-hidden="true"的外部内容。该方案能阻止键盘聚焦到iframe内，且对屏幕阅读器友好，但相比inert，它只是标记元素不可访问，部分极端场景下可能仍有聚焦风险。

3. 焦点拦截逻辑（兼容性最强） #

通过监听键盘事件和焦点变化，强制将焦点限制在dialog内部：

1. 打开dialog时，记录dialog内的所有可聚焦元素（querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]')）
2. 监听keydown事件，当用户按Tab/Shift+Tab时，判断焦点是否即将跳出dialog：
   • 如果当前焦点是dialog最后一个可聚焦元素，按Tab时强制聚焦到第一个元素
   • 如果当前焦点是dialog第一个可聚焦元素，按Shift+Tab时强制聚焦到最后一个元素
3. 监听全局focus事件，若焦点落在dialog外（包括iframe内），立即将焦点移回dialog内的合适元素（比如第一个可聚焦元素或之前记录的焦点元素）

示例代码片段：

const dialog = document.getElementById('your-dialog');
const focusableElements = Array.from(dialog.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'));
const firstFocusable = focusableElements[0];
const lastFocusable = focusableElements[focusableElements.length - 1];

// 打开dialog时聚焦第一个元素
firstFocusable.focus();

// 拦截Tab键
dialog.addEventListener('keydown', (e) => {
  if (e.key === 'Tab') {
    if (e.shiftKey && document.activeElement === firstFocusable) {
      e.preventDefault();
      lastFocusable.focus();
    } else if (!e.shiftKey && document.activeElement === lastFocusable) {
      e.preventDefault();
      firstFocusable.focus();
    }
  }
});

// 拦截外部焦点
document.addEventListener('focus', (e) => {
  if (dialog.open && !dialog.contains(e.target)) {
    e.preventDefault();
    firstFocusable.focus();
  }
}, true);

该方案兼容性最好，能覆盖所有浏览器，但需要编写更多逻辑，适合必须支持旧环境的场景。

额外无障碍提示 #

• 确保dialog设置role="dialog"、aria-modal="true"，并通过aria-labelledby关联dialog标题，让屏幕阅读器正确识别模态框
• 关闭dialog时，记得恢复之前记录的页面焦点（打开dialog前用document.activeElement保存）
• 不要依赖tabindex="-1"禁用所有外部元素，这会导致页面其他元素在dialog关闭后需要重新恢复属性，容易出错，上述方案都是针对iframe的精准处理，更稳妥

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