Screen reader not reading list values while navigating with arrow keys

Issue

I have an input field where a typeahead popup comes on searching for something. The screen reader is unable to read the values of suggestions in the popup.

I am maintaining the focus using $ActiveIndex variable. I am able to navigate the list using only the arrow keys, the screen reader just reads the input text when navigating the popup list and not the actual values in the suggestions

The HTML code is something like this:

<input type="text" 
       class="search" 
       title="Search User" 
       ng-model="vm.SearchText" 
       ng-model-options="{ debounce: 300 }" 
       aria-label="{{ placeholder }}"
       ng-required="requiredattr" />
<ul class="ui list menu typeahead popup-layer vertical" ng-show="vm.MenuShown" ng-mousedown="vm.RetainFocus()">
    <li class="item"
        ng-class="{ active: $index == vm.ActiveIndex }"
        ng-click="vm.Add(match)"
        ng-repeat="match in vm.Matches track by $index">
        <div class="header">
            <i class="ban icon" ng-if="match.Deleted"></i>
            <span ng-bind-html="match.DisplayName"></span> <!-- I want this DisplayName to be read -->
        </div>
    </li>
</ul>

The UI looks like this

The screen reader is just reading "suh" everytime I navigate the results with arrow keys.

Things I have tried:

1. Adding aria-label attribute to list item - Didn't work, I guess the element should be tab focusable for the aria label to be read out.
2. Adding tabindex = -1 to the list item to make it focusable but not navigable. Didn't work either.

Solution

You can use aria-active-descendant attribute and set it to the list options IDs and also use aria-owns property from the input box to refer the list items.

Answered By - Vinay thakur