Не можете установить focus () для элемента с индексами табуляции с дочерними элементами в мобильном Safari?

Question

В рамках некоторой a11y-работы, которую я недавно выполнял для одностраничного приложения, я добавил код, который вызывает focus() в заголовке страницы всякий раз, когда загружается новая страница.Это прекрасно работает на настольном компьютере и корректно читается программой чтения с экрана, но полностью теряет связь с VoiceOver в мобильном Safari.

После нескольких часов отладки и поиска в Google я обнаружил, что при попытке сфокусироваться на элементе (который обычно не фокусируется) с дочерними элементами, похоже, не получается.

Пример кода:

<div id="header1" tabindex="-1">Hello world</div>
<div id="header2" tabindex="-1">Goodbye <span>cruel cruel</span> world</div>

Затем включите VoiceOver в Safari и попробуйте позвонить:

document.getElementById('header1').focus();

И обратите внимание, что он читается, но

document.getElementById('header2').focus();

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

Answer 1

Звучит неправильно.Вы можете попробовать две разные вещи:

1. добавить tabindex="-1" к внутреннему <span>.Я сомневаюсь, что это будет что-то делать, но, возможно, не фокусируемая природа внутреннего элемента влияет на родительский элемент.

2. используйте недокументированное role="text" на внешнем <div>.Это приведет к тому, что весь

   будет обрабатываться как один элемент, а не обрабатывать внутренний элемент как отдельную «остановку табуляции» VoiceOver.Это, вероятно, имеет больше шансов исправить проблему.

<div role="text" id="header2" tabindex="-1">Goodbye <span>cruel cruel</span> world</div>