Angular 9中ngx-bootstrap下拉菜单键盘无障碍问题求助

问题1：菜单项聚焦时ESC无法关闭下拉 #

ngx-bootstrap默认仅在触发按钮（dropdownToggle）获焦时响应ESC关闭下拉，针对菜单项聚焦场景，无需全局监听文档事件，可通过组件内局部监听实现：

1. 在组件中通过@ViewChild获取下拉实例并记录焦点状态：

import { BsDropdownDirective } from 'ngx-bootstrap/dropdown';
import { ElementRef, ViewChild } from '@angular/core';

export class YourComponent {
  @ViewChild(BsDropdownDirective) dropdown!: BsDropdownDirective;
  private prevFocusedElement: HTMLElement | null = null;

  onDropdownOpen() {
    this.prevFocusedElement = document.activeElement as HTMLElement;
  }

  handleMenuItemEsc(event: KeyboardEvent) {
    if (event.key === 'Escape') {
      this.dropdown.hide();
      // 恢复焦点到打开下拉前的表单控件
      this.prevFocusedElement?.focus();
    }
  }
}

2. 在模板中绑定事件：

<div dropdown (onShown)="onDropdownOpen()">
  <button dropdownToggle type="button">下拉触发按钮</button>
  <div *dropdownMenu class="dropdown-menu">
    <a 
      class="dropdown-item" 
      role="menuitem"
      (keydown.esc)="handleMenuItemEsc($event)"
      *ngFor="let item of menuItems"
    >
      {{ item.label }}
    </a>
  </div>
</div>

这样在任意菜单项上按ESC，都会关闭下拉并将焦点返回至打开前的控件，无需反复按TAB回到触发按钮。

问题2：上下方向键导航失效 #

先排查以下常见原因，无需急着手动添加监听：

1. 检查模块导入：确保Angular模块中正确导入BsDropdownModule：

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';

@NgModule({
  imports: [
    BsDropdownModule.forRoot()
  ]
})
export class YourModule {}

2. 验证模板结构：必须严格遵循ngx-bootstrap的下拉结构规范：

• 触发按钮需添加dropdownToggle指令
• 菜单容器需添加*dropdownMenu结构指令
• 每个菜单项需设置role="menuitem"并添加dropdown-item类

正确示例：

<div class="dropdown" dropdown>
  <button dropdownToggle type="button" class="btn btn-primary">
    下拉触发按钮
  </button>
  <div *dropdownMenu class="dropdown-menu" role="menu">
    <a class="dropdown-item" role="menuitem" href="#">菜单项1</a>
    <a class="dropdown-item" role="menuitem" href="#">菜单项2</a>
    <a class="dropdown-item" role="menuitem" href="#">菜单项3</a>
  </div>
</div>

3. 排查样式与报错：

• 确保未通过自定义样式移除菜单项的焦点样式（如outline: none），否则方向键导航可能因焦点不可见看似失效
• 查看浏览器控制台，确认无指令未找到、模板解析等错误

如果以上排查后仍失效，可手动绑定方向键事件补充：

handleMenuItemKeydown(event: KeyboardEvent) {
  const menuItems = Array.from(document.querySelectorAll('.dropdown-item')) as HTMLElement[];
  const currentIndex = menuItems.findIndex(item => item === document.activeElement);
  
  if (event.key === 'ArrowDown') {
    event.preventDefault();
    const nextIndex = (currentIndex + 1) % menuItems.length;
    menuItems[nextIndex].focus();
  } else if (event.key === 'ArrowUp') {
    event.preventDefault();
    const prevIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;
    menuItems[prevIndex].focus();
  }
}

模板中绑定：

<a 
  class="dropdown-item" 
  role="menuitem"
  (keydown.ArrowDown)="handleMenuItemKeydown($event)"
  (keydown.ArrowUp)="handleMenuItemKeydown($event)"
  *ngFor="let item of menuItems"
>
  {{ item.label }}
</a>

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