AngularJS 1.5：用html标签替换组件标签

Question

我有一个Angular 1.5应用程序，可以广泛使用组件。 我的问题是自定义组件标签的可访问性测试失败。 我的视图模型模板如下所示：

<my-component data='myModel'></my-component>

<script type="text/ng-template" id=myComponent.html">
    <pre> {{ data | json }} </pre>
</script>

这将导致它在实时DOM中呈现：

<my-component data='myModel'>
    <pre>
        ...
    </pre>
</my-component>

我的测试工具无法识别my-component标签，并且无法访问。

我已经研究过将my-component标记转换为div，但无法弄清楚该怎么做。 1.5中的指令具有替换功能。 2.0中的组件具有选择器属性。 我也不相信我可以使用包含来实现这一点（因为my-component的控制器将需要引用其父标记）。

我在考虑正确的方法吗？ 也许我应该为屏幕阅读器使用ng-Aria来忽略这些标签？ 有没有人遇到这个问题？

Answer 1

您不应该更改元素的标签，但是应该在可能的情况下本机添加aria标签，或者通过角度aria添加。 阅读Angular辅助功能指南 。