Angular中Shift+Tab组合键事件异常：焦点无法正常回退问题

问题场景 #

我们实现了一个点击开合的下拉菜单，使用<li>标签展示列表项。当前存在以下键盘焦点问题：

• 按Tab键时，焦点能在<li>项间正常依次切换；
• 当焦点处于最后一个（第5个）<li>项时，按下Shift+Tab组合键，无法回到前一个（第4个）<li>项；
• 自定义键盘事件监听时出现异常：按下Shift+Tab，event.key仅返回Shift；按下Tab+Shift仅返回Tab，导致Shift+Tab的回退逻辑无法触发；
• 单独监听Shift键时，焦点会直接跳转到第一个<li>项，而非预期的第4个。

相关代码 #

模板代码 #

<ul>
  <li tabindex="0" #lastAccountListItem class="account-nav--list-item app-font-regular-18" 
      *ngFor="let accountItem of mainMenu.accountTabList; index as i"
      (mouseenter)="optionHighlightIndex=i">
    {{accountItem.displayLabel}} ----- has 4 items, shift+tab works fine 4th item
  </li>

  <li tabindex="0" *ngIf="isArchived" #isArchivedFocus class="account-nav--list-item account-archive-link app-font-regular-18"
      (mouseenter)="optionHighlightIndex=mainMenu.accountTabList.length">
    {{mainMenu.archivedTab.label | titlecase}}  --- has 1 item only, when focus come here, it doesn't go to previous li item
  </li>
</ul>

组件事件代码 #

onArcKeydown(event: KeyboardEvent): void {
  if (event.key === 'Tab') {
    event.preventDefault();
    this.archievedDropdownItem.nativeElement.focus();
  } else if (event.shiftKey && event.key === 'Tab') { // 问题出在这里
    event.preventDefault();
    this.lastAccountListItem.nativeElement.focus();
  }
}

测试用Shift监听代码 #

if (event.shiftKey) { 
  event.preventDefault();
  this.lastAccountListItem.nativeElement.focus();
}

问题原因 #

1. 按键事件触发顺序问题：当按下Shift+Tab组合键时，浏览器会先触发Shift的keydown事件（此时event.key为Shift），再触发Tab的keydown事件（此时event.key为Tab，且event.shiftKey为true）。原代码的else if逻辑只能命中Tab事件且shiftKey为true的情况，但如果用户先按Shift再按Tab，Shift事件会先触发，导致回退逻辑无法被正确触发；
2. 单独Shift监听干扰：单独监听Shift键并强制跳转焦点，会覆盖默认的组合键行为，导致按下Shift时直接跳转到第一个<li>，而非等待Tab键完成组合键操作；
3. 事件逻辑拆分错误：原代码将普通Tab和Shift+Tab拆分为两个独立判断，没有考虑到按键顺序对event.key返回值的影响。

解决方案 #

修正事件处理逻辑 #

将Shift+Tab的判断整合到Tab键的事件处理中，利用event.shiftKey来区分普通Tab和Shift+Tab操作，同时移除单独的Shift键监听，避免干扰默认行为。

修改后的模板代码

确保事件绑定在最后一个<li>上：

<ul>
  <li tabindex="0" #lastAccountListItem class="account-nav--list-item app-font-regular-18" 
      *ngFor="let accountItem of mainMenu.accountTabList; index as i"
      (mouseenter)="optionHighlightIndex=i">
    {{accountItem.displayLabel}} ----- has 4 items, shift+tab works fine 4th item
  </li>

  <li tabindex="0" *ngIf="isArchived" #isArchivedFocus class="account-nav--list-item account-archive-link app-font-regular-18"
      (mouseenter)="optionHighlightIndex=mainMenu.accountTabList.length"
      (keydown)="onArcKeydown($event)">
    {{mainMenu.archivedTab.label | titlecase}}  --- has 1 item only, when focus come here, it doesn't go to previous li item
  </li>
</ul>

修改后的组件代码

onArcKeydown(event: KeyboardEvent): void {
  if (event.key === 'Tab') {
    event.preventDefault();
    if (event.shiftKey) {
      // Shift+Tab：回到前一个列表项（循环生成的最后一个li）
      this.lastAccountListItem.nativeElement.focus();
    } else {
      // 普通Tab：根据需求处理跳转，若这是最后一项，可让焦点跳出菜单或按业务逻辑处理
      // 注意：原代码中的archievedDropdownItem可能是笔误，需确保引用正确的元素
      // this.archievedDropdownItem.nativeElement.focus();
    }
  }
  // 移除单独的Shift键监听逻辑
}

关键修改说明 #

• 整合Tab与Shift+Tab逻辑：在Tab键的keydown事件中，通过event.shiftKey判断是否是回退操作，无论用户按键顺序是Shift+Tab还是Tab+Shift，都能正确触发对应逻辑；
• 移除Shift单独监听：避免按下Shift时就强制跳转焦点，保留组合键的正常触发逻辑；
• 统一事件拦截：仅在Tab事件中调用event.preventDefault()，避免影响其他按键的默认行为。

额外建议 #

对于下拉菜单的键盘导航，建议遵循WAI-ARIA无障碍规范：

• 使用上下箭头键（↑↓）切换列表项的焦点；
• 使用Tab键将焦点移出菜单，Shift+Tab将焦点移回菜单；
• 添加菜单的角色（role="menu"）和菜单项角色（role="menuitem"），提升无障碍访问体验。

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