Доступный бутстрап-аккордеон внутри раскрывающегося списка

Question

Я реализовал несколько аккордеонов после рекомендуемой разметки Bootstrap, но не полностью совместим с ARIA. Я смотрю на имеющие что-то вроде этого:

http://oaa-accessibility.org/examplep/accordian1/

Однако при закладке и стрелку, пробел я ударил и ввести клавиши клавиатуры, поведение не ожидается. Bootstrap не обрабатывает ключевые события, а некоторые атрибуты aria отсутствуют и/или не обновлены должным образом (т. Е. Выбранные арии, tabindex)

Я попытался интегрировать код JavaScript в доступный пример, но я думаю, что это не совсем так гладко как хотелось бы.

У меня есть этот codepen http://codepen.io/anon/pen/jWWewr

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
    <div class="panel panel-default"> ... here goes the panel-heading 
    </div> 
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> ... here goes the panel contents 
    </div> 
</div> 

пар вопросы:

1. Первый раз пытаюсь показать (нажмите пробел или введите ключи) во второй и последней панели, не откроются первая попытка. Может быть, проблема с разметкой? или у меня есть какие-то ошибки в коде, которые кто-то может мне помочь ...
2. Возможно ли получить эту работу в Bootstrap без специального скрипта и просто указать разметку, совместимую с ариями?
3. Если ответ отрицательный, какой был бы лучший способ конвертировать его в плагин для Bootstrap? может ли кто-нибудь указать мне правильный путь в написании плагинов Bootstrap?

Заранее благодарен!

Answer 1

Чтобы ответить на ваш первый вопрос, есть проблема с вашей разметкой HTML и кодом TablPanel.togglePanel().

togglePanel() получает вкладку (заголовок раздела div.panel), а затем смотрит на детские панели. (div.panel-collapse) Он проверяет атрибут «aria-hidden», и если он прав (панель скрыта), установите значение false. (показать панель)

Тем не менее, в вашей разметке все div.panel-collapse имеют aria-hidden undefined, поэтому tabPanel предполагает, что они видны и скрывают их, устанавливая aria-hidden = true. (Второй щелчок затем обнаруживает скрытую арию, потому что теперь она установлена, и она устанавливает значение false и показывает панель)

Установите aria-hidden = true на свою неоткрытую div.panel-collpase, а затем все должно быть хорошо. :)

Что касается остальных, я не думаю, что вы можете делать то, что ищете, используя только ботстрап/арию, код Boostrap JS для поведения аккордеона (collapse.js) не реализовать выбранные арии, скрытые от арии или прослушиватели клавиатуры, поэтому вам нужно будет написать плагин. Который, увы, я никогда не делал. :/