javascript - 自定义下拉按钮的辅助功能

Question

您好，我需要为我的自定义下拉按钮添加键盘导航和辅助功能。你有什么想法？我想过使用 aria 吗？

<div class="dropdown-select">
  <input type="hidden" name="select_offer" class="dropdown-select--value" />
  <button class="dropdown-select--btn"> Lorem ipsum
    <span class="sr-only">(rozwiń listę)</span>
  </button>
  <ul class="opl-dropdown-select--list">
    <li>
      <a href="#" data-option="value1">Lorem ipsum</a>
    </li>
    <li>
      <a href="#" data-option="value2">Lorem ipsum</a>
    </li>
    <li>
      <a href="#" data-option="value3">Lorem ipsum</a>
    </li>
  </ul>
</div>

Answer 1

Mozilla 基金会描述了一种用于自定义列表框元素的技术:Using the listbox role这意味着多重考虑:

• 赋予元素 listbox Angular 色
• 赋予option不同选择的 Angular 色
• 管理键盘辅助功能的不同元素的焦点
• 对当前焦点元素使用aria-activedescendant
• 对当前选中的元素使用aria-selected

WCAG 在页面 Listbox examples 中有完整的工作示例但此页面仍在开发中。