Как вы можете заставить сосредоточиться на элементе для поддержки передачи голоса ios?

#javascript #html #ios #accessibility

Вопрос:

Есть ли способ заставить голос ios сосредоточиться на определенном элементе после взаимодействия с пользователем?

Я попробовал версию следующего примера в кодовой базе React, используя метод фокусировки на элементе select при выборе опции, однако, хотя это работает в веб-браузере, на устройстве ios это не работает, вместо этого фокус перемещается на то, что стояло за выбранной опцией.

Так, например, если была выбрана опция «Saab», я бы хотел, чтобы пользователь оставался в раскрывающемся списке, но вместо этого он попадает в элемент div, который находился за раскрывающимся списком Saab.

Используя программу чтения с экрана в браузере, я вижу, что метод фокусировки работает, чтобы удерживать пользователя в раскрывающемся списке, но на устройстве ios с голосом за кадром фокус переключается на элемент позади.

     handleChange = (e) => {
  document.getElementById("cars").focus({preventScroll: true});
}

<select id="cars" name="cars" id="cars" onChange = (e) => {this.handleChange(e)}>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
 

Комментарии:

1. Этот пример работает на моем iphone. Я дважды нажимаю на кнопку, и фокус VO перемещается в поле ввода и объявляет об этом.

2. Я не могу понять, какую проблему вы имеете в виду на примере. Вы хотите сказать, что делаете это в открытом раскрывающемся списке, а затем, когда он закрывается, индикатор фокусировки остается там, где он был? Можете ли вы создать игру с реальной проблемой, чтобы мы могли помочь?

3. Извините, что это было сформулировано плохо, я имел в виду скрипку, которая воспроизводит проблему, как я вижу, вышесказанное может плохо читаться!

4. @GrahamRitchie извините, что не прояснил, я попытался добавить более близкий пример и объяснить лучше. По сути, я хочу, чтобы фокус оставался на раскрывающемся элементе выбора после выбора одного из вариантов выбора, но вместо этого выбирается опция, а затем фокус остается на чем-то, что находится за выбранной опцией, что может быть другим элементом или кнопкой.

5. @jobe хммм, это отлично работает для меня, вы используете фреймворк или это ваниль? Тот же вопрос для <select> самого, это просто ванильный HTML5 <select> или из библиотеки? В качестве заключительной части тайны, если вы выберете вариант из <select> списка, то <select> он все равно должен быть сфокусирован, так что вам это не понадобится, поэтому мне интересно, не мешает ли что-то нормальному поведению.