其他组件中的“提交”按钮会导致可访问性问题

Question

我有一个react组件，可显示付款明细表。 现在，正在从同一页面中的另一个组件渲染“提交”按钮，并且按预期方式工作。

但是，这导致了可访问性问题“此表单不包含提交按钮，这为无法使用键盘提交表单的用户带来了麻烦。”

我尝试在表单中添加“ id”属性，并在按钮中添加“ form”属性。但这没有帮助。 我该如何解决？

表格：

<form id="ccForm">
    <input type="text" className="creditCardNumber" /> 
    ........
    .......
</form>

按钮：

<button for="ccForm">Purchase</button>

Answer 1

使用form属性将按钮与表单所有者相关联的方法应该可以在符合标准的Web浏览器中使用。

  

我尝试在表单中添加“ id”属性，并在按钮中添加“ form”属性。但这没有帮助。我该如何解决？

在旁边：您说此表单在之前工作过，因此我想按钮具有一个自定义的click事件监听器，可以触发表单提交？无论如何，我建议还是使用form属性，因为关联将设置implicit submission，这是正常的预期行为。这很重要：不要以为人们会自己使用按钮。

您遇到的可访问性错误表明可访问性检查器工具本身存在缺陷。

  

”此表单不包含“提交”按钮，它会为   那些无法使用键盘提交表单的人。”

我搜索了这个确切的错误消息，发现它来自HTML_Codesniffer规则（可能包含在pa11y之类的工具中）。我查看了Javascript code for the test（在当前版本2.2.0中），很显然，它只是在{strong> {strong} {元素本身内嵌套的内部查找提交按钮。

我已向HTML_Codesniffer项目提交了错误报告，以解决此问题：Check for submit buttons outside of form element, associated using form attribute。 更新：此问题现已修复，将是下一个HTML_Codesniffer版本。

同时，您应该手动测试表单。可以通过所有这些方式提交表单吗？

• 点击按钮上的指针（鼠标/手指/手写笔触摸）。
• 通过键盘：
  • 当焦点位于按钮上时，按Enter或空格键即可提交表单
  • 当焦点位于表单内的输入（例如文本字段）时，按Enter键即可提交表单。 （这是隐式提交-<form>属性将对此起到促进作用。）
• 使用一些屏幕阅读器重复键盘测试。