Angular可访问自动完成列表框添加特殊按钮的ARIA角色问题

针对你用Angular结合aria-activedescendant实现的自动完成组件，要添加底部打开模态框的特殊操作项，以下是具体的分析和优化方案：

现有方案的问题分析 #

• 方案1：设为role="option"
  虽然能复用现有键盘导航逻辑，但role="option"的语义是「可选中的列表选项」，会让辅助技术用户误以为该项是用来填充输入框的选项，而非触发模态框的操作，造成认知混淆，不符合可访问性规范。
• 方案2：自定义键
  自定义的ARIA角色或键无法被主流辅助技术识别，会导致键盘导航失效、语义信息缺失，严重降低组件的可访问性，完全不推荐。

推荐的优化方案 #

方案A：将特殊项设为role="button"并适配键盘交互 #

如果设计要求该项必须放在自动完成列表（role="listbox"）内部，可按以下方式处理：

1. 给特殊项设置role="button"，同时用aria-label明确其功能，比如：

   <div role="button" aria-label="打开更多选项" (keydown)="handleButtonKeydown($event)" (click)="openModal()">
     打开更多选项
   </div>
   

2. 调整aria-activedescendant的逻辑：当键盘导航到该项时，输入框的aria-activedescendant指向这个按钮元素，辅助技术会读出「打开更多选项，按钮」的语义。
3. 适配键盘交互：当该项获得焦点（通过上下箭头导航）时，按Enter或Space键触发打开模态框的操作，而非填充输入框；按上下箭头可继续在列表中导航。

方案B：用role="option"配合aria-roledescription修正语义 #

如果希望复用现有option的键盘导航逻辑，可通过aria-roledescription覆盖角色描述，明确其操作属性：

1. 给特殊项设置role="option"，同时添加aria-roledescription="按钮"和aria-label="打开更多选项"：

   <div role="option" aria-roledescription="按钮" aria-label="打开更多选项" (keydown)="handleOptionKeydown($event)">
     打开更多选项
   </div>
   

2. 在选中逻辑中判断：当选中的是该项时，执行打开模态框的操作，而非填充输入框。
3. 这种方式既保留了现有键盘导航逻辑，又通过aria-roledescription修正了语义，让辅助技术用户清楚这是一个操作按钮而非普通选项。

额外注意事项 #

• 无论采用哪种方案，都要确保键盘导航的连贯性：上下箭头可以在普通选项和特殊操作项之间顺畅切换，不会出现焦点跳脱的情况。
• 特殊操作项的样式要和普通选项区分开，比如用不同的背景色或图标，让视觉用户也能快速识别其特殊功能。

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