search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.86k stars 1.82k forks source link

[a11y]: Various Multi-select dropdown problems #12723

Closed mbgower closed 1 year ago

mbgower commented 1 year ago

Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

https://react.carbondesignsystem.com/?path=/story/components-multiselect--default

React version

No response

Automated testing tool and ruleset

n/a

Assistive technology

n/a

Description

The multi-select dropdown implementation in react has a number of issues not found in the Dropdown implementation. Although I have listed a few in other issues opened against the dropdown component, all the following are unique to the multi-select, so it seemed to make sense to open a separate issue for these.

issue 1 Only Spacebar should be used to select checkboxes in multi-select

For a single-select dropdown, both Enter and Spacebar can be used to select the item. However, with multi-select it is recommended to only make Spacebar the selection mechanism. There are a number of reasons:

  1. Spacebar is the traditional mechanism for selection. It is the key that toggles a checkbox, and the multi-select appears as a list of checkboxes.
  2. It allows Enter to have the function of completing the selections and closing the dropdown. A user can collapse the dropdown by tabbing to the next component, but it is recommended to use a typical 'do' command for this.
  3. It helps prevent the user from accidentally submitting an incomplete form. There is a slight danger that in a form with a default Submit button, pressing Enter may cause the form to be submitted.

Issue 2 Highlighting should only be on items with focus, not on selected items

In the multi-select, items that are selected are both checked AND have a fill added. This is needlessly redundant AND causes difficulties navigating since the same fill is added to show the item with focus. A user cannot see any evidence of focus moving when moving through multiple selected items. This is shown in the following screen snippet where the item with focus is option 2. This may be resolved if the issue on increasing contrast on the item with focus, https://github.com/carbon-design-system/carbon/issues/12720, is addressed. image

WCAG 2.1 Violation

recommendations in regard to 2.1.1 Keyboard and 1.4.11 Non-text contrast

Reproduction/example

https://react.carbondesignsystem.com/?path=/story/components-multiselect--default

Steps to reproduce

navigate through a the multi-select. Select a few items with Spacebar. Now try arrowing through them and decipher where focus is.

Code of Conduct

tay1orjones commented 1 year ago

Since these two issues can be addressed separately, I've broken them out into their own issues and am closing this in favor of those

  1. https://github.com/carbon-design-system/carbon/issues/13119
  2. https://github.com/carbon-design-system/carbon/issues/13120
mbgower commented 1 month ago

As discussed with @Kritvi-bhatia17, the gray fill on selection is no longer a problem because the blue border is used to indicate focus on the dropdown item with focus.