javascript - ember 核心表单组件中的 ARIA 属性

Question

我想在 Ember 核心表单组件中使用 ARIA 属性，例如输入和文本区域字段。

我注意到在我的模板的组件中使用 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>

但这不能用 Handlebars 编译!由于 textarea 标记中的 {{value}}，它会返回错误。

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

谢谢

Answer 1

从 Ember 2.8+ 开始，最简单的方法是安装 ember-component-attributes ，像这样:

ember install ember-component-attributes

然后您可以添加 aria-label、其他 ARIA 属性以及您可能需要的任何其他属性，如下所示:

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