ARIA属于ember核心表单组件

Question

我想在Ember核心表单组件中使用ARIA属性,例如输入和textarea字段.

我注意到在我的模板中使用组件中的aria属性,它根本不起作用

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

所以我决定在初始化程序中重新打开核心组件,将此属性添加到组件中

export default {
    name: 'reopenTextAreaComponent',

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

自从我这样做以来,我的应用程序的性能非常糟糕.集成测试比以前花费更多时间.

我尽量不使用他们的组件,只是一个HTML标签:

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

但这不能用把手编译!由于{{value}}textarea标记内部,它返回错误.

避免重新开放的解决方案是什么？我应该创建自己的组件吗？

谢谢

Answer 1

避免重新开放的解决方案是什么？我应该创建自己的组件吗？

这是你的两个选择。

我认为您对于重新开放 采取了正确的方法Ember.TextArea，因为您希望aria-label在所有实例上都可用。

我使用类似的初始值设定项 - 不同之处在于我重新打开，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']
  });

}

您可以尝试创建自己的组件来查看性能是否有任何差异，但我认为在这种情况下重新打开是正确的方法。