Мы используем аккордеон Bootstrap 3 (v3.3.5), и он отлично работает, пока на iPad iPad (iOS v9.1) не включен экранный ридер. Как только экранное устройство включено, аккордеоны больше не будут расширяться/сжиматься для аккордеонов с более короткими ярлыками (метки, занимающие менее 50% доступного пространства). Более короткая проблема с этикеткой согласована, когда экран поворачивается между пейзажем и портретом. Эту проблему можно исправить, сделав ярлыки более 50% доступного пространства или центрируя их. К сожалению, центрирование или расширение ярлыка не является вариантом для нашей команды.Bootstrap 3 аккордеон expand/collapse перестает работать с iPad-ридером для экрана включен
Это, кажется, проблема с Bootstrap 3, а не с Bootstrap 2. Я указал на пример аккордеона bootstrap 2 (http://getbootstrap.com/2.3.2/javascript.html#collapse) и включил устройство чтения с экрана на iPad, и он отлично работал. Затем я указал на пример аккордеона bootstrap 3 (http://getbootstrap.com/javascript/#collapse) и включил устройство чтения с экрана на iPad, и он не смог развернуть/свернуть аккордеон.
Кто-нибудь нашел исправление или другое обходное решение? Возможно, нам не хватает атрибута для исправления проблемы или чего-то еще.
Вот код, который мы используем в нашем аккордеона:
<div class="row" id="A">
<div class="col-md-12 col-sm-12 col-xs-12 content">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingA">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#contentA" aria-expanded="false" aria-controls="contentA">This label is to short for any screen
<span class="sr-only sr-only-focusable" id="toggleA">show content</span>
</a>
</h4>
</div>
<div id="contentA" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingA">
<div class="panel-body">
<p>This label is to short to expand/collapse this content on any iPad screen with the screen reader enabled.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingB">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#contentB" aria-expanded="false" aria-controls="contentB">This label works on portrait/landscape screen and will expand/collapse accordion
<span class="sr-only sr-only-focusable" id="toggleB">show content</span>
</a>
</h4>
</div>
<div id="contentB" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingB">
<div class="panel-body">
<p>This label is long enough to expand/collapse this content on the iPad portrait and landscape screens with the screen reader enabled.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingC">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#contentC" aria-expanded="false" aria-controls="contentC">This label works on portrait screen not landscape
<span class="sr-only sr-only-focusable" id="toggleC">show content</span>
</a>
</h4>
</div>
<div id="contentC" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingC">
<div class="panel-body">
<p>This label is long enough to expand/collapse this content on the iPad portrait screen but not the landscape with the screen reader enabled.</p>
</div>
</div>
</div>
</div> <!-- End panel group -->
</div>
</div>
Спасибо
Когда вы говорите «это не удалось», какое действие вы делаете на экране? единственный кран? двойное нажатие? – Adam
двойной кран. Однократное нажатие по-прежнему считывает метку. Двойной щелчок читает метку, а не разворачивает/сворачивает содержимое. – vic3361201
Эта проблема была окончательно решена кем-то из команды. Это было связано с атрибутами арии. Они удалили эти атрибуты и начали работать. role = "tablist", role = "tabpanel" и role = "tab". Они также удаляют aria-multiselectable = "true", но я не думаю, что это повлияло. – vic3361201