Принудительные изменения в арии скрыты, чтобы вступить в силу немедленно на Mobile Safari

Question

Я создаю основное меню в HTML с CSS3. Когда вы нажимаете на div, смежный список расширяется или сжимается с использованием перехода CSS. Например:

<style> 
    ul { 
     -webkit-transition: height 200ms linear; 
     overflow: hidden; 
    } 
</style> 
<div>Tap to expand</div> 
<ul style="height: 0" aria-hidden="true"> 
    .... 
</ul> 

На коснувшись div, то ul высота обновляется на сумму высот смещать ее ДЕТСКИЕ и aria-hidden устанавливается для false или удалены. Повторное нажатие устанавливает высоту в 0 и устанавливает aria-hidden="true".

Проблема, с которой я сталкиваюсь, заключается в том, что Mobile Safari не очень хорошо играет со смежными элементами, изменяя их скрытое значение арии. Из некоторых экспериментов он лучше всего работает, если изменяющийся элемент составляет не менее 2 фокуса элементов и происходит изменение DOM. Я экспериментировал со следующим, добавляя <div> в конец документа.

<div>Tap to expand</div> 
<div>x</div> 
<div>x</div> 
<ul><!-- This works --> 


<div>Tap to expand</div> 
<div>x</div> 
<ul><!-- This doesn't --> 

<div>Tap to expand</div> 
<div></div> 
<div></div> 
<ul><!-- Nor does this --> 

Других приемы, как упаковка их в отдельной диве или вставку и удаление двух див прямо перед мишенью не работают. Похоже, VoiceOver уже определил, какой элемент будет играть дальше, когда он сначала выбирает элемент.

Кто-нибудь был успешным с такой доступной функциональностью?

Answer 1

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

Решение заключается в том, чтобы сохранить текст как можно короче, не теряя смысла. Мой фактический текст был намного длиннее, но я уменьшил его до <div role="link">Expand</div>, так что все читатели должны сказать Expand Link или Collapse Link.