JAWS reads Angular code

[m80her]

Summary

In a AngularJS application, JAWS reads the pre-compiled HTML content instead of the compiled HTML content. For instance, if I have the following HTML:

<li ng-repeat="item in items">{{item.name}}</li>

Expected result

If a new element that looks like {name: 'Widget x'} is added to items, expected result would read "Widget x".

Actual result

JAWS reads "left brace left brace item dot name right brace right brace".

Example

plunkr using snapshot version of Angular

Additional Information

this is a copy of the issue raised here angular/angular.js#15079

JAWS version and build number

2018.1808.10 ILM Professional Edition

Operating System and version

Windows 10 Pro, v1709, build 16299.309

Browser and version:

IE11, v11.309.16299.0, 11.0.56

[stevefaulkner]

@m80her I can reproduce. Will file a bug on JAWS internally

[stevefaulkner]

filed- Bug 103329: JAWS Reading Precompiled HTML content in an AngularJS Application

[akegan]

I'm running into this issue with my AngularJS application and JAWs as well. Is there an update on the internally-filed bug?

[corinnaSchultz]

Maybe a workaround could be to wrap the entire page in an aria-live region so when Angular updates things, JAWS will notice?

[JAWS-test]

Maybe a workaround could be to wrap the entire page in an aria-live region so when Angular updates things, JAWS will notice?

theoretically aria-busy=true should help. When all updates are done, the page will be set to aria-busy=false and JAWS will start evaluating the updated content: https://www.w3.org/TR/wai-aria-1.1/#aria-busy

[JAWS-test]

Tested with JAWS 2019 and the current browser versions

• The cause of the problem is that first the angular code is inserted into the live region, this leads to the output of the code, and only then the code is replaced by the text.
• The problem does not occur in Firefox and Chrome. Why it doesn't occur in the two browsers is unclear to me. Probably it has to do with the fact that IE 11 does not support a lot of JS methods and Angular then uses workarounds that are slower so that the Live Region is already activated when the code is inserted. In general, the new list entries are output correctly (e.g. when reading with the arrow keys), only within the Live Region it doesn't work.
• aria-busy will theoretically help here, unfortunately aria-busy doesn't work correctly in IE 11 (aria-busy does not work in live region #257). I.e. the only solution would be to insert the text in live regions instead of code.

[TPGJRogers]

Issue is marked IE11. Closing.