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

Question

I have an angular 1.5 app that makes extensive use of components. My issue is that the that my custom component tags are failing accessibility testing. My view model templates look like this:

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

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

This will result in this rendered in the live DOM:

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

the my-component tag is not recognized by our testing tools and fails accessibility.

I have looked into transforming the my-component tags to divs, but cannot figure out how. Directives in 1.5 have the replace function. Components in 2.0 have the selector property. I don't believe I can achieve this using transclusion either (because it would my-component's controller would need to reference its parent tag).

Am I thinking about this the right way? Perhaps I should be using ng-Aria for screen readers to ignore these tags? Has anyone run into this problem?

Answer 1

You shouldn't change the element's tag, but you should add aria tags natively when possible, or by angular aria. Read Angular accessibility guide .