如何设置NgbModal按钮Tab导航顺序并解决焦点溢出问题

核心思路 #

@ng-bootstrap/ng-bootstrap的NgbModal本身自带**焦点陷阱（focus trapping）**功能，无需手动实现。你的问题主要是Tab顺序配置错误，以及未排除不需要参与Tab遍历的元素（右上角关闭按钮），导致焦点跳出预期路径。

具体解决方案 #

1. 修正HTML语法错误

首先修复Submit按钮的闭合标签错误：

<!-- 原错误代码 -->
<button type="submit" ngbAutofocus class="btn btn-primary mr-3 float-right" >Submit/button>

<!-- 修正后 -->
<button type="submit" ngbAutofocus class="btn btn-primary mr-3 float-right" >Submit</button>

2. 配置Tab导航顺序

通过tabindex属性指定按钮的Tab遍历优先级，数值越小，Tab时越先被选中：

<!-- ChildModalComponent 完整代码 -->
<div class="w-100">
  <!-- Remove按钮设为最后一个Tab目标 -->
  <button type="button" (click)="remove()" class="btn btn-primary mr-3 float-left" tabindex="3">Remove</button>
  <!-- Cancel按钮设为第二个Tab目标 -->
  <button type="button" class="btn btn-info float-right" (click)="closeModal()" tabindex="2">Cancel</button>
  <!-- Submit按钮设为第一个Tab目标，保留ngbAutofocus初始聚焦 -->
  <button type="submit" ngbAutofocus class="btn btn-primary mr-3 float-right" tabindex="1">Submit</button>
</div>

3. 排除不需要的Tab元素

将父模态框右上角的关闭按钮设置为tabindex="-1"，使其不会被Tab键选中（仍可通过点击获取焦点，符合无障碍要求）：

<!-- ParentModalComponent 完整代码 -->
<div class="modal-header">
  <h3 class="modal-title w-100 text-center">Modal Header Here</h3>
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')" tabindex="-1">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<app-child-modal></app-child-modal>

4. 确认焦点陷阱配置（可选）

NgbModal默认已启用焦点陷阱，可显式配置强化确认：

import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

openModal = () => {
    const modalRef = this.modalService.open(ParentModalComponent, {
      size: "xl", 
      backdrop: "static",
      focusTrapped: true // 显式启用焦点陷阱，默认值为true
    });
}

效果验证 #

• 打开模态框时，焦点自动落在Submit按钮
• 按Tab键，焦点依次切换为：Submit → Cancel → Remove
• 继续按Tab，焦点会循环回到Submit，不会跳出模态框
• 右上角关闭按钮不会被Tab键选中，但仍可点击关闭模态框

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