Angular ng-select组件在Safari+VoiceOver下存在无障碍访问问题

问题重现 #

• 在Angular项目中使用ng-select组件，搭配Safari浏览器+VoiceOver屏幕阅读器时出现异常
• 选中「Katy Wright」选项后，使用向下箭头导航下拉列表，VoiceOver会将所有后续选项都识别为「Katy Wright」
• 该问题仅在Safari环境中触发，Chrome和Firefox下功能及可访问性表现正常
• 对比发现：原生HTML <select>+<option>组件无此问题，而ng-select未采用语义化的<option>标签，而是通过带有role="option"属性的<div>标签模拟选项

可能的原因与临时处理思路 #

• 核心诱因是ng-select的非语义化实现：原生<option>是浏览器原生支持的可访问性元素，而自定义div[role="option"]需严格遵循ARIA规范，Safari对这类自定义ARIA角色的兼容性处理存在缺陷
• 临时解决方案参考：
  • 升级ng-select至最新版本，核查是否已有官方修复该兼容性问题
  • 若业务场景允许，针对Safari环境临时替换为原生<select>组件
  • 手动为每个div[role="option"]添加明确的aria-label或aria-labelledby属性，强制VoiceOver识别每个选项的真实文本内容

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