iview [Bug Report] FormItem Label Should Be Clickable By Default

eqoofvh9 于 4个月前发布在其他

关注(0)|答案(1)|浏览(36)

Environment

All versions

Reproduction link

https://www.iviewui.com/components/form-en

Steps to reproduce

Click on a label

What is expected?

Input related to said label should get focus

What is actually happening?

Nothing

As per WCAG 2.0 H44:

https://www.w3.org/TR/WCAG20-TECHS/H44.html
An additional benefit of this technique is a larger clickable area for the control, since clicking on the label or the control will activate the control. This can be helpful for users with impaired motor control.

Examples of standard HTML elements, including how to achieve this:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

iview

来源：https://github.com/iview/iview/issues/4722

1条答案

按热度按时间

8fsztsew1#

I could try implementing this. But the question is what option to go for:

Generate some unique id for the input fields and use the for="theGeneratedId" for the label. (Horrible option)
Wrap the label text into a span and wrap the input + span into a label element. Basically changing the div.ivu-form-item into a label element and changing the label.ivu-form-item-label into a span element. (This alone fixes the issue without any JS and is valid syntax)
Add a click event listener for the label element that sets focus to the input. (Not a bad solution but kind of hackish?)
Just let the users decide to add the unique id's via the label-for prop. It works, but when you are using FormItem with a label, I think it is a fair assumption that the library should handle linking the label to the input.

In option 2, the required changes would be:

Add .ivu-form-item { display: block }
Change the element tags
Test

赞(0）回复(0）举报 4个月前

我来回答