项目中按钮的无障碍角色显示为combobox，如何改为button？

我的项目中有如下布局代码：

<div class="css-c18mwd-ImageFrameBase-ImageFrameWithGradient-SecondaryImageFrameWithGradient e1jjxv8j4">
<button tabindex="0" aria-haspopup="true" class="css-11ubmv-MediaGridButton e1jjxv8j1">Enlarge Nordic Blue Nokia X20 from Front and Back</button>
</div>

但在无障碍标签页中查看时，该button的role被识别为combobox（无障碍树显示此异常）。请问如何优化其无障碍性，使其role与页面其他按钮一致为button？

修复方法 #

• 移除冲突ARIA属性：aria-haspopup="true" 是浏览器误判角色的核心原因。当按钮仅设置该属性但未明确弹窗类型时，部分浏览器会将其识别为combobox。直接删除这个属性，就能让浏览器正确识别button原生角色。
• 明确弹窗类型（如需保留弹窗功能）：如果按钮确实需要触发弹窗，不要只写aria-haspopup="true"，改为明确指定弹窗类型为dialog，即设置aria-haspopup="dialog"。这样浏览器会识别它为带弹窗的按钮，而非combobox。
• 排查框架/组件库自动注入行为：如果使用了React、Vue等框架或第三方UI组件库，可能是组件内部动态注入了额外ARIA属性。可以通过开发者工具检查元素属性变化，或查阅组件文档，针对性覆盖、禁用该自动注入逻辑。

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