Accessible Ember buttonset component.

application.hbs

<!-- see http://jsbin.com/erIBAba/1 -->

<h1>Buttonset example</h1>

{{#zp-buttonset bindTo=filter}}
  {{zp-button label="Open"}}
  {{zp-button label="Upcoming"}}
  {{zp-button label="Closed"}}
{{/zp-buttonset}}

application_controller.js

ApplicationController = Ember.Controller.extend({
  filter: null
});

zp-button.hbs

<button type="button"
        role="radio"
        {{bindAttr class="isSelected:selected"}}
        {{bindAttr aria-checked="isChecked"}}>
  {{label}}
</button>

zp-buttonset.hbs

{{yield}}

zp_button.js

ZpButtonComponent = Ember.Component.extend({
  didInsertElement: function() {
    this.get('parentView').addButton(this);
  },
  
  click: function() {
    this.get('parentView').select(this);
  },
  
  isSelected: function() {
    return this.get('parentView.selected') === this;
  }.property('parentView.selected'),
  
  isChecked: function() {
    return this.get('isSelected').toString();
  }.property('isSelected')
});

zp_buttonset.js

ZpButtonsetComponent = Ember.Component.extend({
  classNames: ['buttonset'],
  
  attributeBindings: ['role'],
  
  role: 'radiogroup',
  
  selected: null,
  
  buttons: [],
  
  addButton: function(button) {
    if (this.get('buttons').length === 0) this.select(button);
    this.get('buttons').addObject(button);
  },
  
  select: function(button) {
    this.set('bindTo', button.get('label'));
    this.set('selected', button);
  }
});