如何在 Angular 中实现支持键盘导航的多选列表框-html教程-PHP中文网

如何在 Angular 中实现支持键盘导航的多选列表框

本文介绍如何基于 angular 构建一个可键盘操作（上下箭头、enter、escape、tab）的多选列表框，通过事件绑定、焦点管理与状态跟踪实现无障碍友好、符合 wcag 标准的交互体验。

本文介绍如何基于 angular 构建一个可键盘操作（上下箭头、enter、escape、tab）的多选列表框，通过事件绑定、焦点管理与状态跟踪实现无障碍友好、符合 wcag 标准的交互体验。

要为 Angular 多选列表框添加健壮的键盘导航能力（尤其是方向键上下切换、空格/Enter 切换选中、Escape 关闭、Tab 退出），不能仅依赖 *ngFor 渲染的静态 div 块——必须引入焦点控制、键盘事件监听、选中状态同步和可访问性语义四大要素。

以下是一个生产就绪的实现方案：

✅ 1. 模板层：启用键盘事件与可聚焦结构

<div class="multiselect-listbox" role="listbox" tabindex="0">

  <div tag of tags let i='index"' class="listbox-option" role="option" :>
    <span>{{ tag.text }}</span>
  </div>
</div>

? 关键点：

外层容器设 tabindex="0" 并声明 role="listbox"，使其成为键盘可聚焦的 ARIA 列表框；

每个选项使用 role="option" 和动态 aria-selected，明确语义；

仅当前聚焦项（focusedIndex === i）拥有 tabindex="0"，其余为 -1，确保焦点流可控。

✅ 2. 组件逻辑：键盘事件处理与状态管理

export class MultiSelectListComponent implements OnInit {
  @Input() tags: { id: string; text: string }[] = [];
  @Output() selectionChange = new EventEmitter<string>();

  selectedIds = new Set<string>();
  focusedIndex = 0; // 当前键盘聚焦的索引（默认第0项）
  private isFocused = false;

  ngOnInit() {
    if (this.tags.length > 0) {
      this.focusedIndex = 0;
    }
  }

  rowIsSelected(id: string): boolean {
    return this.selectedIds.has(id);
  }

  toggleSelection(id: string): void {
    if (this.selectedIds.has(id)) {
      this.selectedIds.delete(id);
    } else {
      this.selectedIds.add(id);
    }
    this.selectionChange.emit(Array.from(this.selectedIds));
  }

  onFocus(): void {
    this.isFocused = true;
  }

  onBlur(): void {
    this.isFocused = false;
  }

  onKeydown(event: KeyboardEvent): void {
    if (!this.isFocused || this.tags.length === 0) return;

    const lastIndex = this.tags.length - 1;

    switch (event.key) {
      case 'ArrowDown':
        event.preventDefault();
        this.focusedIndex = Math.min(this.focusedIndex + 1, lastIndex);
        this.focusCurrentOption();
        break;

      case 'ArrowUp':
        event.preventDefault();
        this.focusedIndex = Math.max(this.focusedIndex - 1, 0);
        this.focusCurrentOption();
        break;

      case ' ':
      case 'Enter':
        event.preventDefault();
        const focusedTag = this.tags[this.focusedIndex];
        if (focusedTag) this.toggleSelection(focusedTag.id);
        break;

      case 'Escape':
        event.preventDefault();
        this.isFocused = false;
        this.elementRef.nativeElement.blur(); // 移出焦点
        break;

      case 'Tab':
        // Tab 时保持选中态，由浏览器默认行为处理焦点流转
        break;

      default:
        return;
    }
  }

  private focusCurrentOption(): void {
    const options = this.elementRef.nativeElement.querySelectorAll('.listbox-option');
    if (options[this.focusedIndex]) {
      (options[this.focusedIndex] as HTMLElement).focus();
    }
  }

  // 可选：支持按字母快速跳转（如原生 `<select multiple>` 行为）
  // 可扩展 onKeyDown 中对 a-z 的处理，查找首字母匹配项
}</select></string></string>

✅ 3. 样式与可访问性增强（CSS 示例）

.multiselect-listbox {
  outline: none;
  border: 1px solid #ccc;
  max-height: 200px;
  overflow-y: auto;
}

.listbox-option {
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
}

.listbox-option:focus,
.listbox-option.focused {
  background-color: #007bff;
  color: white;
  outline: none;
}

.listbox-option[aria-selected="true"] {
  background-color: #e9ecef;
}

⚠️ 注意事项

不要移除 tabindex="0" 的外层容器：它是键盘导航入口，缺失将导致无法通过 Tab 进入组件；
始终调用 event.preventDefault() 对 Arrow/Space/Enter 等关键键，避免页面滚动或表单提交等副作用；
动态更新 tabindex 是焦点管理核心——仅允许一个选项拥有 tabindex="0"，否则键盘 Tab 会误入多个选项；
若需支持屏幕阅读器，请确保 aria-multiselectable="true" 添加到外层容器，并配合 aria-activedescendant（进阶用法）；
在真实项目中，建议封装为可复用的 MultiSelectListboxComponent，并提供 @Input() disabled, @Input() ariaLabel 等属性提升可用性。