Html 角度手风琴可及性问题

使用键盘扩展包含项目列表的手风琴时出现问题

有一个复杂的问题是，accordion的所有数据都是通过API填充的，所以我看到的很多解决方案都是硬编码的。例如，使用以下文章中的信息不起作用，因为唯一值是硬编码的：

我已经添加了很多合适的ARIA标签，通过标签导航它和屏幕阅读器一样工作，但我无法让手风琴展开

我试着从另一个角度来谈论它，让回车按钮被解释为点击元素来展开手风琴，但在尝试用角度来做这样的事情时完全迷失了方向，因为插入香草JS并不像看上去那样直接

下面是代码，它分布在三个组件上，因此我将其编译为一个组件，并删除了一些样式类以便于识别：

  <div tabindex="0" (keydown.enter)="myFunction()" role="button">
    <h2 tabindex="0">
      <img>
      <i tabindex="0"></i>{{ organiser.name }}
    </h2>

    //this component displays the selected item. the accessibility on this works fine
<app-selected-area role="region">
    </app-selected-area>

  </div>
  <div class="content">

//this component displays the items that can be selected

        <app-skill-item class="item">
    <div tabindex="0" role="button">
      <h3>{{ skill.name }}</h3>

      <button *ngIf="updateable && isSelected()" (click)="select()">
        Remove 
        <span class="screen-reader-only">
          {{ skill.name }}
        </span>
        skill
      </button>
      <button *ngIf="updateable && !isSelected()" (click)="select()" tabindex="0">
        Add 
        <span class="screen-reader-only">
          {{ skill.name }}
        </span>
        skill
      </button>

   </app-skill-item>
  </div>

{{organizer.name}
//此组件显示所选项目。这个平台的可访问性很好
//此组件显示可选择的项目
{{skill.name}
去除
{{skill.name}
技能
添加
{{skill.name}
技能

---

任何帮助或提示都将不胜感激

最终在以下问题/线索中找到了答案：

这是下面的代码，让我可以通过按enter键操纵手风琴

let element: HTMLElement = document.getElementsByClassName('btn')[0] as HTMLElement;
element.click();