GovAlta / ui-components-design

This repository is intended for use by the designers of the Design System
0 stars 0 forks source link

Multi-select drop down #3

Closed Spark450 closed 7 hours ago

Spark450 commented 7 hours ago

Background

In Sprint review May 25th 2022 (Platform team) is using a UI-component from the old React library that is no longer being supported by the design system.

Acceptance Criteria

Functionality

The multi-select dropdown component should allow users to select multiple options from the dropdown list.

It may make sense for the functionality to be included as a property in the Comobox component. Connect with Vanessa Tran to discuss further

The component should incorporate the behaviour for "All" and "None" selection, allowing users to either select all options with a single click or deselect all selected options.

Design

The design of the multi-select dropdown should be consistent with the design of existing dropdown and checkbox components in the design system.

There should be clear visual feedback when options are selected or deselected.

The component should show a summary of selected options, in the form of chips or text when the dropdown is collapsed.

Accessibility

The component should be fully accessible, complying with WCAG 2.1 Level AA standards.

The dropdown should be navigable using keyboard alone. The use of arrow keys to navigate options, space to select/deselect, and enter to confirm selection should be supported.

ARIA roles, properties, and states should be specified in the documentation to ensure the component is implimented as intended and properly understood by assistive technologies.

Get in touch with Vanessa Tran to discuss the specific aspects of accessibility with this component.

Documentation

The guidelines should clearly indicate when to use the dropdown, combobox, or multi-select components based on the nature of the interaction and the amount of data.

Similarly, guidelines should illustrate when to use the multi-select component instead of traditional checkboxes.

The component's relationship to the existing dropdown and combobox components should be explained. If the multi-select dropdown is a variant of an existing component, this should be stated and rationalized.

Spark450 commented 7 hours ago

Link to Jira issue