Html 无障碍引导手风琴内置下拉菜单

我已经按照Bootstrap推荐的标记实现了一些手风琴，但它并不完全符合ARIA。我正在考虑做这样的事情：

然而，当我按tab键和箭头键、空格键和enter键时，行为并不是预期的。引导程序无法处理关键事件，并且某些aria属性丢失和/或未正确更新（例如，aria已选择，tabindex）

我曾尝试将JavaScript代码集成到可访问的示例中，但我认为它并不像我希望的那样平滑

我有这个密码笔

... 这是面板标题
... 下面是面板内容

有几个问题：

第一次尝试在第二个和最后一个面板中显示（按空格键或输入键），请不要在第一次尝试时打开。也许只是一个标记问题？或者我的代码中是否有任何错误，有人可以帮我发现

有没有可能不用这个特殊的脚本，只指定符合aria的标记，就可以在引导程序中实现这一点

如果答案是否定的，那么将其转换为引导插件的最佳方式是什么？有人能告诉我写引导插件的正确途径吗

---

提前谢谢

要回答第一个问题，HTML标记和TablPanel.togglePanel（）代码存在问题

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

但是，在标记中，所有div.panel-collapse都未定义aria hidden，因此tabPanel假定它们可见并将其隐藏，设置aria hidden=true。（然后第二次单击会发现aria hidden'因为现在它已被设置，并将其设置为false并显示面板）

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

---

至于其余的，我不相信你可以单独使用Bootstrap/aria标记来实现你想要的，用于手风琴行为的Bootstrap JS代码（collapse.JS）没有实现aria selected、aria hidden或键盘侦听器，所以你必须编写一个插件。唉，我从来没有这样做过/

刚刚在bootstrap中发现了一个旧的已解决问题--显然它将在v4中得到解决

<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>