我还在学习如何编写可访问性代码，我正在开发的这个wordpress网站上遇到了一堵墙，它是由以前的开发人员开发的，我们网站上有一个页面，当用Tab键聚焦时，它的 accordion 项目最终会禁用箭头键的任何移动（具体来说，使用向上和向下箭头键滚动页面）。当我用Tab键经过 accordion 项目时，我可以再次使用箭头键滚动。
我注意到html元素的属性会根据所关注的内容而变化：当箭头键还能用的时候data-whatelement="button"，当它们不能用的时候data-whatelement="a"。我不知道这是否相关。
下面是其中一个可折叠项的片段（扩展按钮包含在其中）

<div id="General" class="sidebar-anchor" style="display: block;">
    <div class="accordion-option">
        <h2 class="font-s-1-5"><span style="width:90%;word-wrap: break-word;">General</span></h2><button
            class="toggle-accordion" accordion-id="General" data-accordion="ssm-General"
            aria-label="expand/collapse General questions and answers" type="button" role="tablist"
            data-t="v84lyv-t"></button>
        <style>
            .accordion-option .toggle-accordion::before {
                content: "Expand";
            }

            .accordion-option .toggle-accordion.General::before {
                content: "Collapse";
            }
        </style>
        <ul>
            <li class="ssm-General" data-accordion="ssm-General" data-allow-all-closed="true" role="tablist"
                data-t="ard470-t">
                <div class="accordion-item" data-accordion-item="" data-parent="">
                    <a href="#" class="accordion-title" aria-controls="b4i8sa-accordion" role="tab"
                        id="b4i8sa-accordion-label" aria-expanded="false" aria-selected="false">Random Text</a>

                    <div class="accordion-content" data-tab-content="" role="tabpanel"
                        aria-labelledby="b4i8sa-accordion-label" aria-hidden="true" id="b4i8sa-accordion">
                        <div class="panel-body">
                            <p>Random Text</p>
                        </div>
                    </div>
                </div>
            </li>
            <li class="ssm-General" data-accordion="ssm-General" data-allow-all-closed="true" role="tablist"
                data-t="je376n-t">
                <div class="accordion-item" data-accordion-item="" data-parent="">
                    <a href="#" class="accordion-title" aria-controls="2lmfgr-accordion" role="tab"
                        id="2lmfgr-accordion-label" aria-expanded="false" aria-selected="false">Random text</a>

                    <div class="accordion-content" data-tab-content="" role="tabpanel"
                        aria-labelledby="2lmfgr-accordion-label" aria-hidden="true" id="2lmfgr-accordion">
                        <div class="panel-body"></div>
                    </div>
                </div>
            </li>
            <li class="ssm-General" data-accordion="ssm-General" data-allow-all-closed="true" role="tablist"
                data-t="c1olgt-t">
            </li>
        </ul>
    </div>
</div>

我想这可能与JS的编码方式有关，但对我来说，JS似乎相对简单，不会对阻塞箭头函数有任何影响。是否有一个属性或类被添加，以某种我不知道的方式进行干扰？
以下是相关JS，供参考：

//Expand All and Collapse All functions for Qs and As
jQuery(function(){
  jQuery(document).on('click', '.toggle-accordion', function(){
      var accordionId = jQuery(this).attr("accordion-id");
      var accordionData = jQuery(this).attr("data-accordion");
      
      var classID = "."+ accordionData;
      jQuery(this).toggleClass(accordionId);
      triggerAccordions = document.querySelectorAll("."+accordionId);
      console.log(triggerAccordions.length);
      if (triggerAccordions.length == 0) {
        collapseAll(classID);
      } else {
        expandAll(classID);
      }
  });

  function collapseAll($class) {
    jQuery($class).each(function () {
      var $acc = jQuery(this);
      var $openSections = $acc.find(".accordion-item.is-active .accordion-content");
      $openSections.each(function (i, section) {
        $acc.foundation("up", jQuery(section));
      });
    });
  };

  function expandAll($class) {
    jQuery($class).each(function () {
      var $acc = jQuery(this);
      var $openSections = $acc.find(".accordion-item .accordion-content");
      $openSections.each(function (i, section) {
        $acc.foundation("down", jQuery(section));
      });
    });
  };
});