ARIA attributes in ember core form components

Question

I'd like to use ARIA attributes in Ember core form components, such input and textarea fields.

I noticed that using an aria attribute within the component in my template, it doesn't work at all

{{input aria-label="Your name"}}
{{textarea aria-label="Your address"}}

So I decided to reopen the core components in an initializer to add this attribute to the components

export default {
    name: 'reopenTextAreaComponent',

    initialize: function () {
        Ember.TextArea.reopen({
            attributeBindings: ['aria-label']
        });
    }
};

Since I did that, the performance of my application is pretty bad. The integration tests take much more time than before.

I tried not to use their components and simply a HTML tag:

<textarea {{bind-attr aria-label="Your address"}}>{{value}}</textarea>

But this doesn't compile with handlebars! It returns an error because of the {{value}} within the textarea tag.

What is the solution to avoid reopening? Should I create my own component?

Thanks

Answer 1

From Ember 2.8+, the simplest way of doing this is to install ember-component-attributes, like this:

ember install ember-component-attributes

Then you can add aria-label, other ARIA attributes and whatever other attributes you might require as follows:

{{input (html-attributes aria-label="Your name")}}
{{textarea (html-attributes aria-label="Your address")}}

Answer 2

What is the solution to avoid reopening? Should I create my own component?

Those are your two options.

I think you have the correct approach regarding the reopening of Ember.TextArea, because you want to have aria-label available on all instances.

I use a similar initializer - with one difference being that I reopen Ember.TextSupport so that both Ember.TextField and Ember.TextArea will have the aria-label binding.

// initializers/input.js

import Ember from 'ember';

export function initialize(/* application */) {

  Ember.TextSupport.reopen({
      attributeBindings: ['aria-label']
  });

}

You could try creating your own component(s) to see if there is any difference in performance, but I think reopening is the right approach in this case.