下拉菜单中的可访问引导手风琴答案

【问题标题】：Accessible Bootstrap Accordion inside Dropdown下拉菜单中的可访问引导手风琴
【发布时间】：2016-03-22 19:29:12
【问题描述】：

我已经按照 Bootstrap 推荐的标记实现了一些手风琴，但它并不完全符合 ARIA。我正在寻找这样的东西：

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

但是，当我点击制表符和箭头、空格并输入键盘键时，行为不是预期的。 Bootstrap 不处理关键事件，并且某些 aria 属性丢失和/或未正确更新（即 aria-selected、tabindex）

我已经尝试在可访问的示例中集成 JavaScript 代码，但我认为它并不像我希望的那样流畅。

我有这个密码笔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>

几个问题：

第一次尝试在第二个和最后一个面板中显示（按空格键或 Enter 键），第一次尝试时不要打开。也许只是一个标记问题？或者我的代码中是否有任何可以帮助我发现的错误...
是否可以在 Bootstrap 中实现此功能，而无需使用此特殊脚本并仅指定符合 aria 标准的标记？
如果答案是否定的，将其转换为 Bootstrap 插件的最佳方法是什么？谁能指出我编写 Bootstrap 插件的正确路径？

提前致谢！

【问题讨论】：

刚刚在 bootstrap 中发现了一个已关闭的旧问题 - github.com/twbs/bootstrap/pull/14295 - 显然它将在 v4 中得到解决

标签： html twitter-bootstrap-3 wai-aria

【解决方案1】：

要回答您的第一个问题，您的 HTML 标记和 TablPanel.togglePanel() 代码存在问题。

togglePanel() 接收选项卡（div.panel-heading），然后查看子面板。 (div.panel-collapse) 它检查“aria-hidden”属性，如果它为真（面板被隐藏），则将其设置为假。（显示面板）

但是，在您的标记中，所有 div.panel-collapse 的 aria-hidden 未定义，因此 tabPanel 假定它们是可见的并隐藏它们，设置 aria-hidden=true。（第二次点击会找到 aria-hidden 'cuz 现在它已经设置好了，它设置为 false 并显示面板）

在未打开的 div.panel-collpase 上设置 aria-hidden=true，然后一切都会好起来的。 :)

至于其余部分，我不相信您可以单独使用 Bootstrap/aria 标记来做您想要的事情，手风琴行为 (collapse.js) 的 Boostrap JS 代码没有实现 aria-选定的、隐藏的 aria-hidden 或键盘侦听器，因此您必须编写一个插件。唉，我从来没有做过。：/

【讨论】：