Search and Top Navigation
#6063 closed bug (wontfix)
Opened September 17, 2010 10:15AM UTC
Closed October 22, 2012 01:55AM UTC
Last modified October 22, 2012 09:21AM UTC
Button: Labels with implicit controls are not converted to buttons.
| Reported by: | SiCo | Owned by: | |
|---|---|---|---|
| Priority: | minor | Milestone: | 1.11.0 |
| Component: | ui.button | Version: | 1.9.0 |
| Keywords: | label, button, html | Cc: | |
| Blocked by: | Blocking: |
Description
It appears that the button widget doesn't support the use case of the input being inside the label tag.
The W3 spec (a the bottom of the section 17.9
http://www.w3.org/TR/html401/interact/forms.html#h-17.9
The widget creates the buttons however doesn't allow selection. In Firefox 3.6.9 you can double click them to select (however it also selects the text label). This is obviously not as intended.
As a work around the html can be changed, to put the label next to the input. Some frameworks (i.e. Zend Framework) do not output their markup like this though (which is how the problem has come about).
Attachments (0)
Change History (14)
Changed September 20, 2010 05:22AM UTC by comment:1
Changed October 19, 2010 08:00PM UTC by comment:2
Proposed fix for this (applies cleanly to 1.8.5 as well)
http://github.com/urkle/jquery-ui/commit/7495486e0359d881bacfb0e036d81771e229b6c6
Changed October 20, 2010 02:23PM UTC by comment:3
Replying to [comment:2 urkle]:
Proposed fix for this (applies cleanly to 1.8.5 as well) http://github.com/urkle/jquery-ui/commit/7495486e0359d881bacfb0e036d81771e229b6c6
Rebased on head (commit 3f9693695537806244a853d7901912cc9ba94e86)
Changed December 07, 2010 11:20PM UTC by comment:4
| _comment0: | I don't know if this has been fixed (I can't see anything to say it's fixed or pending) as of 1.8.5 but upon testing 1.8.6 I run into a recursion error message in the Firefox error console: \ \ "Error: too much recursion \ Source file: http://static.iobs/scripts/jquery/jquery/jquery.min.js \ Line: 63" \ \ The error is different to what was happening before so I assume some change has made it through. It still works if the label is outside the radio button. → 1291764055413358 |
|---|
I don't know if this has been fixed (I can't see anything to say it's fixed or pending) as of 1.8.5 but upon testing 1.8.6 I run into a recursion error message in the Firefox error console:
"Error: too much recursion
Source file: /scripts/jquery/jquery/jquery.min.js
Line: 63"
The error is different to what was happening before so I assume some change has made it through. It still works if the label is outside the radio button.
Changed April 21, 2011 06:10PM UTC by comment:5
SiCo, that is an unrelated issue and should be reported, as my proposed commits have not been merged into the codebase.
Changed September 16, 2011 06:25PM UTC by comment:7
Copying my info over from my duplicate 7723.
Nesting the input inside a label is called an implicit label (including help folks search), here is an example and I have a live example at http://jsfiddle.net/studgeek/8xpYs/.
<label>
<input type="checkbox" />
</label>
I've looked at fixing it myself before I found this duplicate. Modifying it to check for a containing label when defining its buttonElement is straightforward, but there are then parts of the implementation that run into recursion problems. The solution I have that works is to dynamically move the input outside the label, but I worry those approaches may confuse developers.
That said, urkle's commit does something similar, but it also seems to have whole lot more code than mine. I'm not entirely sure why, maybe I am missing something. Next time I get a chance I will pass on my fix for comparison.
Changed September 16, 2011 06:46PM UTC by comment:8
| _comment0: | I know need to look at this more, but really it feels to me that the checkbox implementation could be improved to be a more like the normal button without needing a label. Right now checkbox doesn't work at all unless its associated with a label (unlike a normal button). Also, click events have to be bound to the label rather than the checkbox. I bring it up here because that change might avoid the need for implicit labels in many situations. → 1316205692090370 |
|---|
I know need to look at this more, but really it feels to me that the checkbox implementation could be improved to be a more like the normal button without needing a label. Right now checkbox doesn't work at all unless its associated with a label (unlike a normal button).
Changed September 16, 2011 08:43PM UTC by comment:9
| _comment0: | urkle, one issue I found with my current workaround is it breaks check events bound to the input. Instead I have to put them on the containing label. I suspect since your solution also moves the input it may have the same issue. Just something to test when someone looks at integrating this. → 1316205945680141 |
|---|
One issue I found with my current workaround is that check handlers bound to the input do not trigger, instead I have to put them on the containing label. I haven't dug into why yet, but since urkle's solution also moves the input element it may have the same issue. Just something to test when someone looks at integrating this.
Changed November 19, 2011 02:06PM UTC by comment:10
I wrote another approach: a plugin to convert implicit syntax to explicit.
Call .label() first,
Then we can call .button() and .buttonset() as usual.
http://plugins.jquery.com/project/Label
But I still looking forward to the official accepts urkle's patch for the ui-button.
Changed October 11, 2012 09:04PM UTC by comment:11
| milestone: | TBD → 1.11.0 |
|---|
Changed October 15, 2012 05:42PM UTC by comment:12
| status: | new → open |
|---|---|
| summary: | Button doesn't support radio input inside label. → Button: Labels with implicit controls are not converted to buttons. |
| version: | 1.8.4 → 1.9.0 |
Changed October 22, 2012 01:55AM UTC by comment:13
| resolution: | → wontfix |
|---|---|
| status: | open → closed |
The input-inside-label approach is causing accessibility problems. You should mark up your code properly using id/for attributes. See http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-form-control-labeling/
I've added a note about this to the Button documentation: https://github.com/jquery/api.jqueryui.com/commit/4234ad1f826316b8fe6c49d1a553f3fd60a93099
Considering that and the complexity a workaround introduces (see https://github.com/jquery/jquery-ui/pull/777/files), we're not going to address this inside the Button widget.
Changed October 22, 2012 09:21AM UTC by comment:14
For simpler integration I made a patch file to anyone who needs this workaround.
Demo:
http://jsfiddle.net/fjan/as9nU/
Usage: include jquery-ui-1.9.0.custom.fix6063.js ''AFTER'' the jquery-ui-1.9.0.custom.js (or min)
It does not create new derived button widget, just overrides the required function, so
$('selector').button()
will remain usable.
Get patch file from jsfiddle or here: http://fjan.eu/jquery-ui-1.9.0.custom.fix6063.js
Please copy the file to your server, don't just include it from the download location.
Tested in Chrome (18.0.1025), FF (16.0.1), Opera (12.02).
It sort of works in 1.8.2. The buttons get created, but look like regular buttons rather than a buttonset.
I'm uisng a replacement ZF view helper in the mean time.