Angular ngbDropdown菜单实现Tab循环跳转（末项回首项）的WCAG适配问题

下拉菜单WCAG闭合Tab顺序实现方案 #

你遇到的跳步问题是两个核心错误导致的：

1. 未阻止Tab键原生默认行为：浏览器自带的Tab焦点跳转逻辑优先级高于自定义聚焦逻辑，如果不主动禁用原生行为，会和自定义跳转逻辑冲突，出现多跳、跳步问题。
2. 监听时机和范围错误：要么只监听了最后一项的Tab事件，要么在keyup阶段才处理，此时原生跳转已经执行完成，手动聚焦等于额外多跳了一次。

实现方案 #

统一在keydown.tab阶段处理所有菜单项的Tab事件，先禁用原生行为，再手动计算下一个要聚焦的节点，实现循环跳转，该方案支持任意数量的菜单项，后续新增项无需修改逻辑。

模板代码

如果用循环生成菜单项（推荐，扩展性更好）：

<div ngbDropdown class="d-inline-block">
  <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle
          (click)="open($event)">Actions</button>
  <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
    <button #menuItem *ngFor="let item of menuList; let currentIndex = index"
            (click)="doAction($event, item.action, journalEntry.id)"
            (keydown.tab)="handleTabLoop($event, currentIndex)"
            ngbDropdownItem>
      {{item.name}}
    </button>
  </div>
</div>

如果需要写死三个菜单项：

<div ngbDropdown class="d-inline-block">
  <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle
          (click)="open($event)">Actions</button>
  <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
    <button #menuItem (click)="doAction( $event, 'Errors', journalEntry.id)"
            (keydown.tab)="handleTabLoop($event, 0)"
            ngbDropdownItem>Errors</button>
    <button #menuItem (click)="doAction( $event, 'Events', journalEntry.id)"
            (keydown.tab)="handleTabLoop($event, 1)"
            ngbDropdownItem>Events</button>
    <button #menuItem (click)="doAction( $event, 'Counts', journalEntry.id)"
            (keydown.tab)="handleTabLoop($event, 2)"
            ngbDropdownItem>Counts</button>
  </div>
</div>

组件代码

import { ViewChildren, QueryList, ElementRef } from '@angular/core';

// 循环用的菜单项配置，写死菜单项可以省略该配置
menuList = [
  {name: 'Errors', action: 'Errors'},
  {name: 'Events', action: 'Events'},
  {name: 'Counts', action: 'Counts'}
];

// 获取所有菜单项的DOM引用
@ViewChildren("menuItem") menuItemList: QueryList<ElementRef>;

handleTabLoop(event: KeyboardEvent, currentIndex: number) {
  // 必须先阻止默认Tab跳转和事件冒泡
  event.preventDefault();
  event.stopPropagation();

  const allMenuItems = this.menuItemList.toArray();
  const totalCount = allMenuItems.length;
  // 计算下一个索引，最后一项+1取余自动回到第一项
  const nextIndex = (currentIndex + 1) % totalCount;
  // 手动聚焦下一个菜单项
  allMenuItems[nextIndex].nativeElement.focus();
}

原有方案错误说明 #

• 尝试方案1：仅监听了最后一个菜单项的Tab事件，且没有阻止默认行为，非最后一项的Tab走原生跳转逻辑，无法实现闭环，还会和手动聚焦逻辑冲突出现跳步。
• 尝试方案2：keydown阶段没有阻止默认行为，浏览器已经完成了一次原生Tab跳转，keyup阶段的手动聚焦等于多跳了一次，所以会固定跳过一个Tab位。

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