自定義下拉按鈕

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頁完整的工作的例子，但這個頁面仍處於開發階段。