How to enable aria-label on input helper

Questions
1

How can I enable aria-label on the ember input helper for screenreader support?

{{input value=firstname name="MERGE1" aria-label=(t 'app.components.ember-chimp.firstName' htmlSafe=true) placeholder=(t 'app.components.ember-chimp.firstName' htmlSafe=true)}}

See Chrome Lighthouse Audit for Accessibility on the Ember site: https://www.martinic.com/en

2

I have two answers for you.

In the short term, you can “reopen” {{input}} component provided by Ember to enable the ability to bind the aria-label attribute, or any other attributes you need to make your component accessible. See https://www.krivaten.com/blog/2017-03-21-accessible-input-component/ for a great write up on this (and the whole series is great if you want to learn more about accessibility in Ember).

Longer term, making people jump through hoops to get something as simple as an extra HTML attribute is not ideal, and defeats our goal of making a11y as easy as possible. We just merged the “Angle Bracket Invocations for Built-in Components” RFC: http://emberjs.github.io/rfcs/.

Once this is implemented, you’ll be able to rewrite your example like this:

<Input
  @value={{firstname}}
  name="MERGE1"
  aria-label={{t 'app.components.ember-chimp.firstName' htmlSafe=true}}
  placeholder={{t 'app.components.ember-chimp.firstName' htmlSafe=true}} />

In short, anything prefixed with an @ is passed as an argument to the component, and anything without the @ prefix (i.e. it looks like a normal attribute) is set on the underlying input tag.

2 Likes
3

Thanks for pointing in the right direction. The blog post is awesome. We are on Ember 3.4 now and hope to switch to “Angle Bracket Invocations for Built-in Components” as soon as it is implemented. We ended up initializing the private Ember.TextSupport to support aria-label for a11y like this:

app/initializers/aria.js

import Ember from 'ember';

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

export default { initialize };

We hope to remove this patch as soon as possible.