Accessibility for custom dropdown button

Question

Hi I need add keyboard navigation and accessibility to my custom dropdown button. Do you have any ideas? I thought about using 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

The Mozilla Foundation has described a technique for custom listbox elements: Using the listbox role which implies multiple considerations :

• giving the listbox role to the element
• giving the option role on the different choices
• managing focus of the different elements for keyboard accessibility
• using aria-activedescendant for current focused element
• using aria-selected for current selected element

WCAG has full working examples in the page Listbox examples but this page is still under development.

Answer 2

Here's how I would approach this:

<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>

The use of the aria-expanded attribute is really ideal, but if used, it would need to correctly display a value of true/false respectively as the element is expanded and collapsed.

Answer 3

Setting a focus on div will be a problem. tabindex is not a valid attribute which can be applied to divs in HTML < 5.

It must have some element link a, textarea, button, input, object, select.

So, we implemented in a way similar to

fiddle in this question

We put the text box inside a div