手风琴组件键盘命令

Question

我有一个手风琴组件，它正在正确地使用“选项卡”在控件中导航，在“enter”和“spacebar”上手风琴展开。我试图找到一种方法来导航到下一个手风琴使用‘向上’和‘向下’箭头键。我熟悉Javascript，但是我无法用我现有的代码实现这一点。我能得到的任何帮助都是非常感谢的。

这是我的手风琴组件的CodePen。https://codepen.io/ozman2182/pen/vYgvGOd

(function () {
  const headings = document.querySelectorAll(".unr-accordion--heading");

  Array.prototype.forEach.call(headings, (h) => {
    let btn = h.querySelector("button");
    let target = h.nextElementSibling;

    btn.onclick = () => {
      let expanded = btn.getAttribute("aria-expanded") === "true";

      btn.setAttribute("aria-expanded", !expanded);
      target.hidden = expanded;
    };
  });
})();

Answer 1

在这个答案末尾的示例中，我添加了使箭头键在列表中上下循环所需的代码(并循环)。

我还添加了Home和End键，以进入列表的开始和结尾(因为这是预期的行为)。

总之，我们：

使用.querySelectorAll('.unr-accordion--heading>button');

• add获取
• 的所有按钮，该事件侦听器用于“按键”
• ，查看keyCode是38 (向上)还是40 (向下)，如果是“方向”为-1 (按按钮列表中的一项)或+1 (向下)，则
• ，如果keyCode为36 (" home ")，我们设置的方向为-999，这样，如果keyCode为35 (“结束”)，我们可以稍后检查它，我们设置的方向为999，以便在设置方向(向上或向下箭头被按下或家庭/结束)后，可以检查
• ，然后循环遍历所有按钮。

H 117if循环当前阶段的按钮等于document.activeElement (当前聚焦的项)，然后我们知道我们在手风琴上和按钮上，箭头键应该起作用。

• 我们然后检查方向是否向上，我们集中在按钮列表(direction == -1 && x == 0)中的第一个项目上，或者“方向”是否是-999 (主键)，因此，我们可以循环到按钮列表的底部，并对其进行聚焦。如果使用break;
• If not，我们退出循环，然后检查方向是否向下，并将注意力集中在按钮列表(direction == 1 && x == max)中的最后一项上，或者“方向”是否为+999 (结束键)，因此我们可以循环到按钮列表的顶部并聚焦该按钮。如果使用break;
• finally，则退出循环，如果上述两种情况都不是真，我们只需按方向移动焦点(-1表示向上，+1表示向下)，然后退出循环。

​

(function () {
  const headings = document.querySelectorAll(".unr-accordion--heading");

  Array.prototype.forEach.call(headings, (h) => {
    let btn = h.querySelector("button");
    let target = h.nextElementSibling;

    btn.onclick = () => {
      let expanded = btn.getAttribute("aria-expanded") === "true";

      btn.setAttribute("aria-expanded", !expanded);
      target.hidden = expanded;
    };
  });
  
    var btns = document.querySelectorAll('.unr-accordion--heading>button');
  
    document.addEventListener('keydown', function(e){
      var direction = 0;
      var max = btns.length - 1;
      direction = (e.keyCode == 38) ? -1 : direction;
      direction = (e.keyCode == 40) ? 1 : direction;
      direction = (e.keyCode == 35) ? -999 : direction;
      direction = (e.keyCode == 36) ? 999 : direction;
      
      if(direction != ""){
         e.preventDefault();
        for(x = 0; x <= max; x++){
            if(document.activeElement == btns[x]){
              if(direction == -1 && x == 0 || direction == -999){
                  btns[max].focus();
                  break;
              }
              if(direction == 1 && x == max || direction == 999){
                  btns[0].focus();
                  break;
              }
              btns[x + direction].focus();
              break;
            }
        }
      }
      
      
    })
  
  
})();

:root {
  --blue-10: #E6E9EC;
  --blue-20: #CDD2D9;
  --blue-50: #828FA1;
  --blue-80: #364B68;
  --blue-100: #041E42;
}
html {
  font-family: Helvetica, sans-serif;
  color: var(--blue-100);
}
section {
  max-width: 920px;
  margin-top: 3em;
  margin-right: auto;
  margin-left: auto;
}

.unr-accordion--expandall {
  margin-bottom: 1em;
  border:2px solid var(--blue-20);
  border-radius: 5px;
  padding: 0.5em 1em;
  background-color: white;
}

