ant-design/ant-design

Complex form control broken Accessibility

Open

#53,431 建立於 2025年4月7日

在 GitHub 查看
 (4 留言) (0 反應) (0 負責人)TypeScript (98,031 star) (54,612 fork)batch import
Inactivehelp wanted⌨️ Accessibility

描述

Reproduction link

Edit on CodeSandbox

Steps to reproduce

  1. Create a complex form control as per the documentation: Form
<Form.Item label="Field">
  <Form.Item name="field" noStyle><Input /></Form.Item> // that will bind input
  <span>description</span>
</Form.Item>
  1. Click on the label / try a screen reader

What is expected?

The form control should be activated on click of its associated label.

What is actually happening?

Nothing happens. The association of Form Label and Form Item is broken.

Environment Info
antd 5.16.2
React 18.2.14
System Mac 15.4
Browser Chrome 134

It does work when htmlFor={"field"} is added to the parent <Form.Item label="Field">. However it is expected to work out of box similar to a simple form control. Also there is not documentation confirming this solution.

貢獻者指南