Ticket #6063 (closed bug: wontfix)

Opened 4 years ago

Last modified 21 months ago

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:
Blocking: Blocked by:

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).

Change History

comment:1 Changed 4 years ago by dmuir

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.

comment:2 follow-up: ↓ 3 Changed 4 years ago by urkle

Proposed fix for this (applies cleanly to 1.8.5 as well)

 http://github.com/urkle/jquery-ui/commit/7495486e0359d881bacfb0e036d81771e229b6c6

comment:3 in reply to: ↑ 2 Changed 4 years ago by urkle

comment:4 Changed 4 years ago by SiCo

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.

Last edited 4 years ago by SiCo (previous) (diff)

comment:5 Changed 3 years ago by urkle

SiCo, that is an unrelated issue and should be reported, as my proposed commits have not been merged into the codebase.

comment:6 Changed 3 years ago by scott.gonzalez

#7723 is a duplicate of this ticket.

comment:7 Changed 3 years ago by studgeek

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.

comment:8 Changed 3 years ago by studgeek

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).

Last edited 3 years ago by studgeek (previous) (diff)

comment:9 Changed 3 years ago by studgeek

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.

Last edited 3 years ago by studgeek (previous) (diff)

comment:10 Changed 3 years ago by mail6543210

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.

comment:11 Changed 22 months ago by scott.gonzalez

  • Milestone changed from TBD to 1.11.0

comment:12 Changed 22 months ago by bchiasson

  • Status changed from new to open
  • Version changed from 1.8.4 to 1.9.0
  • Summary changed from Button doesn't support radio input inside label. to Button: Labels with implicit controls are not converted to buttons.

comment:13 Changed 21 months ago by joern.zaefferer

  • Status changed from open to closed
  • Resolution set to wontfix

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.

comment:14 Changed 21 months ago by fjan

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).

Note: See TracTickets for help on using tickets.