Search code examples
javascriptinternet-explorerangular5accessibilityjaws-screen-reader

Jaws does not read the anchor tag(show/hide) text change when clicking on enter in IE


Jaws does not read the anchor tag text change like show/hide in password field when clicking on enter in IE

I have a link(show/hide) inside password field. link text is changing on click on that. When i used Jaws screen reader , on tab it is reading it first time then it is not reading any text change in link label.

I checked with document.activeElement on the same DOM. But focus remain same on the same element.

For show/hide i created one link and based on click i am changing the innerHtml of the same element.

        <a id="pwdShowHideLink" class="-book show-hide-link" href="javascript:void(0)" (click) = "showHide($event)">
            {{labels?.showLink}}
        </a>
    showHide($event) {
const target = $event.target;
if(target && target.innerText === this.labels.showLink){
    target.innerHTML = this.labels.hideLink ;
 } else {
    target.innerHTML = this.labels.showLink;
}

}


Solution

  • It's not clear what you're asking for. It sounds like you're asking about one of these problems:

    1. Are you saying that you are changing the value of a link and when the text changes, the change is not announced as it happens?
    2. Or are you saying that after the link text is changed, if you navigate off that element and then back on to it, that the new text is not read?

    Problem #1 requires using aria-live.

    <a aria-live="polite" id="pwdShowHideLink" class="-book show-hide-link" href="javascript:void(0)" (click) = "showHide($event)">
      {{labels?.showLink}}
    </a>
    

    Problem #2 would require more sample code. If you can visually see your text change but the screen reader is not reading the new text, that would be an odd situation that I can't diagnose without seeing the code.