Dueling Picklist

Dueling Picklist

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

BaseDesktop OnlyRequires ui:scrollerWrapper

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
  • tabindex should be set to "0" when an item is selected and "-1" otherwise

Focus management

  • Initially, nothing should be selected and the first item in each list should have tabindex="0"
  • When an item is focused, it becomes selected
  • When focus leaves the list, the last selected item remains selected and focusable. When focus returns to the list focus is placed on the last selected item.
  • When moving items:
    • With the move button: the items are unselected and added to the target list. The focus should remain on the move button.
    • With a keyboard shortcut: focus remains on the item, but in the target list. Since the item is focused, it is also selected.
    • If there are already selected items in the target list, they stay selected and the new items are added below them.

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". Any previously selected items are deselected.
    • shift + up and shift + down move 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

  • The content in the option-drag-label assistive text should provide clear instructions on how to drag and drop with a keyboard
  • The aria-live region should update as items are moved to provide context about the state and location of the items

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