Search jQuery

jQuery Forum

jQuery UI Checkbox\Radio Button

in Developing jQuery UI • 11 years ago

Hey all,

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.

The code is posted at https://github.com/bmsterling/jquery-ui/tree/checkboxRadiobutton and a slightly outdated version is at http://benjaminsterling.com/jquery-ui-checkboxradio-buttons/ for quick viewing. (there were some minor improvements between the two.)

Replies(6)

joern.zae..

Re: jQuery UI Checkbox\Radio Button

11 years ago

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

benjamin...

Re: Re: jQuery UI Checkbox\Radio Button

11 years ago

Yup, looked at the branch and the version of checkbox that was in it and had our accessibility person run all her tests on it and, well, didn't pass, so that is why I wrote it from scratch.

joern.zae..

Re: jQuery UI Checkbox\Radio Button

11 years ago

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.

benjamin...

Re: Re: jQuery UI Checkbox\Radio Button

11 years ago

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.

joern.zae..

Re: jQuery UI Checkbox\Radio Button

11 years ago

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.

Current state: http://view.jqueryui.com/formcontrols/tests/visual/checkbox/checkbox.html

benjamin...

Re: Re: jQuery UI Checkbox\Radio Button

11 years ago

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.

Top Reply

Response title

Attachments

jQuery Forum

jQuery UI Checkbox\Radio Button

Replies(6)

Re: jQuery UI Checkbox\Radio Button

Re: Re: jQuery UI Checkbox\Radio Button

Re: jQuery UI Checkbox\Radio Button

Re: Re: jQuery UI Checkbox\Radio Button

Re: jQuery UI Checkbox\Radio Button

Re: Re: jQuery UI Checkbox\Radio Button

Statistics

Tags

Actions

Related Posts