Angular弹窗(modal/dialog)无障碍适配问题：打开后焦点仍停留在触发按钮

解决方案 #

你遇到的问题核心是焦点移动时机错误、未实现完整模态框焦点陷阱，部分ARIA配置的错误操作反而放大了问题，按以下步骤调整即可：

1. 先移除错误配置 #

• 删掉给body设置tabindex的相关逻辑，这个操作不符合无障碍规范，会引入额外的焦点冲突
• 不要给触发按钮#login_btn动态设置aria-hidden、disabled、aria-disabled属性，这类操作不会解决焦点问题，反而会导致屏幕阅读器误判元素状态，要限制重复点击单独加逻辑锁即可

2. 修正焦点移动时机 #

肉眼可见输入框获得焦点但屏幕阅读器依旧识别原按钮，大概率是你在弹窗DOM还没完全渲染、aria-modal属性未生效时就调用了focus()，调整为等DOM更新完成后再移动焦点：

// 示例，框架环境下可以用对应的生命周期钩子代替setTimeout
setTimeout(() => {
  this.focusedElement.nativeElement.focus();
}, 0);

3. 补充模态框必要ARIA属性 #

你已经配置了role="dialog"和aria-modal="true"，还需要补充：

• 给模态框根元素加aria-labelledby属性，值为弹窗标题元素的ID，没有可视化标题的话直接加aria-label="登录弹窗"说明弹窗用途
• 确保模态框的DOM节点在HTML结构层级上和页面其他根元素同级，不要嵌套在其他可聚焦元素内部

4. 实现强制焦点陷阱 #

这是模态框无障碍适配的强制要求：

• 弹窗打开前先存储触发按钮的引用，弹窗关闭时主动将焦点移回该按钮
• 弹窗打开后，拦截所有Tab/Shift+Tab操作，让焦点只在弹窗内部的可聚焦元素（输入框、按钮、链接等）之间循环，不能移出到背景层
• 不要给弹窗内的元素手动设置tabindex>0，保持自然的DOM顺序即可

兼容老版本屏幕阅读器 #

如果以上步骤做完依旧有问题，可能是你适配的屏幕阅读器版本对aria-modal="true"支持不完善，可在弹窗打开时给所有非模态框的页面根元素加aria-hidden="true"，弹窗关闭时再移除，强制屏幕阅读器只识别模态框内的内容。

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