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>

但这不能用把手编译！由于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")}}

Answer 2

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

这是你的两个选择。

我认为您有关重新开启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']
  });

}

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

ARIA属于ember核心表单组件

2 个答案: