Aria live and angular pages

[Anubhav Mitra]

Hello members
I am trying to implement aria live function on a angular page. please find below a sample code which i am implementing

Start of code

/*  highlights JSON data, it updates in every 30 second timeinterval */

/* issues : always read from 0 index to last item */

<ul aria-live="polite" aria-atomic="false" aria-relevant="additions">

   

    <li class="matchday-blogs" ng-repeat="highlight in highlights">

        <div class="matchday-blogs__info">

            <p class="matchday-blogs__title">

                <span class="matchday-blogs__tag" ng-class="eventIcon(highlight.eventtype_t, true, true)"></span>{{::highlight.eventtext_t}}

            </p>

            <p class="matchday-blogs__teasure">{{::highlight.blogheading_t}}</p>

        </div>

        <p class="blogs-time">{{getHours(highlight.matchtimer_t,highlight.matchstage_t)}}<span class="screenreader">ago</span></p>

    </li>

</ul>

 

/*  match scores updates in live match */

/* HomeTeam = Team-A   ,  AwayTeam = Team-B */

/* issue : NVDA or Jaws is not reading updated score */

 

<span  aria-live="polite" aria-atomic="true">{{spotItem.optacontent.value[0].MatchDataList[0].HomeTeam.Score}} - {{spotItem.optacontent.value[0].MatchDataList[0].AwayTeam.Score}} </span>

End of code
the information is being updated dynamically from back-end in li and as soon as new item got added, screen reader is reading entire list again and again. I want that screen reader should only read newly added item only i tried aria-relevant="additions" as well but then also, it is reading entire list again.
does anyone has any idea how to fix it?
Thanks
Anubhav Mitra