demo(buttons): use labels instead of buttons for groups

[bekos]

Closes #1323.

[pkozlowski-opensource]

@bekos is it enough? I was under the impression that we need an input field inside a label. But maybe not!

[bekos]

@pkozlowski-opensource I don't think we need an input. Bootstrap just hides it. All the other CSS rules apply to btn.

[pkozlowski-opensource]

@bekos I see. My only real concern (which I should have voiced previously!) is about accessibility. I simply don't know how this all is going to work with screen readers. But I guess we can look into it while dealing with aria issues. Which is one of the big topics I would like to tackle next year.

[bekos]

@pkozlowski-opensource Hmm. You are right. Didn't think of it, but yes we need to tackle all these things about accessibility soon. Because it is just the demo, we can also add an input inside the label that is binded to the model. What about this?

[pkozlowski-opensource]

Not sure, we need to play with it. I suspect that BS guys are adding the input inside so screen-readers see input, but I'm really not sure and would like to better understand this.

[bekos]

I don't think input is there only for screen readers. Bootstrap handles traditional applications and a button click should correspond to a trigger on a checkbox I suppose.

[ajoslin]

Looked it up a little bit, and found this article: http://www.marcozehe.de/2013/04/24/easy-aria-tip-6-making-clickables-accessible/

With this quote (within the example of a span becoming marked as clickable):

In our case, even though the styling makes the span visually look like a button, the screen reader is not able to deduce that from the HTML and CSS instructions. To help it, you add role="button" to the element that receives the click.

The aria attributes are used over tag names to show something clickable. So yes, as far as I can see we can have a clickable label and it will work with screen readers once we add aria attributes.

Just pulled it down, and it works great without conflicts. Going to merge.

[meerkatlookout]

Hey there boffins,
Now that checkboxes and radios are using labels instead of buttons, I can't seem to get keyboard tabbing and/or spacebar activation working?

I had hoped it would be a simple matter of adding tabindex="0" to the label but as discussed here:
http://stackoverflow.com/questions/9810190/can-you-make-label-tags-keyboard-focusable-in-safari-chrome-old-firefox

it's not really properly supported.

For example the demo checkboxes and radios at http://angular-ui.github.io/bootstrap/ don't seem to be keyboard accessible (apart from the toggle cos that still uses a button)

Bootstrap has an issue here so maybe this needs to filter down into the next Angular UI update?
twbs/bootstrap#13907

Does anyone know of a workaround?