JAWS 16 does not read aria-live content inside an ng-messages directive correctly when the content is dynamic

[itsmequinn]

Using JAWS 16 and IE 11 running under Windows 7, JAWS does not read aria-live content within an ng-messages directive correctly if that content is bound dynamically in the template, either using braces or ng-bind. Here is a plunker demonstrating the issue: http://embed.plnkr.co/46W0FrKiBm0CAybWboPO/preview.

Clicking on the toggle button in the plunker reveals the initially hidden ng-message and JAWS reads "left-brace left-brace textLiveText right-brace right-brace", which is the template text. Using ng-bind instead will cause JAWS to pronounce nothing at all. It seems as though the ng-messages element is added to the document without it's template compiled andJAWS is being immediately triggered to announce the live region, which contains the template text rather than it's replacement text.

[itsmequinn]

I am probably not qualified to submit a pull request, but placing a one second timeout around the $animate.enter and $animate.leave calls in the attach and detach methods of the ngMessages controller (here and here) seems to work.

[ateeqrehman]

I am also experience similar issue while using aria-live within a div with ng-if, it reads template in IE and if I use ng-show it does not read anything for the alert message. Do we have any solution for this?

[itsmequinn]

Like I said in my comment on 4/1, if you wrap the calls to $animate.enter and $animate.leave in a 1 millisecond timeout, it fixes the issue. I wound up writing my own custom ngIf directive that does exactly that and it fixed the issue.

[ateeqrehman]

Can you please provide me the custom ngIf directive? I am new to angular and don't know how to use $animate.enter. Thanks for your help.

[itsmequinn]

.directive('ceIf', ['$animate', '$timeout', function($animate, $timeout) {
    return {
        multiElement: true,
        transclude: 'element',
        priority: 600,
        terminal: true,
        restrict: 'A',
        $$tlb: true,
        link: function($scope, $element, $attr, ctrl, $transclude) {
            var block, childScope, previousElements;
            $scope.$watch($attr.ceIf, function ceIfWatchAction(value) {

                if (value) {
                    if (!childScope) {
                        $transclude(function(clone, newScope) {
                            childScope = newScope;
                            clone[clone.length++] = document.createComment(' end ceIf: ' + $attr.ceIf + ' ');
                            // Note: We only need the first/last node of the cloned nodes.
                            // However, we need to keep the reference to the jqlite wrapper as it might be changed later
                            // by a directive with templateUrl when its template arrives.
                            block = {
                                clone: clone
                            };
                            $timeout(function() {
                                $animate.enter(clone, $element.parent(), $element);
                            }, 1);
                        });
                    }
                } else {
                    if (previousElements) {
                        previousElements.remove();
                        previousElements = null;
                    }
                    if (childScope) {
                        childScope.$destroy();
                        childScope = null;
                    }
                    if (block) {
                        previousElements = block.clone;
                        block = null;
                        $timeout(function() {
                            $animate.leave(previousElements).then(function() {
                                previousElements = null;
                            });
                        }, 1);
                    }
                }
            });
        }
    };
}]);

[ateeqrehman]

Thank you so much, your custom if directive works and fixed JAWS issue in IE

[Narretz]

This sounds like a problem with IE / JAWS. Because the element is definitely compiled before it is passed into $animate.enter. Does it work if the aria-live="assertive" attribute is directly on the ngMessage element instead of the paretn element?

[itsmequinn]

No, I had tried all levels of aria-live and placing it on all of the elements involved before resorting to the small custom directive I pasted in. It did work with JAWS 15 but not 16. Not sure why but the directive I made definitely fixes the issue. I'll be the first to admit that JAWS and screen readers in general are quirky though and this may technically be an issue for the JAWS team rather than the Angular team. I would classify my directive as more of a workaround than a fix.

—
Michael Quinn

On Apr 8, 2016, 4:35 PM -0400, Martin Staffanotifications@github.com, wrote:

This sounds like a problem with IE / JAWS. Because the element is definitely compiled before it is passed into $animate.enter. Does it work if the aria-live="assertive" attribute is directly on the ngMessage element instead of the paretn element?

—
You are receiving this because you authored the thread.
Reply to this email directly orview it on GitHub(#11466 (comment))

[Narretz]

If it worked in JAWS 15, then this is a bug / regression in JAWS 16. Have you reported it there?

[mapsuren]

@itsmequinn @ateeqrehman how do I utilize the custom directive? does it replace ng-message?