View.applyAttributeBindings and aria-checked do not work as expected


#1

I use an attribute binding to bind the aria-checked property to a custom component:

  attributeBindings: [
    'checked:aria-checked'
  ],

I expect the attribute aria-checked to be either true or false depending on the value of the checked attribute. But the aria-checked attribute is always missing. I debugged this case a bit and found out that aria-checked is set as a property (using .prop) in the applyAttributeBindings method. I assume that it should be set using .attr instead. So in my opinion, the first if branch should also handle boolean values. Does it make sense? A bug or an intended behavior? other aria attributes are shown as attributes - e.g. aria-labelledby. But I assume it’s because the value type is string in this case.

Ember 1.8.1

View.applyAttributeBindings = function(elem, name, value) {
  var type = typeOf(value);

  // if this changes, also change the logic in ember-handlebars/lib/helpers/binding.js
 // missing boolean type here??
 if (name !== 'value' && (type === 'string' || (type === 'number' && !isNaN(value)))) {
    if (value !== elem.attr(name)) {
      elem.attr(name, value);
    }
  } else if (name === 'value' || type === 'boolean') {
    if (isNone(value) || value === false) {
      // `null`, `undefined` or `false` should remove attribute
      elem.removeAttr(name);
      // In IE8 `prop` couldn't remove attribute when name is `required`.
      if (name === 'required') {
        elem.removeProp(name);
      } else {
        elem.prop(name, '');
      }
    } else if (value !== elem.prop(name)) {
      // value should always be properties
      elem.prop(name, value);
    }
  } else if (!value) {
    elem.removeAttr(name);
  }
};