自定义下拉按钮

Question

嗨我需要添加键盘导航和辅助功能到我的自定义下拉按钮。你有什么想法？我想过使用唱段？

<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

在div上设置焦点将是一个问题。 tabindex不是一个有效的属性，它可以应用于div中的HTML < 5.

它必须有一些元素链接a，textarea，button，input，object，select。

所以，我们在类似的方式实施，以

fiddle in this question

我们把文本框一个div

Answer 2

这是我会怎么处理这里面：

<div class="dropdown-select" role="menubar"> 
    <input type="hidden" name="select_offer" class="dropdown-select--value" /> 
    <button id="custom-dropdown" class="dropdown-select--btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Lorem ipsum 
    <span class="sr-only">(rozwiń listę)</span> 
    </button> 
    <ul class="opl-dropdown-select--list" aria-label="submenu" role="menu" aria-labelledby="custom-dropdown"> 
    <li role="menuitem"> 
     <a href="#" data-option="value1">Lorem ipsum</a> 
    </li> 
    <li role="menuitem"> 
     <a href="#" data-option="value2">Lorem ipsum</a> 
    </li> 
    <li role="menuitem"> 
     <a href="#" data-option="value3">Lorem ipsum</a> 
    </li> 
    </ul> 
</div> 

使用的aria-expanded属性是非常理想的，但如果使用它将需要分别正确显示true/false的值，因为元素是展开并折叠。

Answer 3

Mozilla基金会已经描述了自定义列表框元素的技术：Using the listbox role这意味着多重考虑：

• 给listbox作用的元素
• 给在不同的选择
• 管理option作用键盘辅助功能的不同元素的焦点
• 使用aria-activedescendant为当前集中元素
• 使用aria-selected当前选中的元素

WCAG在Listbox examples页完整的工作的例子，但这个页面仍处于开发阶段。