selects v4

Selects (versions < 5)

What is needed?

The pattern library's selects are not native <select /> elements but rather custom ones. For each select the following is required:

• A label element with the "dqpl-label" or "dqpl-label-inline" class.
• An element with the "dqpl-combobox" class as well as the following attributes:
  • role="combobox"
  • tabindex="0"
  • aria-autocomplete="none"
  • aria-expanded="false"
  • aria-owns="id-of-listbox" where "id-of-listbox" is the id of the listbox element ("dqpl-listbox")
  • aria-required="true" if the select is required.
• An element ith the "dqpl-listbox" class as well as the following attributes:
  • role="listbox"
  • an id to be referenced in the aria-owns attribute of the combobox.
• Within the listbox element ("dqpl-listbox"), each option needs the "dqpl-option" class as well as the following attributes:
  • role="option"
  • If the option is disabled, aria-disabled="true"

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 "dqpl-combobox". 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.

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:

<div class="dqpl-field-wrap">
  <div class="dqpl-label" id="human-label">Are you a human?</div>
  <div class="dqpl-select">
    <div class="dqpl-combobox" role="combobox" tabindex="0" aria-autocomplete="none" aria-owns="human-list" aria-expanded="false" aria-labelledby="human-label" aria-required="true" aria-activedescendant="yes">
      <div class="dqpl-pseudo-value">Yes</div>
    </div>
    <ul class="dqpl-listbox" role="listbox" id="human-list">
      <li class="dqpl-option" id="yes" role="option">Yes</li>
      <li class="dqpl-option" role="option">No</li>
    </ul>
  </div>
</div>

Example HTML

<div class="dqpl-field-wrap">
  <div class="dqpl-label" id="age-label">Age group (with default value selected)</div>
  <div class="dqpl-select">
    <div class="dqpl-combobox" role="combobox" tabindex="0" aria-autocomplete="none" aria-owns="age-list" aria-expanded="false" aria-labelledby="age-label" aria-required="true" aria-activedescendant="default">
      <div class="dqpl-pseudo-value">18 - 25</div>
    </div>
    <ul class="dqpl-listbox" role="listbox" id="age-list">
      <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>
    </ul>
  </div>
</div>
<div class="dqpl-field-wrap">
  <div class="dqpl-label" id="pizza-label">Do you like pizza?</div>
  <div class="dqpl-select">
    <div class="dqpl-combobox" role="combobox" tabindex="0" aria-readonly="true" aria-autocomplete="none" aria-owns="pizza-list" aria-expanded="false" aria-labelledby="pizza-label"></div>
    <ul class="dqpl-listbox" role="listbox" id="pizza-list">
      <li class="dqpl-option" role="option">Yes</li>
      <li class="dqpl-option" role="option">No</li>
    </ul>
  </div>
</div>