浏览器的自动完成/自动填充功能与用于Typeahead的自定义ARIA组合框重叠

Question

我使用W3C中的示例创建了一个组合框元素：https://w3c.github.io/aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html

组合框按预期方式工作；但是，由于某种原因，每当我键入任何内容时，浏览器的自动填充功能都会使组合框重叠。这在Safari和Chrome中经过测试，结果是相同的。这是Safari的屏幕截图：。

如您所见，Safari自动填充与Combobox List Div重叠。这是我拥有的组合框代码：

<div role="combobox" aria-haspopup="listbox" aria-expanded="true" aria-owns="athlete_new_1556737576754-lb">
    <input
       type="text"
       name="athlete_new_1556737576754"
       placeholder="Enter athlete name"
       aria-autocomplete="list"
       aria-controls="athlete_new_1556737576754-lb"
       aria-activedescendant=""
       class="css-nut45z-TypeaheadInput e1b66t4m2"
       value="Gas"
     />
</div>

<ul role="listbox" class=" css-19whxm5-TypeaheadDataList e1b66t4m1">
    <li role="option" class="" aria-selected="false" id="athlete_new_1556737576754-lb-item-0">
        <div class="form_athleteResult__8ZRdN">
            ...
        </div>
    </li>
</ul>

输入名称是根据以下格式athlete_new_${new Date().getTime()}生成的；因此，名称始终是唯一的。另外，我尝试将autocomplete="off"添加到表单和输入中，但是此问题无济于事。如何禁用此用户界面？这种自动填充UI不仅会阻塞视图，还会破坏屏幕阅读器读取列表项的能力，因为SR会读取自动填充UI数据，而不是Typeahead数据（从服务器加载）。