Bootstrap 4模态框关闭后出现aria-hidden阻止错误的解决方法

问题场景 #

正常打开/关闭Bootstrap 4模态框时无异常，但打开模态框并检查内部元素（比如用开发者工具查看或选中内部按钮）后关闭，会触发以下辅助技术错误提示：

阻止对元素设置aria-hidden，因为其子元素仍保留焦点。焦点不能对辅助技术用户隐藏。避免在获焦元素或其祖先元素上使用aria-hidden，可考虑改用inert属性，该属性也能阻止焦点。更多详情请查看WAI-ARIA规范的aria-hidden章节。获焦元素：button

解决方法 #

1. 强制关闭时重置焦点 #

利用Bootstrap模态框的hidden.bs.modal事件，在模态框完全关闭后，将焦点移回触发模态框的原始按钮，避免焦点留在已被隐藏的模态框元素内：

// 替换成你的模态框ID和触发按钮ID
$('#modalExample').on('hidden.bs.modal', function () {
  $('#openModalBtn').focus();
});

2. 调试时避免手动锁定焦点 #

在开发者工具中调试模态框时，不要主动选中模态框内的可交互元素（如按钮、输入框），关闭前确保焦点不在模态框内部元素上，减少触发错误的概率。

3. 用inert属性替代aria-hidden（可选） #

如果项目的浏览器兼容性允许，可以给模态框外的页面内容添加inert属性——它既能隐藏内容对辅助技术的可见性，又能自动阻止焦点进入，避免aria-hidden的冲突问题。注意Bootstrap 4原生不支持该属性，需要手动添加或引入polyfill兼容旧浏览器。

内容的提问来源于stack exchange，提问作者Dharan Gokul R