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

如何解决使用箭头键导航时屏幕阅读器不读取列表值

我有一个输入字段，在其中搜索某些内容时会弹出一个预先输入的弹出窗口。屏幕阅读器无法读取弹出窗口中建议的值。

我使用 $ActiveIndex 变量保持焦点。我只能使用箭头键浏览列表，屏幕阅读器在浏览弹出列表时只读取输入文本，而不是建议中的实际值

HTML 代码是这样的：

<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>

界面如下

每次我用箭头键浏览结果时，屏幕阅读器只会读“suh”。

我尝试过的事情：

将 aria-label 属性添加到列表项 - 不起作用，我想该元素应该是标签可聚焦的，以便读出 aria 标签。
向列表项添加 tabindex = -1 以使其可聚焦但不可导航。也没有用。