下拉选择框（Dropdown Select）键盘可访问性问题求助

你用<dl>结构实现的自定义下拉框，本身并没有原生的键盘交互能力——这就是上下键无法高亮选项、回车不能选中值的核心原因。我来一步步帮你解决这个问题：

第一步：先修正HTML结构 #

你提供的代码存在标签闭合错误，先把结构理顺（确保语义正确，避免后续逻辑出错）：

<dl id='amount-list' class="dropdown-add">
  <dt>
    <a href="#">
      <span> Select Asset Type </span>
    </a>
  </dt>
  <dd>
    <input type="hidden" id="selected-type" name="selected-type" value="" />
    <ul id="amount-list-add">
      <li value="A" selected>Option A</li>
      <li value="B">Option B</li>
      <li value="C">Option C</li>
    </ul>
  </dd>
</dl>

第二步：添加键盘交互的核心逻辑 #

自定义下拉框需要手动实现键盘事件处理，同时搭配CSS来显示高亮状态：

先加CSS高亮样式 #

/* 高亮选中的选项，让用户直观看到当前焦点 */
.dropdown-add li.highlighted {
  background-color: #007bff;
  color: #fff;
}
/* 可选：隐藏默认下拉框，初始状态不显示选项列表 */
.dropdown-add dd ul {
  display: none;
}

核心JavaScript代码 #

const dropdown = document.getElementById('amount-list');
const trigger = dropdown.querySelector('dt a');
const optionList = document.getElementById('amount-list-add');
const options = optionList.querySelectorAll('li');
const hiddenInput = document.getElementById('selected-type');
let currentHighlightIndex = -1;

// 初始化：处理默认选中的选项
const defaultSelected = optionList.querySelector('[selected]');
if (defaultSelected) {
  currentHighlightIndex = Array.from(options).indexOf(defaultSelected);
  defaultSelected.classList.add('highlighted');
  hiddenInput.value = defaultSelected.getAttribute('value');
  trigger.querySelector('span').textContent = defaultSelected.textContent;
}

// 让每个选项可以获得焦点（键盘事件的前提）
options.forEach(opt => opt.setAttribute('tabindex', '0'));

// 点击触发器切换下拉框显示/隐藏
trigger.addEventListener('click', (e) => {
  e.preventDefault();
  const isVisible = optionList.style.display === 'block';
  optionList.style.display = isVisible ? 'none' : 'block';
  // 显示时让当前高亮选项获得焦点
  if (!isVisible && currentHighlightIndex !== -1) {
    options[currentHighlightIndex].focus();
  }
});

// 监听键盘事件：上下箭头切换高亮，回车选中
optionList.addEventListener('keydown', (e) => {
  switch(e.key) {
    case 'ArrowDown':
      e.preventDefault();
      // 移除上一个高亮
      if (currentHighlightIndex !== -1) {
        options[currentHighlightIndex].classList.remove('highlighted');
      }
      // 循环切换到下一个选项
      currentHighlightIndex = (currentHighlightIndex + 1) % options.length;
      options[currentHighlightIndex].classList.add('highlighted');
      options[currentHighlightIndex].focus();
      break;
    case 'ArrowUp':
      e.preventDefault();
      if (currentHighlightIndex !== -1) {
        options[currentHighlightIndex].classList.remove('highlighted');
      }
      // 循环切换到上一个选项
      currentHighlightIndex = currentHighlightIndex === 0 ? options.length - 1 : currentHighlightIndex - 1;
      options[currentHighlightIndex].classList.add('highlighted');
      options[currentHighlightIndex].focus();
      break;
    case 'Enter':
      e.preventDefault();
      if (currentHighlightIndex !== -1) {
        selectOption(options[currentHighlightIndex]);
      }
      break;
  }
});

// 点击选项时的选中逻辑
options.forEach(opt => {
  opt.addEventListener('click', () => selectOption(opt));
});

// 通用选中选项的函数
function selectOption(option) {
  // 清除所有选项的选中状态
  options.forEach(opt => {
    opt.classList.remove('highlighted');
    opt.removeAttribute('selected');
  });
  // 设置当前选项为选中
  option.classList.add('highlighted');
  option.setAttribute('selected', '');
  currentHighlightIndex = Array.from(options).indexOf(option);
  // 更新隐藏输入框和触发器文本
  hiddenInput.value = option.getAttribute('value');
  trigger.querySelector('span').textContent = option.textContent;
  // 关闭下拉框
  optionList.style.display = 'none';
}

// 点击页面其他区域关闭下拉框
document.addEventListener('click', (e) => {
  if (!dropdown.contains(e.target)) {
    optionList.style.display = 'none';
  }
});

逻辑说明 #

1. 焦点处理：给每个<li>设置tabindex="0"，让它们能接收键盘事件；
2. 键盘导航：监听上下箭头事件，循环切换高亮选项，同时让焦点跟随当前高亮项；
3. 回车选中：触发回车时调用通用选中函数，更新隐藏输入框和触发器显示文本；
4. 交互完善：添加点击选项选中、点击外部关闭下拉框的逻辑，提升用户体验。

这样处理后，你的自定义下拉框就能完美支持键盘操作了！

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