Angular自定义下拉菜单无JS实现键盘导航及焦点自动转移问题

一、能否仅通过ARIA角色实现展开时自动转移焦点？ #

不行。ARIA角色和属性仅负责给屏幕阅读器等辅助技术提供语义关联信息，不会自动实现交互逻辑（比如焦点转移、键盘导航）。要实现展开列表时自动将焦点移到首个列表项，必须编写TypeScript代码处理：

1. 给目标列表项添加模板引用变量，用于获取DOM元素
2. 在展开列表的逻辑中，等待视图更新完成后调用焦点方法

修改后的示例代码：

<div>
  <div 
    role="button" 
    tabindex="0"
    (click)="toggleList()"
    (keyup.enter)="toggleList()"
    [aria-expanded]="showList"
    [aria-controls]="'list-container'"
  >
    展开/收起列表
  </div>

  <div 
    *ngIf="showList" 
    role="list"
    id="list-container"
  >
    <div role="listitem" tabindex="0" #firstItem>第一项</div>
    <div role="listitem" tabindex="0">第二项</div>
  </div>
</div>

对应的TypeScript逻辑：

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-expandable-list',
  templateUrl: './expandable-list.component.html'
})
export class ExpandableListComponent {
  showList = false;
  @ViewChild('firstItem') firstItem!: ElementRef<HTMLElement>;

  toggleList() {
    this.showList = !this.showList;
    if (this.showList) {
      // 延迟执行确保视图已渲染完成
      setTimeout(() => {
        this.firstItem.nativeElement.focus();
      }, 0);
    }
  }
}

至于你尝试的menu/menuitem角色，这类属于复合组件范畴，浏览器不会自动实现箭头键导航和焦点管理，必须手动编写键盘事件处理器（监听keydown上下箭头）来切换焦点，这是自定义可访问组件的标准要求。

二、Angular的keyup.enter事件是否适配Windows和Mac？ #

完全可行。回车键的键值在Windows和Mac系统中是统一的，Angular的keyup.enter事件修饰符已经封装了跨平台兼容逻辑，不需要手动在TypeScript中判断键值（比如event.keyCode === 13）。

小建议：相比keyup，推荐使用keydown.enter处理触发逻辑。keydown在按键按下时立即响应，交互更及时；而keyup是按键抬起时触发，若用户按住回车键不放会多次触发。两种方式都跨平台，但keydown的体验更符合常规操作预期。

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