Bootstrap拦截ArrowDown不传播，自定义无障碍下拉导航失效如何解决？

问题描述 #

我正在创建一个完全可访问的自定义下拉组件，需要绑定ArrowDown键实现.item元素间的导航，但按下该键时无法正常工作。改用A键则可以正常导航，推测是Bootstrap捕获了ArrowDown键并阻止了事件传播。

解决方案 #

核心思路是阻止Bootstrap的Dropdown组件拦截自定义区域的Arrow键事件，同时优化焦点管理逻辑：

1. 阻止事件传播：在自定义搜索框和列表项的keydown事件中添加event.stopPropagation()，避免Bootstrap的默认逻辑抢占事件处理权。
2. 规范tabIndex管理：初始将所有.item的tabIndex设为-1，仅在需要聚焦时设为0，符合可访问性标准。
3. 完善边界导航：处理ArrowDown到最后一项时的循环，以及ArrowUp到第一项时跳转回搜索框的逻辑。

修改后的代码 #

HTML部分

<div class="dropdown">
  <a href="#" class="dropdown-toggle form-control" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" aria-haspopup="menu" data-menu-trigger="reviewers-select-menu" role="button" tabindex="9" id="dropdownMenuCombo">
    <span class="badge rounded-pill text-bg-primary">Primary</span>
    <span class="badge rounded-pill text-bg-danger">Danger</span>
  </a>
  <div class="dropdown-menu" id="dropdownMenu">
    <input class="dropdown-item dropdowninputsearch" aria-label="Type or choose a user" aria-autocomplete="list" id="search" type="text" class="w-100" />
    <ul class="items">
      <li class="item" role="menuitemcheckbox" aria-checked="true" tabindex="-1">Action 1</li>
      <li class="item" role="menuitemcheckbox" aria-checked="false" tabindex="-1">Action 2</li>
      <li class="item" role="menuitemcheckbox" aria-checked="false" tabindex="-1">Action 3</li>
      <li class="item" role="menuitemcheckbox" aria-checked="false" tabindex="-1">Action 4</li>
    </ul>
  </div>
</div>

<!-- Bootstrap 5.3 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

JavaScript部分

const dropdownMenuCombo = document.getElementById('dropdownMenuCombo');
const searchInput = document.getElementById('search');
const firstDropdownItem = document.querySelector('.item');
const items = document.querySelectorAll(".item");

// 下拉展开时，聚焦搜索框
dropdownMenuCombo.addEventListener('shown.bs.dropdown', function() {
  console.log("dropdownMenuCombo shown");
  searchInput.focus();
});

// 搜索框的按键处理
searchInput.addEventListener('keydown', function(e) {
  console.log("input " + e.key);

  // 向下箭头
  if (e.key === "ArrowDown") {
    e.preventDefault();
    e.stopPropagation(); // 阻止Bootstrap捕获事件
    firstDropdownItem.tabIndex = 0;
    firstDropdownItem.focus();
  }

  // 向上箭头
  else if (e.key === "ArrowUp") {
    e.preventDefault();
    e.stopPropagation(); // 阻止Bootstrap捕获事件
    new bootstrap.Dropdown(dropdownMenuCombo, {}).toggle();
    dropdownMenuCombo.focus();
  }
});

// 列表项的按键处理      
function handleKeyDown(event) {
  console.log("option " + event.key);

  if (event.key === "ArrowDown" || event.key === "ArrowUp") {
    event.preventDefault();
    event.stopPropagation(); // 阻止Bootstrap捕获事件

    const currentIndex = Array.from(items).indexOf(document.activeElement);
    let nextIndex = event.key === "ArrowDown" ? currentIndex + 1 : currentIndex - 1;

    // 处理边界情况
    if (nextIndex < 0) {
      // 回到搜索框
      document.activeElement.tabIndex = -1;
      searchInput.focus();
      return;
    }
    if (nextIndex >= items.length) {
      // 循环到第一项
      nextIndex = 0;
    }

    // 重置当前项tabIndex，设置下一项为可聚焦
    document.activeElement.tabIndex = -1;
    items[nextIndex].tabIndex = 0;
    items[nextIndex].focus();
  }
}

items.forEach(function(item) {
  item.addEventListener("keydown", handleKeyDown);
  console.log("associat keydown a  " + item.textContent);
});

关键改动说明 #

• 在searchInput和handleKeyDown的事件处理中添加了event.stopPropagation()，切断事件向Bootstrap Dropdown组件的传递。
• 将所有.item的初始tabIndex设为-1，仅在需要聚焦时临时设为0，避免多个元素同时可通过Tab键聚焦，符合可访问性要求。
• 优化了ArrowDown到最后一项时的循环逻辑，以及ArrowUp到第一项时跳转回搜索框的处理。

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