Wanted to see if I can get some feedback; I've been really trying to fully grasp jQuery UI Widget structure and recently I had a project where we need styled Checkboxes and radio buttons. After evaluating the ones out there and reading the wiki I decided that I should just build a widget from scratch. I had been working with Dojo and Dijit and they seem to be doing it the most right, so I used their approach to get started. I know checkboxes and radio buttons were not part of the 1.9 milestone but would appreciate any feedback I can get.
Haven't yet gotten around to checking out your code, so far now: This is something we need to work on as part of the jQuery UI Grid anyway, so your help is very welcome. We also have a very very old branch for this: https://github.com/jquery/jquery-ui/tree/formcontrols
One thing that I noticed in your demos is that while you can use the keyboard to tab around and check and uncheck them, you don't actually can see what currently has focus (testing in Chrome). Visible focus is pretty important for keyboard access.
I agree with the visual aspect, I was trying to use only core themeroller classes and the hover/focus selector doesn't pop. I'll look into that a bit later. In the site I am working on now has none themeroller specific elements that does have a visual for focus and for hover.
Just updated the formcontrols branch to latest master, fixed the visual demo, a few minor changes in the implementation itself, and more importantly, set the aria-checked attribute on the visual wrapper. Haven't tested it in a screenreader, yet. But looking at your impl, setting aria-checked looks like the better choice compared to aria-pressed.
So the main issue I have with that implementation, and I say this from experience working with the version that is done on http://www.yourotheraddress.com/form_signup.asp (it's a radio button there but it's the same for checkboxes) is that we are taking the input out of the picture. Meaning, we are binding most of the events to the element we are creating and not the input which doesn't seem quite right.
The other concern is that the assumption seems to be that the label will always be next to the checkbox. Is this correct?
The thing I like about the Dijit approach is that, for the most part, no extra markup is need outside of the checkbox/radio button being wrapped.
Leave a comment on joern.zaefferer's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic