屏幕阅读器在使用箭头键导航时未读取列表值

Question

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.

Answer 1

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.