selects

Selects (v5+)

What is needed?

For each select the following is required:

• A wrapper element with the "dqpl-select" class (which wraps both the button and the listbox)
• A button with aria-haspopup="listbox"
• Each button should be aria-labelledby the label element for the field.
• The listbox element should be a ul with role="listbox"
• Each option should be a child of the listbox and thus a li tag. They should also have role="option" set.

NOTE: To make the custom selects behave identically to their native counterparts, the javascript will attach a click listener to the label element which will focus the select control. This is done by simply having that "dqpl-label" (or "dqpl-label-inline") element within the same "dqpl-field-wrap" element as the [aria-haspopup="listbox"] button. If for some reason the implementation needs to follow a different convention, you can use the "data-label-id" attribute to tell the script what your label element is.

onChange event hook

A custom "dqpl:select:change" event is fired whenever a dqpl select changes. This means you can handle the change by attaching an event listener like so:

const select = document.getElementById('my-dqpl-select');
select.addEventListener('dqpl:select:change', () => console.log('change!'));

Default selected option

If there needs to be a default selected option, simply add a child of the "dqpl-combobox" with the "dqpl-pseudo-val" class and the text of the desired selected option. In addition, you'll need to set the "aria-activedescendant" attribute to the id of the selected option. For example if you wanted "Yes" to be the default selected option:

Example HTML

<div class="dqpl-field-wrap">
    <div class="dqpl-label" id="age-label">Age group</div>
    <div class="dqpl-select">
      <button
        aria-haspopup="listbox"
        aria-labelledby="age-label dqpl-listbox-button-value"
      >
        <div
          class="dqpl-pseudo-value"
          id="dqpl-listbox-button-value"
        >
          18 - 25
        </div>
      </button>
      <ul class="dqpl-listbox" aria-activedescendant="default" role="listbox" id="age-list" tabindex="-1">
        <li class="dqpl-option" id="default" role="option">18 - 25</li>
        <li class="dqpl-option" role="option">26 - 39</li>
        <li class="dqpl-option" role="option">40 - 55</li>
        <li class="dqpl-option" role="option">55 - 99</li>
        <li class="dqpl-option" role="option">A</li>
        <li class="dqpl-option" role="option">b</li>
        <li class="dqpl-option" role="option">c</li>
        <li class="dqpl-option" role="option">d</li>
        <li class="dqpl-option" role="option">aria-labelledby</li>
        <li class="dqpl-option" role="option">AsDf</li>
      </ul>
    </div>
  </div>