我有一个反应组件,它会提供付款详细信息的表单。现在,提交按钮正在从同一页面中的另一个组件呈现,并且它按预期工作。
但是,这导致了一个可访问性问题“此表单不包含提交按钮,这会为那些无法使用键盘提交表单的人带来问题。”
我尝试在表单中添加'id'属性,并在按钮上添加'form'属性。但它没有帮助。我怎么能解决这个问题?
形成:
<form id="ccForm">
<input type="text" className="creditCardNumber" />
........
.......
</form>
按钮:
<button for="ccForm">Purchase</button>
使用form
属性将按钮与表单所有者相关联的方法应该在符合Web浏览器的情况下工作。
我尝试在表单中添加'id'属性,并在按钮上添加'form'属性。但它没有帮助。我怎么能解决这个问题?
旁白:你说在尝试这个之前表单是有效的,所以我想按钮有一个自定义点击事件监听器,它会触发表单提交?无论如何,我建议使用form
属性,因为关联将设置implicit submission,这是正常的预期行为。这很重要:不要假设人们会使用按钮本身。
您遇到的可访问性错误表明可访问性检查器工具本身存在缺陷。
“此表单不包含提交按钮,这会为无法使用键盘提交表单的用户带来问题。”
我搜索了这个确切的错误消息,发现它来自HTML_Codesniffer规则(可能包含在像pa11y这样的工具中)。我查看了Javascript code for the test(在当前版本2.2.0中),它显然只是寻找嵌套在<form>
元素内部的提交按钮。
我已经向HTML_Codesniffer项目提交了一个错误报告来解决这个问题:Check for submit buttons outside of form element, associated using form attribute。更新:现在已修复,将成为下一个HTML_Codesniffer版本。
同时,您应该手动测试表单。表格能否以所有这些方式提交?
form
引用将促进这一点。)