Автозаполнение браузера / автозаполнение перекрывает пользовательский ARIA Combobox для Typeahead - PullRequest
Новая
       36

Автозаполнение браузера / автозаполнение перекрывает пользовательский ARIA Combobox для Typeahead

0 голосов
/ 01 мая 2019

Я создал элемент комбинированного списка, который использует примеры из W3C: https://w3c.github.io/aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html

Combobox работает как положено; однако по какой-то причине автозаполнение браузера перекрывает комбинированный список всякий раз, когда я что-либо печатаю. Это проверено в Safari и Chrome, и результат тот же. Вот скриншот из Safari: Browser Autofill overlaps combobox list DIV.

Как видите, автозаполнение 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" в форму и на вход, но ничего не помогло с этой проблемой. Как я могу отключить этот интерфейс? Этот пользовательский интерфейс автозаполнения не только блокирует представление, но и нарушает способность программ чтения с экрана читать элементы списка, поскольку SR считывает данные пользовательского интерфейса автозаполнения вместо данных Typeahead (загрузка с сервера).

...