Dropdown Selector

dropdown-selector

The dropdown selector is a form input that can be used to in place of a native select element in single mode.

Work in progress

I'm currently working on the design of the documentation and how to include demonstrations and code examples for the components.

Demonstration

Under construction

Example usage

     <form id="form" method="get">
  <label for="dropdown-selector">Choose a month</label>
  <dropdown-selector
      id="dropdown-selector"
      aria-labelledby="label-for-dropdown-selector"
  >
      <option value="0">January</option>
      <option value="1">February</option>
      <option value="2">March</option>
      <option value="3">April</option>
      <option value="4">May</option>
      <option value="5" selected>June</option>
      <option value="6">July</option>
      <option value="7">August</option>
      <option value="8">September</option>
      <option value="9">October</option>
      <option value="10">November</option>
      <option value="11">December</option>
  </dropdown-selector>
</form>

Accessibility

If a label has been associated to the dropdown-selector, then clicking on the label will open the list of options for the selector.

Keyboard navigation is also available. The element is focusable with tab.

When closed

tab will focus the next focusable element
up down enter or space will open the list with the current option highlighted
home will open the list with the first option highlighted
end will open the list with the last option highlighted
Typing will open the list. When the user pauses typing, the next option that begins with what the user typed in will be highlighted

When open

escape will close the dropdown without changing its value
tab will change the selected value to the current highlighted value, close the menu, and then move focus to the next element
enter or space will change the selected value to the current highlighted value, close the menu, but keep focus on the dropdown
up or down will move the highlight up or down the list
page up or page down will move the highlight up or down the list in jumps of ten
home will highlight the first option
end will highlight the last option
If the user begins to type, and then pauses, the next option that begins with what the user typed in will be highlighted

Screen readers

Screen reader users will be informed that they have focused a combobox, along with the label associated with the dropdown-selector, and that it can open a listbox with options.

On opening the listbox, the user will be informed of how many items are in the list and what the current setting is, and as they use the keyboard to navigate up and down the list, they will be told which option they are hovering over.

Attributes

The following attributes can be used on the dropdown-selector element:

autofocus: When present, automatically focus this dropdown-selector on page load.
disabled: When present, makes the dropdown-selector not mutable, focusable, and prevents it from being submitted with the form.
form: The ID of the form that this dropdown-selector is attached to. If it is not set, then the dropdown-selector is attached to the closest form ancestor.
name: The name of the dropdown-selector used when submitting.
required: When present, determines if the dropdown-selector must have a value.
tabIndex: Sets where the dropdown-selector participates in sequential keyboard navigation.
value: The value of the dropdown-selector.

Form data

The dropdown-selector can be used in forms, and its name/value pair will be included in the GET or POST data submitted by its associated form.

API

The following methods and properties can be called/access on the dropdown-selector element:

closeList(boolean: keepFocus = true): Closes the list if it is open. If keepFocus is set to true, then the list will keep focus.
openList(): Opens the list and sets focus if the list is not already open.
select(number: index): Sets the selected index of the dropdown-selector.
add(HTMLElement: item, HTMLElement|number: before = null): Adds an item to the dropdown-selector. If before is null, then the new item will be appended to the end of the current list. If before is another item or a number, it will insert the new item before the specified item.
item(number: index): Returns the item in the dropdown-selector at index.
namedItem(string: name): Returns the item in the dropdown-selector that has a matching name or id attribute. If there is no matching item, it returns null
remove(number: index = null): Removes the item from the dropdown-selector at the specified index. If no index, then this will remove the dropdown-selector from its parent.
autofocus: Set/unset the dropdown-selector's autofocus attribute.
disabled: The dropdown-selector's disabled attribute.
form: The dropdown-selector's form attribute.
autofocus: The dropdown-selector's autofocus attribute.
labels (readonly): Returns a NodeList of the label elements associated with the dropdown-selector.
length (readonly): Returns the number of items in the dropdown-selector
name: The dropdown-selector's name attribute.
options (readonly): Returns a NodeList of options from the dropdown-selector.
required: The dropdown-selector's required attribute.
selectedIndex (readonly): Returns the selected index of the dropdown-selector.
selectedOptions (readonly): Returns a nodeList of options that are currently selected in the dropdown-selector. This list should not contain more than one option, as only one option can be selected at a time.
tabIndex: The dropdown-selector's tabIndex attribute.
value: The dropdown-selector's value attribute.

Accessible Web Components