ODS > Forms > Dropdown List

[julien-deramond]

Forms > Dropdown List

⚠️ This description is still a draft

Requirement

As a developer I want to insert a Dropdown List So That I will get this ready to use component compatible with Orange design specifications and a11y requirements

DSM reference

General description

A dropdown is used for selecting one or multiple options from a predefined list of options.

UI specifications

Anatomy

1. Label
2. Dropdown field
3. Selected option
4. Toggle Icon
5. Dropdown menu
6. Menu option

Variants

For all variants of the dropdown component, there are 2 options:

• simple drop down selection
• drop down selection with a way of searching content

Single selection

The single selection variants allow users to select one single option from the drop down.

Multiple selection

~~The multiple selection variants allow users to select one or more options simultaneously. When there are a large number of options available, consider using the optional search field to allow users to narrow down the list of options and find the option they want to select.~~ ℹ️ Multiple selection version is dropped. We only keep the version with the tags

Multiple selection with tags

The multiple selection variant also includes the option of using tags. This option allows users to quickly remove unwanted selections using the remove icon in the tag. This option is also available with a search field if needed.

Dropdown with search

This is a separate component that needs to be defined outside this component.

States

The dropdown field has four possible states:

• Enabled
• Hover
• Pressed
• Disabled
• Focused on the dropdown (To be designed) should be an orange (outline color #FF7900) rectangle on black background and black outline on white background - 2px thickness could also use the hover color
• Focused on a selection item (To be designed)

The dropdown menu has three possible states:

• hover
• pressed
• disabled.

Internationalisation

For RTL (right-to-left) languages, the layout of the dropdown is mirrored. The label is right-aligned.

Appearance

Label position

Labels can be positioned on top or to the side of the dropdown. Top labels are the default and are recommended because they work better with long copy and responsive layouts. Side labels are useful when vertical space is limited.

Placeholder text

By default, the dropdown displays placeholder text in the dropdown when closed. The placeholder text prompts the user to select an option from the dropdown menu.

Width

The width of a dropdown can be set based on the width of the menu items or the page layout.

Height

A scrollbar should appear when the number of items extends beyond the height of the menu.

Required dropdown

Dropdowns can be marked as required if needed by including an asterisk after the label. Include hint text on the page to explain what the asterisk means.

Placement

xxx

UX specifications

Interaction

For the multiple selection dropdown, the text field can display up to two rows of selected options by expanding vertically. If the number of selections exceeds the available space of the text box, an indicator appears to display the additional number selected. Opening the menu will show all the selected options.

• All:
  • ~~Dropdown multiple selection overflow~~
  • Dropdown multiple selection overflow with tags
  • Within the drop down component the search box should be used if the selection is over a certain amount of items. When building your website, the number of items over which you should display the search box needs to be defined.
  • When using the multiple selection to show tags selection or text selection
  • When using the multiple selection, and when the user has already selected at least one tag, the user can click on the label of a tag, on the cross of the tab, on the drop down tick box of the item or drop down selection label in order to unselect the tag
  • when a multiple dropdown selection with search is used, the selected options should show with the the pre-ticked selection in the search result propositions.
  • When multiple items have been selected the dropdown field should show the user selection.
    • the dropdown field should not expand horizontally
    • the dropdown field can only grow vertically to max 2 lines
    • when more items need to show, the "X more" indication should show. the "... X more" only shows for the non tags view
    • (TO be confirmed) the multiple selection with text version should not be used anymore
    • when the tag is shown in the dropdown field the user can unselct the item by pressing the "X" option
    • if the label in the tag is longer then the available dropdown field allows, then the text should be truncated with the "..." to fit in the available space of 1 line (weather on the 1st line or 2nd line)
    • ~~in order for the user to view all selected items, when you open the dropdown, the first part of the list will show the items already selected under the search bar, and the rest of the list would show under (the selected items are not in the rest of the list anymore, just at the top). (To Be Confirmed) This behavior is available in all multiple selection otpion with or without the search~~
    • no other interaction on the tag then to be able to delete it
    • the order of the tags in the drodown field should follow the order the of the user selection stacking from left to right
    • the order of the selected items of the list at the top is following the order of the list

:warning: Update after the meeting of the 22nd february (must be reintroduced into the previous paragraph)

• Let's start with https://www.24a11y.com/2019/select-your-poison-part-2/
• Remove the search bar in the DSM
• Modification in the design
• 1st version -> all the tags are displayed
• Version in the future -> hide the tags after 1 or 2 lines and display them only when focused or active

• Mouse:

  • xxx
  • xxx

• Keyboard:

  • xxx
  • xxx

• Touch (mobile): same as the mouse interaction

Animations

• Animation could be added to make the tags disapead, but not for the moment - dev implementation examples could be proposed

Accessibility

Visual Accessibility

• Selected item must be shown with not only color information (icon, outline...)

Usage Accessibility

• User should be able to use keyboard only
• The button must have an aria-haspopup="listbox"
• 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.

Ressources

General infos

• https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html
• https://www.w3.org/TR/wai-aria-practices-1.1/examples/listbox/listbox-collapsible.html

Best example to follow

• https://www.24a11y.com/2019/select-your-poison/
• https://www.24a11y.com/2019/select-your-poison-part-2/

Technical specifications

• Let's start prototyping from https://www.24a11y.com/2019/select-your-poison-part-2/!

• We could look at https://ng-select.github.io/ng-select#/data-sources for ideas about arguments, attributes and explanations in the documentation. It is really close to https://www.24a11y.com/2019/select-your-poison-part-2/.

• First tries by David

• ~~Example? https://www.w3schools.com/howto/howto_js_filter_dropdown.asp~~

• The component need to expose (Note After the latest discussions, the following list must be to adapt)

  • an optional attribute to allow to display the max number of items to display at a time (on smaller screens the user will see what the display port allows to show)
  • ~~an optional attribute that turns on the search box~~
  • ~~(an optional attribute that defines the number over wich to display the searchbox option)~~
  • an optional attribute that turns on the multiple selection option, it is defaulted to the single selection if not used
  • an optional attribute that defines the

HTML Structure

xxx

JavaScript

xxx

Documentation in Boosted

xxx

Implementation tasks

• [x] (Basic) Dropdown - Single Selection
• [ ] (Basic) Dropdown - Multiple Selection (asked by community)

Related issues that could be closed

• https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/issues/1123

[razyon]

I need this component for my project and I will be glad to help. I'm considering the alternatives about how boosted should provide this component.

Implementation choice

• On one hand it could be just adding a few CSS properties to get the checkboxes to display properly into Dropdown items. Making a documentation and examples of integrating the existing Dropdown to fit the design requirement.
• On the other hand the component could be much more complex generating a Dropdown from a <select multiple> Dom Node. In that case we would not ease integration of the component within frameworks like Angular or Vue as we would only be capable of selecting strings as values. There will also be i18n considerations (for closing tags buttons).

I'm really considering the first option because the Dropdown List is part of the form section of the design system indicating that the <select> Dom Node might not be recommended for selecting items within a form. Having a <select> with a native dropdown beside a <select multiple> with the Dropdown component design would be weird I think.

By the way, some details are missing in the design system and questions must be answered before implementing this component:

UX / UI

• How will the component behave when a lot of items are selected (text-ellipsis, scroll...)
• The specifications are missing the hover and focus states, especially the non trivial ones with the variants WEB-FOR-DDL-004 and WEB-FOR-DDL-005

A11Y

• How can this component been seen as a form component by screen readers
• Would it be a good idea to generate a Dropdown on top of a <select> Dom Node making that select visible only to screen readers

[razyon]

I've made a codepen to see how this component can be implemented with current dropdown css and what is needed to be done (without any javascript logic beside actual dropdown)

https://codepen.io/razyon/pen/rNYjQBm?editors=1000

[razyon]

Hi,

I updated my codepen according to our last discussion: https://codepen.io/razyon/full/rNYjQBm

The code basis is from accessible select.

[louismaximepiton]

Not sure about where this link should be, but here is an example of the a11y team expectations for the multiple selection dropdown : https://adrianroselli.com/2022/05/under-engineered-multi-selects.html

[Dorian-Grim]

Looking forward to this pls. Any chance to get released?

[julien-deramond]

@Dorian-Grim It's one of the components we'd like to continue working on after the release of the dark mode. More information will come in this issue or the corresponding PR when it'll be started.

[julien-deramond]

Mentioning https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/issues/2513 as this feature is needed by another project (more details in the closed issue).

Note: If the DSM's Dropdown Specifications change during the specifications/development process, think to ping @MathieuPomm whose teams have started to develop some variants on their own.