.unr-accordion--expandall:hover,
.unr-accordion--expandall:focus {
  border:2px solid var(--blue-10);
  background-color: var(--blue-10);
}

.unr-accordion--wrapper {
  border: 2px solid var(--blue-20);
  border-radius: 5px;
  margin-bottom: 0.5em;
}

.unr-accordion--wrapper:last-child {
  margin-bottom: 0;
}

.unr-accordion--wrapper > h2 {
  display: flex;
  margin: 0;
  border-radius: 5px;
}

.unr-accordion--wrapper > h2 button {
  all: inherit;
  border: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0.5em;
  font-size: 1.5rem;
  line-height: 1.5;
}

.unr-accordion--wrapper > h2 button:hover {
  background-color: var(--blue-10);
}

.unr-accordion--wrapper > h2 button svg {
  font-size: 1rem;
  margin-left: 0.5em;
  flex-shrink: 0;
}

.unr-accordion--wrapper > h2 button:focus svg {
  outline: 2px solid;
}

.unr-accordion--wrapper > h2 button[aria-expanded="true"] {
  background-color: var(--blue-10);
}

.unr-accordion--wrapper > h2 button[aria-expanded="true"] .vert {
  display: none;
}

.unr-accordion--wrapper > h2 button[aria-expanded] rect {
  fill: currentColor;
}

.unr-accordion--panel {
  margin-top: -1em;
  padding-top: 1em;
  padding-right: 1em;
  padding-bottom: 1em;
  padding-left: 1em;
  background-color: var(--blue-10);
}

<section>
<h1>Edgar Allan Poe was an American writer, poet, editor, and literary critic.</h1>
<p>Poe is best known for his poetry and short stories, particularly his tales of mystery and the macabre. He is widely regarded as a central figure of Romanticism in the United States and of American literature as a whole, and he was one of the country's earliest practitioners of the short story.</p>

<!-- <button class="unr-accordion--expandall" href="#">Expand All</button> -->

<!-- accordion items -->
<div class="unr-accordions">
  <div class="unr-accordion--wrapper">
    <h2 class="unr-accordion--heading">
      <button aria-expanded="false">
        The Black Cat (short story)
        <svg viewbox="0 0 10 10" width="24px" height="24px" aria-hidden="true" focusable="false">
          <rect class="vert" height="8" width="2" y="1" x="4" />
          <rect height="2" width="8" y="4" x="1" />
        </svg>
      </button>
    </h2>
    <div class="unr-accordion--panel" hidden>
      <p>It was first published in the August 19, 1843, edition of The Saturday Evening Post. In the story, an unnamed narrator has a strong affection for pets until he perversely turns to abusing them.</p>
    </div>
  </div>

  <div class="unr-accordion--wrapper">
    <h2 class="unr-accordion--heading">
      <button aria-expanded="false">
        The Cask of Amontillado
        <svg viewbox="0 0 10 10" width="24px" height="24px" aria-hidden="true" focusable="false">
          <rect class="vert" height="8" width="2" y="1" x="4" />
          <rect height="2" width="8" y="4" x="1" />
        </svg>
      </button>
    </h2>
    <div class="unr-accordion--panel" hidden>
      <p>First published in the November 1846 issue of Godey's Lady's Book. The story, set in an unnamed Italian city at carnival time in an unspecified year, is about a man taking fatal revenge on a friend who, he believes, has insulted him. Like several of Poe's stories, and in keeping with the 19th-century fascination with the subject, the narrative revolves around a person being buried alive – in this case, by immurement. As in "The Black Cat" and "The Tell-Tale Heart", Poe conveys the story from the murderer's perspective.</p>
    </div>
  </div>

  <div class="unr-accordion--wrapper">
    <h2 class="unr-accordion--heading">
      <button aria-expanded="false">
        The Gold-Bug
        <svg viewbox="0 0 10 10" width="24px" height="24px" aria-hidden="true" focusable="false">
          <rect class="vert" height="8" width="2" y="1" x="4" />
          <rect height="2" width="8" y="4" x="1" />
        </svg>
      </button>
    </h2>
    <div class="unr-accordion--panel" hidden>
      <p>The plot follows William Legrand, who was bitten by a gold-colored bug. His servant Jupiter fears that Legrand is going insane and goes to Legrand's friend, an unnamed narrator, who agrees to visit his old friend. Legrand pulls the other two into an adventure after deciphering a secret message that will lead to a buried treasure. </p>
    </div>
  </div>
</div>
</div>
<!-- end: accordion component -->
</section>

​