删除 keydown 上的属性 jQuery

Question

有一个手风琴，我正在尝试为屏幕阅读器用户添加辅助功能，仅当用户的光标位于组件内部并且按下向下箭头键时，它会删除下一部分的“惰性”属性。请不要问为什么我要让事物变得惰性等，或者为什么我不只是删除使其在按键时惰性的类。我有我的理由。我不确定如果用户不专注于组件内的特定元素，您是否可以这样做，但无论哪种方式，它现在都不起作用（聚焦或不聚焦）：

<script>
    $(document).ready(function(){
    $(".axxs-accordion > :header").addClass("h-trigger static").next().addClass("section collapsed").attr("inert", "");
    
      document.querySelectorAll('.h-trigger').forEach(el => {
        el.setAttribute("tabindex", "0");
        el.addEventListener("keydown", e => {
          if ([" ", "Enter"].includes(e.key)) {
            e.target.click();
          }
            if (["ArrowDown"].includes(e.key)) {
            $(this).next(".section.collapsed").removeAttr("inert", "");
          }
        });
      });
    
      $(".axxs-accordion").on("click", ".h-trigger.static", function () {
        $(this).closest(".axxs-accordion").find(".h-trigger.active").removeClass("active").addClass("static");
        $(this).closest(".axxs-accordion").find(".section.expanded").removeClass("expanded").addClass("collapsed").attr("inert", "");
        $(this).removeClass("static").addClass("active");
        $(this).next(".section.collapsed").removeClass("collapsed").addClass("expanded").removeAttr("inert", "");
      });
      
      $(".axxs-accordion").on("click", ".h-trigger.active", function () {
        $(this).removeClass("active").addClass("static");
        $(this).next(".section.expanded").removeClass("expanded").addClass("collapsed").attr("inert", "");
      });
    });
</script>    
    <div class="axxs-accordion">
    <h2>Heading</h2>
      <div>
        <p>Here is some content with text and an image</p>
        <p>Here is some more text</p>
      </div>
    <h2>Heading 2</h2>
      <section>
        <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        </ul>
      </section>
    </div>

Answer 1

请注意以下注意事项：

它可以附加到任何元素，但事件仅发送到具有焦点的元素。可聚焦的元素可能因浏览器而异，但表单元素始终可以获得焦点，因此是此事件类型的合理候选者。

考虑到这一点，可以创建这样的示例。

$(function() {
  $(".axxs-accordion > :header").addClass("h-trigger static").next().addClass("section collapsed").attr("inert", true);

  $('.h-trigger').each(function(i, el) {
    $(el).attr("tabindex", i);
    $(el).on("keydown", function(e) {
      console.log(e.key);
      switch (e.key.toLowerCase()) {
        case "enter":
        case " ":
          $(el).click();
          break;
        case "arrowdown":
          if ($(el).hasClass("active")) {
            $(el).click();
          }
          var i = $(el).attr("tabindex");
          $("h2[tabindex='" + ++i + "']").focus().click();
          break;
        case "arrowup":
          if ($(el).hasClass("active")) {
            $(el).click();
          }
          var i = $(el).attr("tabindex");
          $("h2[tabindex='" + --i + "']").focus().click();
          break;
      }
    });
  });

  $(".axxs-accordion").on("click", ".h-trigger.static", function() {
    $(this).closest(".axxs-accordion").find(".h-trigger.active").toggleClass("active static");
    $(this).closest(".axxs-accordion").find(".section.expanded").toggleClass("expanded collapsed").attr("inert", true);
    $(this).toggleClass("static active");
    $(this).next(".section.collapsed").toggleClass("collapsed expanded").attr("inert", false);
  });

  $(".axxs-accordion").on("click", ".h-trigger.active", function() {
    $(this).toggleClass("active static");
    $(this).next(".section.expanded").toggleClass("expanded collapsed").attr("inert", true);
  });

  $("h2[tabindex='0']").focus();
});

.collapsed {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="axxs-accordion">
  <h2>Heading</h2>
  <div>
    <p>Here is some content with text and an image</p>
    <p>Here is some more text</p>
  </div>
  <h2>Heading 2</h2>
  <section>
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
    </ul>
  </section>
</div>