Vaadin 23.1.2 Select组件ARIA报错及button角色合规性咨询

问题前置说明 #

使用Axe Accessibility Chrome扩展扫描23.1.2版本的Vaadin Select组件时，触发严重级别无障碍规则校验错误：Elements must only use allowed ARIA attributes。
报错定位元素为vaadin-select-value-button，元素源码如下：

<vaadin-select-value-button aria-haspopup="listbox" slot="value" tabindex="0" role="button" aria-labelledby="label-vaadin-select-0 vaadin-select-0" aria-required="false" aria-expanded="false"></vaadin-select-value-button>

具体错误指向：该元素上声明的aria-required="false"属于不允许使用的ARIA属性。

问题1：该组件设置role="button"是否符合规范？ #

符合规范，原因如下：

• 该元素是下拉选择框的触发控件，核心交互为点击后展开选项列表，交互逻辑与原生按钮完全一致，设置role="button"可正确向屏幕阅读器等辅助技术传递元素的交互类型
• 配套的aria-haspopup="listbox"、aria-expanded="false"属性，与role="button"组合后可完整表达「点击按钮弹出列表选择面板」的交互语义，完全匹配ARIA规范要求，不存在语义错误。

问题2：该ARIA属性报错如何解决？ #

报错根因 #

aria-required是用于标记表单控件是否必填的属性，仅支持设置在具备表单输入类角色的元素上，role="button"不在该属性的合法支持角色列表内，因此触发校验错误。另外此处显式设置aria-required="false"本身属于冗余声明：所有ARIA布尔状态属性的默认值均为false，不显式声明的效果和设置为false完全一致。

解决方法 #

• 优先方案：升级Vaadin版本
  该问题是Vaadin 23.1.2版本的已知组件实现缺陷，官方在后续的补丁版本中已完成修复：移除了触发按钮上冗余的非法aria-required属性，将必填状态的ARIA声明移动到Select组件本身具备合法角色的节点上。直接升级到23.1系列的最新补丁版本，或更高的稳定LTS版本即可自动修复该问题，无需修改业务代码。
• 临时兼容方案：手动移除非法属性
  如果暂时无法升级Vaadin版本，可在前端添加逻辑，在组件渲染完成后移除所有vaadin-select-value-button元素上的aria-required属性，参考实现代码：

  const removeInvalidAriaAttr = () => {
    document.querySelectorAll('vaadin-select-value-button').forEach(btn => {
      btn.removeAttribute('aria-required')
    })
  }
  // 初始页面加载完成后执行
  window.addEventListener('load', removeInvalidAriaAttr)
  // 如果页面存在动态渲染的Select组件，可在组件渲染完成的回调中补充调用removeInvalidAriaAttr
  

注意：移除aria-required="false"不会破坏无障碍语义，属性默认值即可正确传递非必填的状态信息，不会对辅助技术用户造成误导。

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