Toggle style checkboxes initialized with JS don't work

[malacalypse]

https://jsfiddle.net/pwkayddm/2/

.ui.toggle.checkboxes don't work when initialized with .checkbox() anymore.

I've included both a rails-style checkbox (two inputs - one hidden, one a checkbox) and a traditional single-element checkbox, both written in the traditional inline style used by simple_form among many other libraries.

These used to work just fine in Semantic-UI 1.x , but now their toggle behaviour isn't correct - it appears to be double triggering. I thought it was simply because the onClick is bound to the label, which usually causes a double call on the input itself, but fixing that didn't entirely solve the problem.

[jlukic]

If you remove the for attribute they will work correctly.
http://jsfiddle.net/cent6fgx/

It's causing it to double trigger. I'll see if I can't handle this in JS.

[malacalypse]

Hi Jlukic,

Thanks for the quick response.

The 'for' attribute is often (and in our case, definitely) required for accessibility reasons. Removing it breaks the link between the label and the input for screen readers and other accessibility assistive devices. It also breaks the fallback behaviour of the label triggering the input for touch devices - creating a larger target.

If there's a clean fix that doesn't break that link, it would be superior.

[jlukic]

ui checkbox that are not initialized with js automatically link labels using an overlayed hidden input. This will still affect screenreaders though. I'll circle back for a different solution.

[malacalypse]

Hi Jlukic,

After some considerable digging with a coworker, the answer seems quite simple.

Let me know if you have any comments.

[jlukic]

Fixed in commit