[英]ARIA attributes in ember core form components
I'd like to use ARIA attributes in Ember core form components, such input and textarea fields. 我想在Ember核心表单组件中使用ARIA属性,例如输入和textarea字段。
I noticed that using an aria attribute within the component in my template, it doesn't work at all 我注意到在我的模板中使用组件中的aria属性,它根本不起作用
{{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: 我尽量不使用他们的组件,只是一个HTML标签:
<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. 由于textarea标记中的
{{value}}
,它会返回错误。
What is the solution to avoid reopening? 避免重新开放的解决方案是什么? Should I create my own component?
我应该创建自己的组件吗?
Thanks 谢谢
From Ember 2.8+, the simplest way of doing this is to install ember-component-attributes , like this: 从Ember 2.8+开始,最简单的方法是安装ember-component-attributes ,如下所示:
ember install ember-component-attributes
Then you can add aria-label, other ARIA attributes and whatever other attributes you might require as follows: 然后,您可以添加aria-label,其他ARIA属性以及您可能需要的任何其他属性,如下所示:
{{input (html-attributes aria-label="Your name")}}
{{textarea (html-attributes aria-label="Your address")}}
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. 我认为你有关于重新打开
Ember.TextArea
的正确方法,因为你想在所有实例上都有aria-label
。
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. 我使用了一个类似的初始化程序 - 一个区别是我重新打开
Ember.TextSupport
以便Ember.TextField
和Ember.TextArea
都具有aria-label
绑定。
// 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. 您可以尝试创建自己的组件以查看性能是否有任何差异,但我认为在这种情况下重新打开是正确的方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.