Accessibility Insights检测到网页TabList无障碍问题，求解决方案

第一类错误：tablist 元素包含不允许的子元素/缺少 aria-busy 属性 #

• 元素路径：div[ng-repeat="filter in c.filtersList"][ng-switch="filter.type"][ng-if="filter.active"]:nth-child(3) > .ng-scope[ng-switch-when="ACCORDION"] > uib-accordion > .panel-group[role="tablist"][ng-transclude=""]
• 问题代码片段：

<div role="tablist" class="panel-group" ng-transclude=""></div>

• 关联元素：#accordiongroup-2021-518-panel
• 检测提示：修复以下任一问题：元素包含不允许的子元素（见关联路径）；元素缺少aria-busy="true"属性

修复思路：
根据WAI-ARIA规范，role="tablist"的直接子元素必须是带有role="tab"的节点，不能直接包含role="tabpanel"的元素（即关联的#accordiongroup-2021-518-panel）。优先调整DOM层级，确保tabpanel不是tablist的直接子节点，让tab作为tablist的直接子元素，tabpanel与tab保持正确的层级关联。
如果是动态加载内容导致的检测误报，可临时给tablist添加aria-busy="true"，内容加载完成后移除该属性，但结构调整是更合规的解决方案。

第二类错误：tab 元素包含可聚焦子元素 #

• 元素路径：#accordiongroup-2021-518-tab
• 问题代码片段：

<div role="tab" id="accordiongroup-2021-518-tab" aria-selected="true" class="panel-heading" ng-keypress="toggleOpen($event)"></div>

• 关联元素：a[aria-controls="accordiongroup-2021-518-panel"]
• 检测提示：元素包含可聚焦的子元素

修复思路：
带有role="tab"的元素本身需要具备可聚焦性（通常通过tabindex="0"实现），但其内部不能嵌套其他可聚焦元素（比如默认可聚焦的<a>标签）。推荐两种解决方案：

1. 移除内部<a>的可聚焦性：给<a>添加tabindex="-1"，同时将原<a>的点击、键盘事件转移到外层tab元素上，确保交互逻辑完整。
2. 重构结构：将<a>设为tab元素本身，给<a>添加role="tab"、aria-selected等属性，移除外层div的role="tab"，示例代码如下：

<a role="tab" id="accordiongroup-2021-518-tab" aria-selected="true" class="panel-heading" ng-keypress="toggleOpen($event)" aria-controls="accordiongroup-2021-518-panel">
  <!-- 原内容 -->
</a>

内容的提问来源于stack exchange，提问作者Zeld