Dueling Picklist

Dueling Picklist

Dueling picklist are used to move options between two lists. The list options can be re-ordered.

BaseNot Compatible with S1 Mobile

Preview

No content has been added for this component.

No content has been added for this component.

This is a protototype - the code has been omitted

About Base

A dueling picklist inherits styles from the listbox component


About Dueling Picklist

Accessibility

This component is essentially 2 ARIA listboxes side by side, so we follow the ARIA practices guide to help implement their interaction in an accessible way. Some additional details, supplementary to the ARIA guide include:

Notable attributes

  • aria-multiselectable="true" should be set on each listbox
  • aria-selected should be placed on each role="option, and only set to true when selected
  • aria-labelledby is used to identify the list to the user and should point to the list label
  • aria-describedby is used to provide operation instructions for the Drag and Drop interaction

  • Keyboard navigation*

  • Each list is a tab stop. This provides identification and operation instruction as provided by aria-describedby and aria-labelledby. State of the overall list is also provided, including total number and number of selected options in the list when focused.
  • Because we support drag and drop re-ordering, we implement the second multi-select keyboard model.
    • Up and Down arrows move focus and selection, with aria-selected="true"
    • shift + up and shift + down moved focus and creates addition selections
    • ctrl + down or ctrl + up moves focus but selection remains where it is
    • ctrl + space toggles selection on the focused option, in addition to previous selections
    • ctrl + a selects all options in the list
    • cmd/ctrl + right and cmd/ctrl + left Moves selected items between lists
    • space toggles "Drag and Drop" mode. When in "Drag and Drop" mode:
      • Up and Down arrows move the selected items within the current list

Updating Operation and State

  • As a user interacts with the component, pay close attention to the content of the aria-live region and the option-drag-label assistive text. This is to provide clear instruction to the user on how to proceed, and what has happened in each State the component will be in

Overview of CSS Classes

Selector.slds-dueling-list
Summary

Initializes a dueling picklist

Restrictdiv
VariantTrue
Selector.slds-dueling-list__column
Summary

Handles the layout of the dueling picklist

Restrict.slds-dueling-list div
Selector.slds-dueling-list__options
Summary

Bounding visual container for listbox of options

Restrict.slds-dueling-list div